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.

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

Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.