WPF Сustom button with animation

In this example, we'll look how to create a WPF button with the animation effect when clicked on it.

We will write all the code in the XAML code. 

With this we use the Style object and place it in Window.Resources.

Create the Grid element and add 1 column and 1 row inside.
Then add the Grid.Background fill and use the RadialGradientBrush object to paint the area using a radial gradient.
To create this gradient, you need to add 3 GradientStop objects.
To the button, we will tie EventTrigger object RoutedEvent = "MouseDown" which will add an animation. 

We will use the DoubleAnimation object in which we will change the Background.RadiusX and Background.RadiusY property from 0 to 20.

Also, we can activate the function IsEnabled in the button.  

To do this, use Trigger Property = "IsEnabled" Value = "True".

 

<Window.Resources>
        <Style x:Key="mnuButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="grid" Margin="0"
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch"
                                Width="Auto" MinWidth="0" MinHeight="0"
                                MaxWidth="Infinity" 
                                ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                                ScrollViewer.VerticalScrollBarVisibility="Auto" >
                            <Grid.Background>
                                <RadialGradientBrush RadiusX="0" RadiusY="0" GradientOrigin="0.5,0.5">
                                    <GradientStop x:Name="gradientStop0" Color="#FF1259D6" Offset="1" />
                                    <GradientStop x:Name="gradientStop1" Color="#FFA7D3EC" Offset="0.3" />
                                    <GradientStop x:Name="gradientStop2" Color="#FF1259D6" Offset="0" />
                                </RadialGradientBrush>
                            </Grid.Background>

                            <Grid.RowDefinitions>
                                <RowDefinition ></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition  ></ColumnDefinition>
                            </Grid.ColumnDefinitions>

                            <Grid.Triggers>
                                <EventTrigger RoutedEvent="MouseDown">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation 
                                                Storyboard.TargetName="grid" 
                                                Storyboard.TargetProperty="Background.RadiusX"
                                                From="0" To="20" Duration="0:0:1.3" FillBehavior="Stop"/>
                                            <DoubleAnimation 
                                                Storyboard.TargetName="grid" 
                                                Storyboard.TargetProperty="Background.RadiusY"
                                                From="0" To="20" Duration="0:0:1.3"   FillBehavior="Stop" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Grid.Triggers>

                            <TextBlock x:Name="textBlock" 
                                       HorizontalAlignment="Center"
                                       Margin="0" TextWrapping="Wrap"
                                       Text="TextExample"
                                       VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="True">
                                <Setter Property="IsEnabled" TargetName="grid" Value="True"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
            </Style.Triggers>
        </Style>
</Window.Resources>

In order to use this style we will tie it to the real buttons in the program.

<Grid>
        <Button x:Name="button" 
                HorizontalAlignment="Left"
                Height="95" Margin="76,39,0,0"
                VerticalAlignment="Top" Width="132" 
                Style="{DynamicResource mnuButtonStyle}"/>

        <Button x:Name="button1" 
                Height="95" Margin="309,39,76,0"
                VerticalAlignment="Top" 
                Style="{DynamicResource mnuButtonStyle}"/>

        <Button x:Name="button2" 
                HorizontalAlignment="Left"
                Height="95" Margin="191,0,0,52"
                VerticalAlignment="Bottom" Width="132" 
                Style="{DynamicResource mnuButtonStyle}"/>
</Grid>