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>