请ScaleTransform开始从中心而不是左上角 [英] Make ScaleTransform start from Center instead of Top-Left Corner

问题描述

我有以下样式的按钮，应该长到1.5倍大小，当鼠标悬停它。问题是按钮的左上角，而不是中心的增长。有谁知道如何解决这个问题？

 ＆LT;风格X：关键=sizeButton的TargetType =按钮＆GT;
    ＆LT; Style.Triggers＆GT;
        ＆LT;触发属性=IsMouseOverVALUE =真＆GT;
            ＆LT; setter属性=的RenderTransform＆GT;
                ＆LT; Setter.Value＆GT;
                    ＆LT; ScaleTransform的ScaleX =1.5的scaleY =1.5/＆GT;
                ＆LT; /Setter.Value>
            ＆LT; /二传手＆GT;
        ＆LT; /触发＆GT;
    ＆LT; /Style.Triggers>
＆LT; /样式和GT;
 

试图通过亨克Holterman提供的解决方案，但我不能让下面的code工作。它似乎没有任何效果还是我做错了？

 ＆LT; Window.Resources＆GT;
    ＆LT;风格X：关键=sizeButton的TargetType =按钮＆GT;
        ＆LT; Style.Triggers＆GT;
            ＆LT;触发属性=IsMouseOverVALUE =真＆GT;
                ＆LT; setter属性=的RenderTransform＆GT;
                    ＆LT; Setter.Value＆GT;
                        ＆LT; ScaleTransform的centerX =0.5CenterY =0.5的ScaleX =1.5的scaleY =1.5/＆GT;
                    ＆LT; /Setter.Value>
                ＆LT; /二传手＆GT;
            ＆LT; /触发＆GT;
        ＆LT; /Style.Triggers>
    ＆LT; /样式和GT;
＆LT; /Window.Resources>
＆LT; StackPanel的＆GT;
    ＆LT;按钮内容=增加大小WIDTH =100高度=50风格={的StaticResource sizeButton}/＆GT;
＆LT; / StackPanel的＆GT;
 

解决方案

您可以设置 RenderTransformOrigin 到0.5,0.5

 ＆LT;风格X：关键=sizeButton的TargetType =按钮＆GT;
    ＆LT; setter属性=RenderTransformOriginVALUE =0.5，0.5/＆GT;
    ＆LT; Style.Triggers＆GT;
        ＆LT;触发属性=IsMouseOverVALUE =真＆GT;
            ＆LT; setter属性=的RenderTransform＆GT;
                ＆LT; Setter.Value＆GT;
                    ＆LT; ScaleTransform的ScaleX =1.5的scaleY =1.5/＆GT;
                ＆LT; /Setter.Value>
            ＆LT; /二传手＆GT;
        ＆LT; /触发＆GT;
    ＆LT; /Style.Triggers>
＆LT; /样式和GT;
 

I have the following Style for a Button which is supposed to grow to 1.5 times the size when the mouse hovers it. The problem is that Button grows from the Top-Left corner instead of the center. Does anyone know how to fix this?

<Style x:Key="sizeButton" TargetType="Button">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Tried the solution offered by Henk Holterman but I couldn't get the following code to work. It seems to have no effect or am I doing it wrong?

<Window.Resources>
    <Style x:Key="sizeButton" TargetType="Button">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="Increase Size" Width="100" Height="50" Style="{StaticResource sizeButton}"/>
</StackPanel>

解决方案

You can set RenderTransformOrigin to "0.5, 0.5"

<Style x:Key="sizeButton" TargetType="Button">
    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

这篇关于请ScaleTransform开始从中心而不是左上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！