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

.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，按解决方案目录组织代码文件即可运行。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/312202.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

matlab中scrsz的意思,matlab图片c存储方法

matlab中scrsz的意思,matlab图片c存储方法

图片保存四种方法可以保存为fig,eps,jpeg,gif,png,bmp等格式。2 复制粘贴 <edit------〉copy figure&#xff0c;再粘贴到其他程序&#xff0c;如word3 saveas函数 <saveas(gca,filename,fileformat)不过此函数不好用常常出错4 print函数 <>> print(gcf,-dpng,a…
阅读更多...
C++string容器-子串获取

C++string容器-子串获取

string子串 功能描述&#xff1a; 从字符串中获取想要的子串 函数原型&#xff1a; 代码如下&#xff1a; #include <iostream> using namespace std; #include <cstring>//string求子串void test01() {string str "abcdef";string subStr str.sub…
阅读更多...
我的 .NET Core 博客性能优化经验补充

我的 .NET Core 博客性能优化经验补充

点击上方蓝字关注“汪宇杰博客”导语去年年底我写了一篇《我的 .NET Core 博客性能优化经验总结》&#xff0c;但后来还发现有一处遗漏需要补充。我们一起来看看~牺牲空间换时间我们知道软件设计只有高手才能做到又小又快&#xff0c;像我这种普通程序员通常只有两种方案&#…
阅读更多...
php怎么上传函数,PHP单文件上传原理及上传函数的封装操作示例

php怎么上传函数,PHP单文件上传原理及上传函数的封装操作示例

搜索热词H_404_0本文实例讲述了PHP单文件上传原理及上传函数的封装操作。分享给大家供大家参考&#xff0c;具体如下&#xff1a;H_404_0表单&#xff1a;H_404_00.PHP:无标题文档请选择您要上传的文件H_404_0单文件上传函数的封装&#xff1a;H_404_000.PHP://单文件上传函数的…
阅读更多...
蓝桥杯2015初赛-方程整数解-枚举

蓝桥杯2015初赛-方程整数解-枚举

题目描述 方程: a^2 b^2 c^2 1000 这个方程有正整数解吗&#xff1f;有&#xff1a;a,b,c6,8,30 就是一组解。 求出 a^2 b^2 c^2 n(1<n<10000)的所有解&#xff0c;解要保证c>b>a>1。 输入 存在多组测试数据&#xff0c;每组测试数据一行包含一个正整数…
阅读更多...
使用 OAS（OpenAPI标准）来描述 Web API

使用 OAS（OpenAPI标准）来描述 Web API

无论哪种类型的Web API, 都可能需要给其他开发者使用. 所以API的开发者体验是很重要的. API的开发者体验, 简写为 API DX (Developer Experience). 它包含很多东西, 例如如何使用API, 文档, 技术支持等等, 但是最重要的还是API的设计. 如果 API 设计的不好, 那么使用该API构建的…
阅读更多...
dedemodule.class.php,DEDECMS5.7模块/模块管理列表显示空白问题解决方法

dedemodule.class.php,DEDECMS5.7模块/模块管理列表显示空白问题解决方法

DEDECMS5.7模块/模块管理列表显示空白(站长基地配图)今天站长基地升级至dedecms最新版本&#xff0c;进入后台意外的发现&#xff0c;模块/模块管理一片空白&#xff0c;但有没有及时备份&#xff0c;于是赶紧去网上找寻解决办法&#xff0c;经过整理&#xff0c;大致有以下几种…
阅读更多...
蓝桥杯2015初赛-星系炸弹-日期计算

蓝桥杯2015初赛-星系炸弹-日期计算

题目描述 在X星系的广袤空间中漂浮着许多X星人造“炸弹”&#xff0c;用来作为宇宙中的路标。 每个炸弹都可以设定多少天之后爆炸。 比如&#xff1a;阿尔法炸弹2015年1月1日放置&#xff0c;定时为15天&#xff0c;则它在2015年1月16日爆炸。 有一个贝塔炸弹&#xff0c;a年b…
阅读更多...
dotNET Core 中怎样操作AD（续1）

dotNET Core 中怎样操作AD（续1）

在之前的文章《dotNET Core 中怎样操作 AD&#xff1f;》中主要以AD的数据同步到数据库的场景来描述了在 dotNetCore 中怎样操作AD&#xff0c;本文将继续介绍一些在 dotNetCore 中操作 AD 的其他常用操作。环境dotNET Core&#xff1a;3.0Novell.Directory.Ldap.NETStandard2_…
阅读更多...
蓝桥杯2015初赛-奇妙的数字

蓝桥杯2015初赛-奇妙的数字

题目描述 小明发现了一个奇妙的数字。它的平方和立方正好把0~9的10个数字每个用且只用了一次。你能猜出这个数字是多少吗&#xff1f; 输出 请输出该数字&#xff0c;不要输出任何多余的内容。 代码如下&#xff1a; #include <iostream> using namespace std; #inc…
阅读更多...
Elastic发布K8s部署和控制数据管理工具官方解决方案

Elastic发布K8s部署和控制数据管理工具官方解决方案

