WPF 样式在缩放后执行平移

发布于 2024-07-18 06:35:01 字数 1229 浏览 10 评论 0原文

我有一个在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

挥剑断情 2024-07-25 06:35:01

要通过中心缩放,您可以添加触发器:

<Setter Property="RenderTransformOrigin" Value=".5,.5"/>

To scale through the center you can add in your trigger:

<Setter Property="RenderTransformOrigin" Value=".5,.5"/>
满地尘埃落定 2024-07-25 06:35:01

您需要将 Button 上的 RenderTransformOrigin 设置为 0.5 x 0.5:

RenderTransformOrigin="0.5,0.5"

You need to set the RenderTransformOrigin on the Button to 0.5 by 0.5:

RenderTransformOrigin="0.5,0.5"
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文