C# WPF抽屉效果实现

时间如流水，只能流去不流回！

点赞再看，养成习惯，这是您给我创作的动力！

本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。

一、先看效果：

二、本文背景

有网友给站长Dotnet9留言：“WPF中能否实现UWP中SplitView效果，即抽屉效果吗？” Dotnet9记得国外开源C# WPF控件库MaterialDesignInXaml中有这种效果，可以查看本站写的推荐文章：MaterialDesignInXaml控件介绍，站长也是个喜欢码砖的人，对代码是很感兴趣的，遂Google了一个YouTube视频敲出本文实现的代码，希望对他和您有用。

三、代码实现

站长使用.Net Core 3.1创建的WPF工程，创建PopUpAndNav解决方案后，需要添加两个Nuget库：MaterialDesignThemes和MaterialDesignColors。

添加Material两个库

工程比较简单，主要就是演示窗口MainWindow：

解决方案结构

代码不多，我就全部贴上代码吧。

添加MaterialDesignInXaml样式：App.xaml

<Application x:Class="PopUpAndNav.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:PopUpAndNav"StartupUri="MainWindow.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>
</Application>

演示窗口MainWindow.xaml代码，使用简单的自定义窗口，看效果图，有右上角的标题栏菜单及左上角的抽屉菜单：

<Window x:Class="PopUpAndNav.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:PopUpAndNav"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"mc:Ignorable="d" Foreground="White"Title="MainWindow" Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None"><Window.Resources><Storyboard x:Key="MenuOpen"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu"><EasingDoubleKeyFrame KeyTime="0" Value="60"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" 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.5" 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 x:Name="GridTitle" Height="60" VerticalAlignment="Top" Background="#FF1368BD" MouseDown="GridTitle_MouseDown"><TextBlock Text="C# WPF 抽屉效果" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22"/><StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right"><TextBlock Text="Dotnet9.com" VerticalAlignment="Center" FontSize="18"/><materialDesign:PopupBox Foreground="White" Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False"><StackPanel Width="150"><Button Content="账号"/><Button Content="设置"/><Button Content="帮助"/><Separator/><Button x:Name="ButtonPopUpLogout" Content="Logout" Click="ButtonPopUpLogout_Click"/></StackPanel></materialDesign:PopupBox></StackPanel></Grid><Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1B3861"><StackPanel><Grid Height="150" Background="White"><Button x:Name="ButtonCloseMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click"><materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF1B3861" Width="25" Height="25"/></Button><Button x:Name="ButtonOpenMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click"><materialDesign:PackIcon Kind="Menu" Foreground="#FF1B3861" Width="25" Height="25"/></Button></Grid><ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD"><ListViewItem Height="60"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="ViewDashboard" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="首页" VerticalAlignment="Center" Margin="20 10"/></StackPanel></ListViewItem><ListViewItem Height="60"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Pencil" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="创建" VerticalAlignment="Center" Margin="20 10"/></StackPanel></ListViewItem><ListViewItem Height="60"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Ticket" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="售票" VerticalAlignment="Center" Margin="20 10"/></StackPanel></ListViewItem><ListViewItem Height="60"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Message" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="信息" VerticalAlignment="Center" Margin="20 10"/></StackPanel></ListViewItem><ListViewItem Height="60"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="GithubBox" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="GitHub" VerticalAlignment="Center" Margin="20 10"/></StackPanel></ListViewItem></ListView></StackPanel></Grid></Grid>
</Window>

后台MainWindow.xaml.cs，主要是处理窗体关闭事件及抽屉菜单的展开与折叠：

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;namespace PopUpAndNav
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void ButtonPopUpLogout_Click(object sender, RoutedEventArgs e){Application.Current.Shutdown();}private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e){ButtonOpenMenu.Visibility = Visibility.Collapsed;ButtonCloseMenu.Visibility = Visibility.Visible;}private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e){ButtonOpenMenu.Visibility = Visibility.Visible;ButtonCloseMenu.Visibility = Visibility.Collapsed;}private void GridTitle_MouseDown(object sender, MouseButtonEventArgs e){DragMove();}}
}