当前位置： 移动技术网 > IT编程>开发语言>.net > .NET CORE(C#) WPF 抽屉式菜单

.NET CORE(C#) WPF 抽屉式菜单

2020年01月18日  | 移动技术网IT编程  | 我要评论

微信公众号：dotnet9，网站：dotnet9，问题或建议：，
如果对您有所帮助：。

.net core(c#) wpf 抽屉式菜单

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考
  4. 源码

1. 本文背景

使用简单动画实现抽屉式菜单

抽屉式菜单

2. 代码实现

使用 .net core 3.1 创建名为 “animatedcolorfulmenu” 的wpf模板项目，添加1个nuget库：materialdesignthemes，版本为最新预览版3.1.0-ci948。

解决方案主要文件目录组织结构：

  • animatedcolorfulmenu
    • app.xaml
    • mainwindow.xaml

2.1 引入样式

文件【app.xaml】，在 startupuri 中设置启动的视图【mainwindow.xaml】，并在【application.resources】节点增加 materialdesignthemes库的样式文件：

<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>

2.2 演示窗体布局

文件【mainwindow.xaml】，代码不多，主要看左侧菜单，启动时，菜单在显示窗体左侧-150位置；点击展开菜单，使用简单的动画，慢慢呈现在显示窗体左侧，源码如下：

<window x:class="animatedcolorfulmenu.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:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:ignorable="d" height="600" width="1080" resizemode="noresize" 
        windowstartuplocation="centerscreen" windowstyle="none">
    <window.resources>
        <storyboard x:key="closemenu">
            <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" storyboard.targetname="gridmenu">
                <easingdoublekeyframe keytime="0" value="150"/>
                <easingdoublekeyframe keytime="0:0:0.5" value="0"/>
            </doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="gridbackground">
                <easingdoublekeyframe keytime="0" value="1"/>
                <easingdoublekeyframe keytime="0:0:0.5" value="0"/>
            </doubleanimationusingkeyframes>
        </storyboard>
        <storyboard x:key="openmenu">
            <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" storyboard.targetname="gridmenu">
                <easingdoublekeyframe keytime="0" value="0"/>
                <easingdoublekeyframe keytime="0:0:0.5" value="150"/>
            </doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="gridbackground">
                <easingdoublekeyframe keytime="0" value="0"/>
                <easingdoublekeyframe keytime="0:0:0.5" value="1"/>
            </doubleanimationusingkeyframes>
        </storyboard>
    </window.resources>
    <window.triggers>
        <eventtrigger routedevent="buttonbase.click" sourcename="buttonclose">
            <beginstoryboard x:name="closemenu_beginstoryboard" storyboard="{staticresource closemenu}"/>
        </eventtrigger>
        <eventtrigger routedevent="buttonbase.click" sourcename="buttonopen">
            <beginstoryboard storyboard="{staticresource openmenu}"/>
        </eventtrigger>
    </window.triggers>
    <grid>
        <grid x:name="gridbackground" background="#55313131" opacity="0"/>
        <button x:name="buttonopen" horizontalalignment="left" verticalalignment="top" background="{x:null}" borderbrush="{x:null}" width="30" height="30" padding="0">
            <materialdesign:packicon kind="menu" foreground="#ff313131"/>
        </button>
        <!--左侧抽屉菜单，默认在显示窗体之外，点击菜单图标再通过简单的动画呈现出来-->
        <grid x:name="gridmenu" width="150" horizontalalignment="left" margin="-150 0 0 0" background="white" rendertransformorigin="0.5,0.5">
            <grid.rendertransform>
                <transformgroup>
                    <scaletransform/>
                    <skewtransform/>
                    <rotatetransform/>
                    <translatetransform/>
                </transformgroup>
            </grid.rendertransform>
            <stackpanel>
                <image height="140" source="https://img.dotnet9.com/logo-foot.png" stretch="fill"/>
                <listview foreground="#ff313131" fontfamily="champagne &amp; limousines" fontsize="18">
                    <listviewitem height="45" padding="0">
                        <stackpanel orientation="horizontal" margin="10 0">
                            <materialdesign:packicon kind="recycle" width="20" height="20" foreground="gray" margin="5" verticalalignment="center"/>
                            <textblock text="回收" margin="10"/>
                        </stackpanel>
                    </listviewitem>
                    <listviewitem height="45" padding="0">
                        <stackpanel orientation="horizontal" margin="10 0">
                            <materialdesign:packicon kind="helpcircleoutline" width="20" height="20" foreground="#fff08033" margin="5" verticalalignment="center"/>
                            <textblock text="帮助" margin="10"/>
                        </stackpanel>
                    </listviewitem>
                    <listviewitem height="45" padding="0">
                        <stackpanel orientation="horizontal" margin="10 0">
                            <materialdesign:packicon kind="lightbulb" width="20" height="20" foreground="green" margin="5" verticalalignment="center"/>
                            <textblock text="发送反馈" margin="10"/>
                        </stackpanel>
                    </listviewitem>
                    <listviewitem height="45" padding="0">
                        <stackpanel orientation="horizontal" margin="10 0">
                            <materialdesign:packicon kind="heart" width="20" height="20" foreground="#ffd41515" margin="5" verticalalignment="center"/>
                            <textblock text="推荐" margin="10"/>
                        </stackpanel>
                    </listviewitem>
                    <listviewitem height="45" padding="0">
                        <stackpanel orientation="horizontal" margin="10 0">
                            <materialdesign:packicon kind="starcircle" width="20" height="20" foreground="#ffe6a701" margin="5" verticalalignment="center"/>
                            <textblock text="溢价认购" margin="10"/>
                        </stackpanel>
                    </listviewitem>
                    <listviewitem height="45" padding="0">
                        <stackpanel orientation="horizontal" margin="10 0">
                            <materialdesign:packicon kind="settings" width="20" height="20" foreground="#ff0069c1" margin="5" verticalalignment="center"/>
                            <textblock text="设置" margin="10"/>
                        </stackpanel>
                    </listviewitem>
                </listview>
            </stackpanel>
            <button x:name="buttonclose" horizontalalignment="right" verticalalignment="top" background="{x:null}" foreground="#ccc" borderbrush="{x:null}" width="30" height="30" padding="0">
                <materialdesign:packicon kind="close"/>
            </button>
        </grid>
    </grid>
</window>

3.本文参考

  1. 视频一：c# wpf material design ui: animated colorful navigation drawer，配套源码：animatedcolorfulmenu。
  2. c# wpf开源控件库《materialdesigninxaml》

4.源码

效果图实现代码在文中已经全部给出，可直接copy，按解决方案目录组织代码文件即可运行。

除非注明，文章均由 dotnet9 整理发布，欢迎转载。

转载请注明本文地址：

欢迎扫描下方二维码关注 dotnet9 的微信公众号，本站会及时推送最新技术文章

dotnet9

时间如流水，只能流去不流回！

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

此刻顺便为我点个《【再看】》可好？

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网