How do I scale up button when trigger isMouseOver is true-CodePudding

I just started learning xaml so I barely have any knowledge of it yet.

I was trying to make the button scale up to 1.2 when the user Overs on the button but I can't find anywhere how to do it

Bellow is the xaml code if it is of any use,

<Window.Resources>

    <SolidColorBrush x:Key="Button.Static.Background" Color="#FF124D91"/>
    <SolidColorBrush x:Key="Button.Static.Border" Color="Transparent"/>
    <SolidColorBrush x:Key="Button.Static.Foreground" Color="White"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="Transparent"/>
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF124D91"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF124D91"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="Transparent"/>
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="Transparent"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="Transparent"/>
    <Style x:Key="ButtonPressStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource Button.Static.Foreground}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true" CornerRadius="8">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                            <Setter Property="Foreground" Value="Black"/>
                            <Setter Property="BorderThickness" Value="1.5"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</Window.Resources>

Button:

<Button x:Name="ButtonPress" Style="{DynamicResource ButtonPressStyle}" Margin="133,0,133,15" Content="Press" Height="50" VerticalAlignment="Bottom" Click="ButtonPress_Click"/>

Also if theres any way to do this in C# too please teach me how to do it,

Appreciate any help.

CodePudding user response：

add this to your trigger property

<Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
<Setter Property="RenderTransform">
     <Setter.Value>
           <ScaleTransform ScaleX="1.2" ScaleY="1.2"/>
     </Setter.Value>
</Setter>

final code

<Trigger Property="IsMouseOver" Value="true">
     <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
     <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
     <Setter Property="Foreground" Value="Black"/>
     <Setter Property="BorderThickness" Value="1.5"/>
     <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
     <Setter Property="RenderTransform">
         <Setter.Value>
               <ScaleTransform ScaleX="1.2" ScaleY="1.2"/>
         </Setter.Value>
      </Setter>
</Trigger>