c# winform 悬浮窗的效果_.NET CORE(C#) WPF 值得推荐的动画菜单设计

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

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

阅读导航

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

1. 本文背景

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

运行起始界面:

0626c0dae0c5d61659d21482ee8fa28e.png

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

b255142b4ce3560d4837aab7a30218ad.gif

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 的微信公众号,本站会及时推送最新技术文章


时间如流水,只能流去不流回!

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值