标签：技术类   present   抽屉菜单   为我   展开   scree   border   height   按钮组   

微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，
如果对您有所帮助：欢迎赞赏。

.NET CORE(C#) WPF 值得推荐的动画菜单设计

阅读导航

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

1. 本文背景

YouTube上老外的一个设计，站长觉得不错，分享给大家作为参考，抽屉菜单的动画做的非常不错。

运行起始界面：

站长运行操作一遍，录制了动画大家看看：

2. 代码实现

使用 .NET CORE 3.1 创建名为 “AnimatedMenu” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes，版本为最新预览版3.1.0-ci948。

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

• AnimatedMenu
  • App.xaml
  • MainWindow.xaml
    • MainWindow.xaml.cs

2.1 引入样式

文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件：

2.2 演示窗体

文件【MainWindow.xaml】，布局代码、动画代码都在此文件中，源码如下：

简单说明下：

1. "StackPanelMenu" 作为左侧菜单容器，默认是显示在窗体外，距离窗体左边缘-250，点击左上角菜单按钮图标可控制此容器的显示与隐藏，注：菜单开关由两个按钮组成 "ButtonOpenMenu" 和 "ButtonCloseMenu"。
2. 左侧菜单项使用 "ListView" 进行布局，实际开发需要运用模板，使用MVVM做成动态菜单，方便扩展。
3. 中间的5张演示照片，也和2类似。直接使用Grid进行的布局，实际上都需要做成模板。
4. 抽屉菜单动画见 Window.Resouces 中的动画代码，展开抽屉菜单动画是 "OpenMenu"，左侧菜单向右、向下移动，右侧展示区域及个人信息概况界面同时也是向右、向下移动；关闭抽屉菜单动画是 "CloseMenu"，动画移动方向与展开时相反（说的是废话），这段动画代码值得好好学习、复用。

文件【MainWindow.xaml.cs】，后台关闭窗体、抽屉菜单按钮切换、窗体移动等事件处理：

private void ButtonClose_Click(object sender, RoutedEventArgs e)
{
    Application.Current.Shutdown();
}

private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
{
    ButtonOpenMenu.Visibility = Visibility.Collapsed;
    ButtonCloseMenu.Visibility = Visibility.Visible;
}

private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
{
    ButtonOpenMenu.Visibility = Visibility.Visible;
    ButtonCloseMenu.Visibility = Visibility.Collapsed;
}

private void MoveWindow_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    DragMove();
}

代码已全部奉上...

3.本文参考

1. 视频一：C# WPF Material Design UI: Animated Menu，配套源码：AnimatedMenu1。
2. C# WPF开源控件库《MaterialDesignInXAML》

4.源码

效果图实现代码在文中已经全部给出，站长方便演示，文中的图片使用的本站外链图片，代码可直接Copy，按解决方案目录组织代码文件即可运行。

演示Demo下载

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

转载请注明本文地址：https://dotnet9.com/7669.html

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

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

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

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

.NET CORE(C#) WPF 值得推荐的动画菜单设计

标签：技术类   present   抽屉菜单   为我   展开   scree   border   height   按钮组   

原文地址：https://www.cnblogs.com/dearroy/p/12742129.html