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。

添加material两个库

 

工程比较简单，主要就是演示窗口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 整理发布，欢迎转载。

转载请注明本文地址：

如有所收获，请大力转发（能点赞及推荐那是极好的）；如觉小编写文不易，欢迎给dotnet9站点打赏，小编谢谢了；谢谢大家对dotnet技术的关注和支持 。