時間如流水，只能流去不流回！

點贊再看，養成習慣，這是您給我創作的動力！

本文 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();}} }

四、文章參考

上面的代碼是Dotnet9看 Disign com WPF 大神視頻手敲的，下面是大神youtube地址及本實例學習視頻。

參考：
Design com WPF ：https://www.youtube.com/watch?v=YQ1EJJZBHyE

除非注明，文章均由?Dotnet9?整理發布，歡迎轉載。

轉載請注明本文地址：https://dotnet9.com/2019/12/it-technology/csharp/wpf/csharp-wpf-material-design-ui-navigation-drawer-popup-menu.html

如有所收獲，請大力轉發（能點贊及推薦那是極好的）；如覺小編寫文不易，歡迎給Dotnet9站點打賞，小編謝謝了；謝謝大家對dotnet技術的關注和支持 。

總結

以上是生活随笔為你收集整理的C# WPF抽屉效果实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。