WPF 样式在缩放后执行平移
我有一个在 WPF 中开发的 Button
样式,如
<Trigger Property="IsPressed" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="0.98" ScaleY="0.98"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Button.BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Green" GlowSize="10"></OuterGlowBitmapEffect>
</Setter.Value>
</Setter>
</Trigger>
所以,这很令人兴奋。 问题是,ScaleTransform
将与 Button
关联的 Image
缩放到按钮所在区域的左上角(即,它重新缩放为按钮的 0,0 坐标,或者至少我是这么假设的)。
我对 TranslateTransform 的理解是它采用像素坐标,而不是相对于对象大小的坐标。 如果我输入 0.01、0.01 的 TranslateTransform
,那么它将在 x 和 y 方向上将 Button
移动 0.01 像素,而不是在每个方向。 我怎样才能获得相对变换,以及如何让它作为一种样式发生,即,这样我就不必为每个不同的 Button
尺寸进行不同的数学计算?
I've got a Button
style that I've been developing in WPF, as stated in this question. Another thing I'd like to do with this style is to have the Button
shrink just a little bit, to make it appear like it's getting clicked as it's getting clicked. Right now, the transform code looks like:
<Trigger Property="IsPressed" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="0.98" ScaleY="0.98"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Button.BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Green" GlowSize="10"></OuterGlowBitmapEffect>
</Setter.Value>
</Setter>
</Trigger>
So, that's exciting. Problem is, the ScaleTransform
scales the Image
associated with the Button
to the upper left of the area where the button is (ie, it's rescaling to the 0,0 coordinate of the button, or at least, that's what I assume).
My understanding of the TranslateTransform
is that it's in pixel coordinates, not in coordinates relative to the size of the object. If I put in a TranslateTransform
of 0.01, 0.01, then it will move the Button
by 0.01 pixels in both x and y, rather than 0.01*sizeof(imagedimension) pixels in each direction. How can I get that relative transform, and how can I have it happen as a style, ie, so I don't have to do different math for every different Button
size I've got?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
要通过中心缩放,您可以添加触发器:
To scale through the center you can add in your trigger:
您需要将 Button 上的 RenderTransformOrigin 设置为 0.5 x 0.5:
You need to set the RenderTransformOrigin on the Button to 0.5 by 0.5: