Make ScaleTransform start from Center instead of Top-Left Corner

22,908

Solution 1

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>

Solution 2

ScaleTransform.CenterX and ScaleTransform.CenterY are not values between [0, 1], rather they should be absolute pixel values.

<ScaleTransform CenterX="50" CenterY="25" ScaleX="1.5" ScaleY="1.5"/>
Share:
22,908
ImJames
Author by

ImJames

Updated on October 25, 2020

Comments

  • ImJames
    ImJames over 3 years

    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>