Сделать запуск ScaleTransform из Центра вместо Top-Left Corner
У меня есть следующий стиль для кнопки, который должен увеличиваться в 1.5 раза, когда мышь его наводит. Проблема в том, что Button растет из верхнего левого угла вместо центра. Кто-нибудь знает, как это исправить?
<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>
Пробовал решение, предложенное Хенком Холтерманом, но я не мог получить следующий код для работы. Кажется, это не имеет никакого эффекта или я делаю это неправильно?
<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>
Ответы
Ответ 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>
Ответ 2
ScaleTransform.CenterX и ScaleTransform.CenterY не являются значениями между [0, 1], а должны быть абсолютными значениями пикселей.
<ScaleTransform CenterX="50" CenterY="25" ScaleX="1.5" ScaleY="1.5"/>