WPF animated PopUp menu

In this tutorial, we'll talk about how to create an animated popup menu in WPF.

All the code we write in the XAML code and without using the codebehind. The external interface of the program is divided into several areas.
It will be the left part StackPanel, the central part Grid, the upper part StackPanel and the lower part Grid.
In the left part add four buttons. Also add animation DoubleAnimation that will work when you click on the button represented here.

In the bottom part we will place the Settings section.
When you start the program, the user can not see this section.It activates after pressing the button.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="Main" Height="400" Width="600" WindowStartupLocation="CenterScreen">

    <Grid x:Name="grid1" Margin="0,0,0,0"
           Background="#7385E5">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <StackPanel  x:Name="stackPanel1"
                    Background="#7385E5" 
                    Margin="-100,0,0,0" Width="100"
                    HorizontalAlignment="Left">
            <StackPanel.RenderTransform>
                <TranslateTransform x:Name="trans__TransStackPanel" X="0" Y="0" />
            </StackPanel.RenderTransform>
            <Grid Height="80">
            </Grid>
            <Button 
                     Margin="-100,0,0,0" Height="40" 
                     Width="100" HorizontalAlignment="Left" 
                     Background="#64E895" 
                     FontFamily="Wingdings" 
                     FontSize="24"
                     Content="&#x3A;">
                <Button.RenderTransform>
                    <TranslateTransform x:Name="trans__TransformButton1" X="0" Y="0" />
                </Button.RenderTransform>
            </Button>
            <Button   
                     Margin="-100,0,0,0" Height="40" 
                     Width="100" HorizontalAlignment="Left"
                     Background="#64E895"
                     FontFamily="Wingdings" 
                     FontSize="24"
                     Content="&#x37;">
                <Button.RenderTransform>
                    <TranslateTransform x:Name="trans__TransformButton2" X="0" Y="0" />
                </Button.RenderTransform>
            </Button>
            <Button  
                     Margin="-100,0,0,0" Height="40" 
                     Width="100" HorizontalAlignment="Left"
                     Background="#64E895"
                     FontFamily="Wingdings" 
                     FontSize="24"
                     Content="&#x3C;">
                <Button.RenderTransform>
                    <TranslateTransform x:Name="trans__TransformButton3" X="0" Y="0" />
                </Button.RenderTransform>
            </Button>
            <Button  
                     Margin="-100,0,0,0" 
                     Height="40" Width="100"
                     HorizontalAlignment="Left"
                     Background="#64E895"
                     FontFamily="Wingdings" 
                     FontSize="24"
                     Content="&#x38;">
                <Button.RenderTransform>
                    <TranslateTransform x:Name="trans__TransformButton4" X="0" Y="0" />
                </Button.RenderTransform>
            </Button>
        </StackPanel>
        <Grid x:Name="grid2"
                    Background="#66BEE0" 
              Margin="0,0,0,0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Grid.RenderTransform>
                <TranslateTransform x:Name="trans__TransformGrid" X="0" Y="0" />
            </Grid.RenderTransform>

            <Button   
                Grid.Column="0" 
                Margin="10,10,0,0"
                Width="40" Height="40" 
                Panel.ZIndex="3"
                HorizontalContentAlignment="Center" 
                VerticalContentAlignment="Center"
                Padding="1,1,1,1" VerticalAlignment="Top"  
                Content="&#xDC;" 
                Background="{x:Null}"
                FontFamily="Wingdings"
                FontSize="30" 
                BorderBrush="{x:Null}"
                FontWeight="Bold" HorizontalAlignment="Left">

                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="trans__TransStackPanel"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5" />

                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid"
                                    Storyboard.TargetProperty="Y"
                                    From="0" To="45" 
                                    Duration="0:0:0.5" />

                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton1"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton2"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5"  BeginTime="0:0:0.1" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton3"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5"   BeginTime="0:0:0.2"/>
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton4"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5"   BeginTime="0:0:0.3"/>

                                    <DoubleAnimation 
                                                    Storyboard.TargetName="stackPanel1"
                                                    Storyboard.TargetProperty="Opacity" 
                                                    From="0"  To="1"                                                   
                                                    Duration="0:0:1"></DoubleAnimation>

                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>

            <Button   
                Grid.Column="0"                
                Margin="10,50,0,0"
                Width="40" Height="40" Panel.ZIndex="3"
                HorizontalContentAlignment="Center" 
                VerticalContentAlignment="Center"
                Padding="1,1,1,1" VerticalAlignment="Top"  
                Content="&#x78;" 
                Background="{x:Null}"
                FontFamily="Wingdings"
                FontSize="30" 
                BorderBrush="{x:Null}"
                FontWeight="Bold" HorizontalAlignment="Left">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="trans__TransStackPanel"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5" />

                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid"
                                    Storyboard.TargetProperty="Y"
                                    From="45" To="0" 
                                    Duration="0:0:0.5" />

                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton1"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton2"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5"   />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton3"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5"  />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton4"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5"  />

                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>

        </Grid>
        <StackPanel Orientation="Horizontal" 
                    VerticalAlignment="Top" Height="50" 
                    HorizontalAlignment="Right" Margin="3,0" Panel.ZIndex="5">
            <Button Width="40" Height="40"
                    Margin="5,3,5,0" VerticalAlignment="Top"
                    HorizontalAlignment="Left" 
                    Content="&#xDD;" 
                    Background="{x:Null}"
                    FontFamily="Wingdings" 
                    FontSize="26" 
                    BorderBrush="{x:Null}">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid_"
                                    Storyboard.TargetProperty="Y"
                                    From="369" To="0" 
                                    Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <Button Width="40" Height="40" 
                    Margin="5,3,5,0" VerticalAlignment="Top" 
                    HorizontalAlignment="Left"
                    Background="{x:Null}" 
                    Content="&#xDE;"                     
                    FontFamily="Wingdings" 
                    FontSize="26"
                    BorderBrush="{x:Null}">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid_"
                                    Storyboard.TargetProperty="Y"
                                    From="120" To="369"
                                    Duration="0:0:0.2"  />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>

            </Button>
        </StackPanel>
        <Grid x:Name="grid3"
              Margin="0,0,0,0" 
              Background="#64E895" >
            <Grid.RenderTransform>
                <TranslateTransform x:Name="trans__TransformGrid_" 
                                    X="0" Y="369" />
            </Grid.RenderTransform>
            <Label x:Name="label" Content="Settings" 
                   HorizontalAlignment="Left" 
                   Height="43" Margin="10,10,0,0" 
                   VerticalAlignment="Top" Width="100"
                   FontSize="22" FontWeight="Bold"/>
        </Grid>
    </Grid>

</Window>

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>