A sliding panel can be created in WPF with a simple animation which adjusts the position of a panel. In this post, we’re going to create a sliding panel.

Section 1: The markup

  1. Create a new WPF Project in visual studio.
  2. Now you will get a project window the following XAML code.
<Window x:Class="WPFDemo.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:WPFDemo"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"> <Grid>
<Grid>
</Window>

3. Next, we are going to create an opening and closing animation for the panel. Paste this code just above the <Grid> tag.

<Window.Resources>
//Opening
<Storyboard x:Key="OpenMenu"> <ThicknessAnimation Storyboard.TargetProperty="Margin" From="-150,0,0,0" To="0,0,0,0" DecelerationRatio="0.9" Duration="0:0:0.5"/>
</Storyboard>
//Closing
<Storyboard x:Key="CloseMenu"> <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,0,0,0" To="-150,0,0,0" DecelerationRatio="0.9" Duration="0:0:0.5"/>
</Storyboard>
</Window.Resources>

4. Create a panel in the <Grid> tag.

<StackPanel Panel.ZIndex="2" Name="LeftMenu" Orientation="Horizontal" Height="400" HorizontalAlignment="Left" Margin='-150,0,0,0'>

</StackPanel>

5. Add two buttons to the StackPanel (One button for opening the panel and the other one for closing the StackPanel).

<StackPanel Panel.ZIndex="2" Name="LeftMenu" Orientation="Horizontal" Height="400" HorizontalAlignment="Left" Margin='-150,0,0,0'>
<Border BorderBrush="#AF1719" BorderThickness="1" Width="150" Background="GhostWhite">
<Button Name="btnclose" Height="40" HorizontalAlignment="Stretch" VerticalAlignment="Top" Content="Close" FontWeight="SemiBold" HorizontalContentAlignment="Left" BorderBrush="AliceBlue"></Button>
</Border>
<StackPanel Orientation="Vertical">
<Grid Margin="0,21,0,0">
<Button x:Name="btnshow" Width="20" Height="20" BorderThickness="0" Content="O" ToolTip="Open Menu"></Button>
</Grid>
</StackPanel>
</StackPanel>

Here’s the full XAML code.

<Window x:Class="WPFDemo.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:WPFDemo"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.Resources>
//Opening
<Storyboard x:Key="OpenMenu">
    <ThicknessAnimation Storyboard.TargetProperty="Margin" From="-150,0,0,0" To="0,0,0,0" DecelerationRatio="0.9" Duration="0:0:0.5"/>
</Storyboard>
//Closing <Storyboard x:Key="CloseMenu"> <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,0,0,0" To="-150,0,0,0" DecelerationRatio="0.9" Duration="0:0:0.5"/> </Storyboard> </Window.Resources> <Grid> <StackPanel Panel.ZIndex="2" Name="LeftMenu" Orientation="Horizontal" Height="400" HorizontalAlignment="Left" Margin='-150,0,0,0'> <Border BorderBrush="#AF1719" BorderThickness="1" Width="150" Background="GhostWhite"> <Button Name="btnclose" Height="40" HorizontalAlignment="Stretch" VerticalAlignment="Top" Content="Close" FontWeight="SemiBold" HorizontalContentAlignment="Left" BorderBrush="AliceBlue"></Button> </Border> <StackPanel Orientation="Vertical"> <Grid Margin="0,21,0,0"> <Button x:Name="btnshow" Width="20" Height="20" BorderThickness="0" Content="O" ToolTip="Open Menu"></Button> </Grid> </StackPanel> </StackPanel> <Grid>
</Window>

That’s all with the markup.

Section 2: C# coding

6. Add the following namespace

using System.Windows.Media.Animation;

7. Create Button Click Event Handlers for the buttons we have added.

public MainWindow()
{
InitializeComponent();
btnshow.Click += Btnshow_Click;
btnclose.Click += Btnclose_Click;
}
private void Btnclose_Click(object sender, RoutedEventArgs e) { Storyboard sb = Resources["CloseMenu"] as Storyboard; sb.Begin(LeftMenu); }
private void Btnshow_Click(object sender, RoutedEventArgs e) { Storyboard sb = Resources["OpenMenu"] as Storyboard; sb.Begin(LeftMenu); }

7. Call the animation to open the sliding panel in Btnshow_Click Event Handler.

private void Btnclose_Click(object sender, RoutedEventArgs e) 
{
Storyboard sb = Resources["CloseMenu"] as Storyboard;
sb.Begin(LeftMenu);
}

8. Call the animation to close the sliding panel in Btnclose_Click Event Handler.

private void Btnclose_Click(object sender, RoutedEventArgs e) 
{
Storyboard sb = Resources["CloseMenu"] as Storyboard;
sb.Begin(LeftMenu);
}

Your c# code will be something similar to this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
namespace WPFDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            btnshow.Click += Btnshow_Click;
            btnclose.Click += Btnclose_Click;
        }
        private void Btnclose_Click(object sender, RoutedEventArgs e)
        {
            Storyboard sb = Resources["CloseMenu"] as Storyboard;
            sb.Begin(LeftMenu);
        }

        private void Btnshow_Click(object sender, RoutedEventArgs e)
        {
            Storyboard sb = Resources["OpenMenu"] as Storyboard;
            sb.Begin(LeftMenu);
        }
    }
}

Output

Window with closed sliding panel
Window with closed sliding panel
Window with open sliding panel
Window with open sliding panel