欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)

程序员文章站 2022-05-23 22:03:26
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 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等,只分享自己熟悉的、自己会的。

一、先看效果:

C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)

二、本文背景

有网友给站长dotnet9留言:“wpf中能否实现uwp中splitview效果,即抽屉效果吗?” dotnet9记得国外开源c# wpf控件库materialdesigninxaml中有这种效果,可以查看本站写的推荐文章:materialdesigninxaml控件介绍,站长也是个喜欢码砖的人,对代码是很感兴趣的,遂google了一个youtube视频敲出本文实现的代码,希望对他和您有用。

三、代码实现

站长使用.net core 3.1创建的wpf工程,创建popupandnav解决方案后,需要添加两个nuget库:materialdesignthemes和materialdesigncolors。

C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)添加material两个库

 

工程比较简单,主要就是演示窗口mainwindow:

C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)解决方案结构

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

添加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技术的关注和支持 。