C# WPF抽屉效果实现（C# WPF Material Design UI: Navigation Drawer & PopUp Menu）
程序员文章站
2023-01-12 22:07:07
时间如流水，只能流去不流回！ 点赞再看，养成习惯，这是您给我创作的动力！ 本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分 ......
时间如流水，只能流去不流回！
点赞再看，养成习惯，这是您给我创作的动力！
本文 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技术的关注和支持 。