用于搜寻企业内部数据的搜寻引擎Elasticsearch开发商Elastic&#xff0c;发布了可在Kubernetes上部署Elastic Cloud的工具ECK 1.0。ECK向用户提供一个官方解决方案&#xff0c;来调度Kubernetes上的Elasticsearch&#xff0c;并让Kubernetes上的Elastic产品&#xff0c;能够以类…
阅读更多...
如何启动和关闭oracle数据库,Oracle数据库启动和关闭方式总结

如何启动和关闭oracle数据库,Oracle数据库启动和关闭方式总结

Oracle数据库启动和关闭的方法很多&#xff0c;下面就为您详细介绍几种常用的Oracle数据库启动和关闭方式&#xff0c;供您参考学习之用。一、几种Oracle数据库启动方式&#xff1a;1、startup nomount非安装启动&#xff0c;这种方式启动下可执行&#xff1a;重建控制文件、重…
阅读更多...
蓝桥杯2015初赛-牌型种数-dfs

蓝桥杯2015初赛-牌型种数-dfs

题目描述 小明被劫持到X赌城&#xff0c;被迫与其他3人玩牌。 一副扑克牌&#xff08;去掉大小王牌&#xff0c;共52张&#xff09;&#xff0c;均匀发给4个人&#xff0c;每个人13张。 这时&#xff0c;小明脑子里突然冒出一个问题&#xff1a; 如果不考虑花色&#xff0c;只…
阅读更多...
【Magicodes.IE 2.0.0-beta1版本发布】已支持数据表格、列筛选器和Sheet拆分

【Magicodes.IE 2.0.0-beta1版本发布】已支持数据表格、列筛选器和Sheet拆分

为了更好的完善Magicodes.IE&#xff0c;春节期间我们会进行一次大的重构。由于精力有限&#xff0c;急缺文档和翻译&#xff08;将文档翻译为英文文档&#xff09;支持&#xff0c;诚邀各位加入。同时在功能方便也做了相关规划&#xff0c;有兴趣的朋友可以参与提交PR。https:…
阅读更多...
oracle 取英文排序,Oracle中中文、数字,英文混杂形式的字段进行排序的方法

oracle 取英文排序,Oracle中中文、数字,英文混杂形式的字段进行排序的方法

http://blog.csdn.net/p451933505/article/details/9272257对Oracle中中文、数字、英文混杂形式的字段进行排序的方法&#xff1a;例如&#xff1a;order by NLSSORT(字段名,‘NLS_SORT SCHINESE_PINYIN_M‘), to_number(translate(字段名, ‘0123456789‘ || 字段名, ‘01234…
阅读更多...
蓝桥杯2015初赛-饮料换购-枚举

蓝桥杯2015初赛-饮料换购-枚举

题目描述 乐羊羊饮料厂正在举办一次促销优惠活动。 乐羊羊C型饮料&#xff0c;凭3个瓶盖可以再换一瓶C型饮料&#xff0c;并且可以一直循环下去(但不允许暂借或赊账)。 请你计算一下&#xff0c;如果小明不浪费瓶盖&#xff0c;尽量地参加活动。 那么&#xff0c;对于他初始买…
阅读更多...
Mbp,一个用于学习.net core的开发框架

Mbp,一个用于学习.net core的开发框架

Mbp(https://github.com/mbpframework/Mbp)是一个.net core 3的企业级web开发框架,是我个人用于学习.net core而发起的一个开源项目.这个借鉴了国外优秀开源项目abp vnext,及国内优秀开源框架Osharp的一些思想和实现.欢迎各路开发爱好者加入这个项目,一起学习,一起玩耍,共同成长…
阅读更多...
oracle 每日归档量,小知识：统计Oracle的日归档量

oracle 每日归档量,小知识：统计Oracle的日归档量

首先这对于Oracle DBA来说是个初级问题&#xff0c;即使不熟悉的初级DBA也可以快速在网上搜索到现成的SQL语句。网上搜到的查询SQL基本类似这样的逻辑&#xff1a;select trunc(completion_time) "Date", count(*) cnt, round(sum(block_size * blocks / 1024 / 1024…
阅读更多...
蓝桥杯2015初赛-奖券数目-枚举

蓝桥杯2015初赛-奖券数目-枚举

题目描述 有些人很迷信数字&#xff0c;比如带“4”的数字&#xff0c;认为和“死”谐音&#xff0c;就觉得不吉利。 虽然这些说法纯属无稽之谈&#xff0c;但有时还要迎合大众的需求。 某抽奖活动奖券号码是5位数(10000-99999)&#xff0c;要求其中不要出现带“4”的号码。 主…
阅读更多...
什么？原来C#还有这两个关键字

什么？原来C#还有这两个关键字

系列介绍简介【五分钟的dotnet】是一个利用您的碎片化时间来学习和丰富.net知识的博文系列。它所包含了.net体系中可能会涉及到的方方面面&#xff0c;比如C#的小细节&#xff0c;AspnetCore&#xff0c;微服务中的.net知识等等。场景您可以在下班坐地铁的时候&#xff0c;拿出…
阅读更多...
最新文章

Copyright @ 2022~2023