<Window x:Class="WpfTemplateWithMaterialDesign.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:WpfTemplateWithMaterialDesign"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d" Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None" Foreground="White">
    <Window.Resources>
        <Storyboard x:Key="MenuOpen">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="60" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="200" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="MenuClose">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="200" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="60" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
            <BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
            <BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
        </EventTrigger>
    </Window.Triggers>

    <Grid Background="LightGray">
        <Grid Height="30" VerticalAlignment="Top" Background="#6200EE">
            <Grid Width="888" HorizontalAlignment="Left" Margin="60 0 0 0" MouseDown="Grid_MouseDown"/>
            <TextBlock Text="WPF Template" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20"/>
            <StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right">
                <TextBlock Text="Account Name" VerticalAlignment="Center" FontSize="14"/>
                <materialDesign:PopupBox Margin="3" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
                    <StackPanel Width="150">
                        <Button Content="Account" />
                        <Button Content="Settings" />
                        <Button Content="Help" />
                        <Separator/>
                        <Button x:Name="ButtonPopUpLogout" Content="Logout" Click="ButtonPopUpLogout_Click"/>
                    </StackPanel>
                </materialDesign:PopupBox>
            </StackPanel>
        </Grid>
        <Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#3700B3">
            <StackPanel>
            <Grid Height="30" Background="White">
                    <Button x:Name="ButtonCloseMenu" Width="60" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click">
                        <materialDesign:PackIcon Foreground="#3700B3" Kind="ArrowLeft" Width="20" Height="20"/>
                    </Button>
                    <Button x:Name="ButtonOpenMenu" Width="60" Height="30" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click">
                        <materialDesign:PackIcon Foreground="#3700B3" Kind="Menu" Width="20" Height="20"/>
                    </Button>
                </Grid>
                <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="White">
                    <ListViewItem Height="60">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="ViewDashboard" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="Home" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="60">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="Pencil" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="Create" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="60">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="Ticket" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="Tickets" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="60">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="Message" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="Message" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="60">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="GithubBox" Margin="10" Width="25" Height="25" VerticalAlignment="Center"/>
                            <TextBlock Text="GitHub" VerticalAlignment="Center" Margin="20 10"/>
                        </StackPanel>
                    </ListViewItem>
                </ListView>
            </StackPanel>
        </Grid>
    </Grid>
</Window>