Creating a sliding panel in WPF

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

• Create a new WPF Project in visual studio.
• 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>

• 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>

• 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>

• 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

• Add the following namespace.

using System.Windows.Media.Animation;

• 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);
}

• 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); 
}

• 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);
        }
    }
}