Changing size of Button on MouseOver in WPF

See more:

WPF

user-controls

, +

Hi,

I am trying to create a control that performs several animations on mouse over event of a button. The first functionality is that, the button should take padding=2 and occupy the entire columns. I am not able to do that; if I am trying to decrease the width of the button on mouseover, I am able to do, but when I am trying to increase the width, the button is expanding but the expanded part is not visible. How to implement the same ?

I am using the below code in control template. Please suggest changes :-

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--Create a control template for button-->
    <ControlTemplate x:Key="buttonAnimate" TargetType="Button">
        <Grid Name="myGrid">
            <Button Name="myButton" Background="{TemplateBinding Background }" Width="{TemplateBinding Width}">
            </Button>
        <Border Name="MyBorder" BorderBrush="Orange" BorderThickness="3" CornerRadius="2"></Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="DarkRed" TargetName="MyBorder"/>
                <Setter Property="Width" Value="200" TargetName="myButton"/>
                <Setter Property="Cursor" Value="Hand" TargetName="myGrid"/>
                <Setter Property="Width" Value="300" TargetName="myButton"/>
                <Setter Property="Width" Value="300" TargetName="MyBorder"/>
                <Setter Property="Padding" Value="2" TargetName="myButton"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ResourceDictionary>

Thanks in advance.