C# WPF抽屜效果實作（C# WPF Material Design UI: Navigation Drawer & PopUp Menu）

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

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

本文 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，

工程比較簡單，主要就是演示視窗MainWindow：

代碼不多，我就全部貼上代碼吧，

添加MaterialDesignInXaml樣式：App.xaml

 1 <Application x:Class="PopUpAndNav.App"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:local="clr-namespace:PopUpAndNav"
 5              StartupUri="MainWindow.xaml">
 6     <Application.Resources>
 7         <ResourceDictionary>
 8             <ResourceDictionary.MergedDictionaries>
 9                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/>
10                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
11                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
12                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/>
13             </ResourceDictionary.MergedDictionaries>
14         </ResourceDictionary>
15     </Application.Resources>
16 </Application>

演示視窗MainWindow.xaml代碼，使用簡單的自定義視窗，看效果圖，有右上角的標題欄選單及左上角的抽屜選單：

 1 <Window x:Class="PopUpAndNav.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:PopUpAndNav"
 7         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
 8         mc:Ignorable="d" Foreground="White"
 9         Title="MainWindow" Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
10     <Window.Resources>
11         <Storyboard x:Key="MenuOpen">
12             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
13                 <EasingDoubleKeyFrame KeyTime="0" Value="60"/>
14                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
15             </DoubleAnimationUsingKeyFrames>
16         </Storyboard>
17         <Storyboard x:Key="MenuClose">
18             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
19                 <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
20                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
21             </DoubleAnimationUsingKeyFrames>
22         </Storyboard>
23     </Window.Resources>
24 
25     <Window.Triggers>
26         <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
27             <BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
28         </EventTrigger>
29         <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
30             <BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
31         </EventTrigger>
32     </Window.Triggers>
33     
34     <Grid Background="LightGray">
35         <Grid x:Name="GridTitle" Height="60" VerticalAlignment="Top" Background="#FF1368BD" MouseDown="GridTitle_MouseDown">
36             <TextBlock Text="C# WPF 抽屜效果" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22"/>
37             <StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right">
38                 <TextBlock Text="Dotnet9.com" VerticalAlignment="Center" FontSize="18"/>
39                 <materialDesign:PopupBox Foreground="White" Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
40                     <StackPanel Width="150">
41                         <Button Content="賬號"/>
42                         <Button Content="設定"/>
43                         <Button Content="幫助"/>
44                         <Separator/>
45                         <Button x:Name="ButtonPopUpLogout" Content="Logout" Click="ButtonPopUpLogout_Click"/>
46                     </StackPanel>
47                 </materialDesign:PopupBox>
48             </StackPanel>
49         </Grid>
50         <Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1B3861">
51             <StackPanel>
52                 <Grid Height="150" Background="White">
53                     <Button x:Name="ButtonCloseMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click">
54                         <materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF1B3861" Width="25" Height="25"/>
55                     </Button>
56                     <Button x:Name="ButtonOpenMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click">
57                         <materialDesign:PackIcon Kind="Menu" Foreground="#FF1B3861" Width="25" Height="25"/>
58                     </Button>
59                 </Grid>
60                 <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD">
61                     <ListViewItem Height="60">
62                         <StackPanel Orientation="Horizontal">
63                             <materialDesign:PackIcon Kind="ViewDashboard" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
64                             <TextBlock Text="首頁" VerticalAlignment="Center" Margin="20 10"/>
65                         </StackPanel>
66                     </ListViewItem>
67                     <ListViewItem Height="60">
68                         <StackPanel Orientation="Horizontal">
69                             <materialDesign:PackIcon Kind="Pencil" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
70                             <TextBlock Text="創建" VerticalAlignment="Center" Margin="20 10"/>
71                         </StackPanel>
72                     </ListViewItem>
73                     <ListViewItem Height="60">
74                         <StackPanel Orientation="Horizontal">
75                             <materialDesign:PackIcon Kind="Ticket" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
76                             <TextBlock Text="售票" VerticalAlignment="Center" Margin="20 10"/>
77                         </StackPanel>
78                     </ListViewItem>
79                     <ListViewItem Height="60">
80                         <StackPanel Orientation="Horizontal">
81                             <materialDesign:PackIcon Kind="Message" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
82                             <TextBlock Text="資訊" VerticalAlignment="Center" Margin="20 10"/>
83                         </StackPanel>
84                     </ListViewItem>
85                     <ListViewItem Height="60">
86                         <StackPanel Orientation="Horizontal">
87                             <materialDesign:PackIcon Kind="GithubBox" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
88                             <TextBlock Text="GitHub" VerticalAlignment="Center" Margin="20 10"/>
89                         </StackPanel>
90                     </ListViewItem>
91                 </ListView>
92             </StackPanel>
93         </Grid>
94     </Grid>
95 </Window>

后臺MainWindow.xaml.cs，主要是處理表單關閉事件及抽屜選單的展開與折疊：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15 
16 namespace PopUpAndNav
17 {
18     /// <summary>
19     /// Interaction logic for MainWindow.xaml
20     /// </summary>
21     public partial class MainWindow : Window
22     {
23         public MainWindow()
24         {
25             InitializeComponent();
26         }
27 
28         private void ButtonPopUpLogout_Click(object sender, RoutedEventArgs e)
29         {
30             Application.Current.Shutdown();
31         }
32 
33         private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
34         {
35             ButtonOpenMenu.Visibility = Visibility.Collapsed;
36             ButtonCloseMenu.Visibility = Visibility.Visible;
37         }
38 
39         private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
40         {
41             ButtonOpenMenu.Visibility = Visibility.Visible;
42             ButtonCloseMenu.Visibility = Visibility.Collapsed;
43         }
44         
45         private void GridTitle_MouseDown(object sender, MouseButtonEventArgs e)
46         {
47             DragMove();
48         }
49     }
50 }

四、文章參考

上面的代碼是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技術的關注和支持 ，

標籤：WPF

上一篇：WPF參考WinForm控制元件

下一篇：WPF之圖片處理系列