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"/>
Author by
ImJames
Updated on October 25, 2020Comments
-
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>