WPF Animation

Dropdown animation using Storyboard and Code-behide

<Window
    x:Class="AnimationDemo.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"
    Title="Animation Demo"
    Width="400"
    Height="450"
    mc:Ignorable="d">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Navigation Bar  -->
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>

            <!--  Header  -->
            <Border
                Grid.Row="0"
                Padding="20 10"
                Background="#fc7f1e">
                <Grid MaxWidth="500">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="auto" />
                    </Grid.ColumnDefinitions>

                    <!--  Title  -->
                    <TextBlock
                        Grid.Column="0"
                        FontSize="16"
                        Foreground="White"
                        Text="Demo" />

                    <!--  Dropdown Toggle  -->
                    <CheckBox
                        x:Name="cbDropdown"
                        Grid.Column="1"
                        Checked="OpenDropdown"
                        RenderTransformOrigin="0.5 0.5"
                        Unchecked="CloseDropdown">
                        <CheckBox.Template>
                            <ControlTemplate TargetType="CheckBox">
                                <Grid Background="Transparent">
                                    <Viewbox Width="16" Height="16">
                                        <Path
                                            Data="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
                                            Fill="White"
                                            Stretch="Fill" />
                                    </Viewbox>
                                </Grid>
                            </ControlTemplate>
                        </CheckBox.Template>
                        <CheckBox.RenderTransform>
                            <RotateTransform Angle="0" />
                        </CheckBox.RenderTransform>
                        <CheckBox.Style>
                            <Style TargetType="CheckBox">
                                <Style.Triggers>
                                    <EventTrigger RoutedEvent="Checked">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                                    To="180"
                                                    Duration="0:0:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="Unchecked">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                                    To="0"
                                                    Duration="0:0:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Style.Triggers>
                            </Style>
                        </CheckBox.Style>
                    </CheckBox>
                </Grid>
            </Border>

            <!--  Dropdown  -->
            <Border
                x:Name="dropdownContent"
                Grid.Row="1"
                Background="#f0f0f0">
                <StackPanel x:Name="dropdownInnerContent">
                    <StackPanel.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="MaxWidth" Value="500" />
                        </Style>
                        <Style TargetType="Border">
                            <Setter Property="Padding" Value="20 10" />
                            <Setter Property="Background" Value="Transparent" />
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation
                                                    Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                                                    To="#dbdbdb"
                                                    Duration="0:0:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <ColorAnimation
                                                    Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                                                    To="Transparent"
                                                    Duration="0:0:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </StackPanel.Resources>

                    <Border>
                        <TextBlock Text="Home" />
                    </Border>
                    <Border>
                        <TextBlock Text="Products" />
                    </Border>
                    <Border>
                        <TextBlock Text="Contact" />
                    </Border>
                    <Border>
                        <TextBlock Text="About" />
                    </Border>
                </StackPanel>
            </Border>
        </Grid>

        <!--  Page Content  -->
        <TextBlock
            Grid.Row="1"
            Margin="0 40 0 0"
            HorizontalAlignment="Center"
            Text="Welcome to my application!" />
    </Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Media.Animation;

namespace AnimationDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private readonly Duration _openCloseDuration = new Duration(TimeSpan.FromSeconds(0.5));

        public MainWindow()
        {
            InitializeComponent();
            dropdownContent.Height = 0;
        }

        private void OpenDropdown(object sender, RoutedEventArgs e)
        {
            dropdownInnerContent.Measure(new Size(dropdownContent.MaxWidth, dropdownContent.MaxHeight));
            DoubleAnimation heightAnimation = new DoubleAnimation(0, dropdownInnerContent.DesiredSize.Height, _openCloseDuration);
            dropdownContent.BeginAnimation(HeightProperty, heightAnimation);
        }

        private void CloseDropdown(object sender, RoutedEventArgs e)
        {
            DoubleAnimation heightAnimation = new DoubleAnimation(0, _openCloseDuration);
            dropdownContent.BeginAnimation(HeightProperty, heightAnimation);
        }
    }
}