使ScaleTransform从中心开始而不是左上角

Question

我有一个按钮的样式，鼠标悬停时应该将其大小放大1.5倍。问题是该按钮从左上角开始增长而不是中心。有人知道如何解决吗？

<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>

尝试了Henk Holterman提供的解决方案，但是我无法让以下代码起作用。它似乎没有任何效果，还是我的操作有误？

<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>

- ImJames

Answer 1

你可以将RenderTransformOrigin设置为"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>

- Fredrik Hedblad

Answer 2

ScaleTransform.CenterX和ScaleTransform.CenterY不是[0,1]之间的值，而应该是绝对像素值。

<ScaleTransform CenterX="50" CenterY="25" ScaleX="1.5" ScaleY="1.5"/>

- TREVOR