博客
关于我
.NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)
阅读量:392 次
发布时间:2019-03-05

本文共 4807 字,大约阅读时间需要 16 分钟。

微信公众号:,网站:,问题或建议:,

如果对您有所帮助:。

.NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)

快到2020年了,祝大家新年快乐,今年2019最后一更,谢谢大家支持!

阅读导航

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

1. 本文背景

一个系统主界面,放上一个菜单,点击菜单在客户区切换不同的展示界面,这是很常规的设计,见下面展示效果图:

左侧一个菜单,点击菜单,右侧切换界面,界面切换动画使用MD控件的组件实现(自己使用动画也能实现)。

2. 代码实现

使用 .NET CORE 3.1 创建名为 “MenuChange” 的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. "GridPrincipal" 作为客户区子模块界面容器,展示新界面时,先移除旧用户控件,再添加新用户控件(站长以前使用时,是遍历容器中所有用户界面,对非选择用户控件作隐藏操作,然后添加新用户控件或者对已存在的被选择用户控件作显示操作)。
  2. 左侧菜单项使用 "ListView" 进行布局,实际开发需要运用模板,使用MVVM做成动态菜单,方便扩展。
  3. 右侧切换的子模块界面应该使用Prism或者其他框架(自已实现的模块dll)实现的子界面,方便动态扩展(需要和左侧菜单项进行关联)。

文件【MainWindow.xaml.cs】,后台关闭窗体、菜单点击切换子模块界面、窗体移动等事件处理:

using System.Windows;using System.Windows.Controls;using System.Windows.Input;namespace MenuChange{    ///     /// Interaction logic for MainWindow.xaml    ///     public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();        }        private void ButtonFechar_Click(object sender, RoutedEventArgs e)        {            Application.Current.Shutdown();        }        private void Grid_MouseDown(object sender, MouseButtonEventArgs e)        {            DragMove();        }        private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)        {            int index = ListViewMenu.SelectedIndex;            MoveCursorMenu(index);            switch (index)            {                case 0:                    GridPrincipal.Children.Clear();                    GridPrincipal.Children.Add(new UserControlMain());                    break;                case 1:                    GridPrincipal.Children.Clear();                    GridPrincipal.Children.Add(new UserControlWPF());                    break;                case 2:                    GridPrincipal.Children.Clear();                    GridPrincipal.Children.Add(new UserControlWinform());                    break;                case 3:                    GridPrincipal.Children.Clear();                    GridPrincipal.Children.Add(new UserControlASPNETCORE());                    break;                case 4:                    GridPrincipal.Children.Clear();                    GridPrincipal.Children.Add(new UserControlXamarinForms());                    break;                case 5:                    GridPrincipal.Children.Clear();                    GridPrincipal.Children.Add(new UserControlCPP());                    break;                default:                    break;            }        }        private void MoveCursorMenu(int index)        {            TrainsitionigContentSlide.OnApplyTemplate();            GridCursor.Margin = new Thickness(0, (100 + (60 * index)), 0, 0);        }    }}

方便演示,点击菜单,切换子用户控件时时写死的,见上面的说明,左侧菜单及右侧切换的子用户控件需要进行关联配置,方便扩展,建议使用Prism的模块化开发。

2.3 演示主模块

文件【UserControlMain.xaml】,只展示其中一个子模块用户控件吧,其他类似,文末有源码、可运行Demo供下载参考。

注意: 需要使用MD控件的 TransitioningContent 组件将用户控件可视区域包裹起来,用于使用MD的移动切换动画,其中 OpeningEffect 见名思意,即是展示此用户控件时,动画如何播放,见下面代码,SlideInFromLeft 是指示展示时由左向右缓动,相反 SlideInFromRight即是由右向左缓动,其他属性可查阅MD官网或者Demo研究。

已奉上关键代码,全部代码文末有下载链接...

3.本文参考

  1. 视频一:,配套源码:。

4.源码

站长方便演示,文中的图片使用的本站外链图片:


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

转载请注明本文地址:
欢迎扫描下方二维码关注 Dotnet9 的微信公众号,本站会及时推送最新技术文章


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

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

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

你可能感兴趣的文章
上周热点回顾(11.4-11.10)
查看>>
[网站公告]11月26日00:00-04:00阿里云RDS升级
查看>>
[网站公告]又拍云API故障造成图片无法上传(已恢复)
查看>>
上周热点回顾(12.16-12.22)
查看>>
云计算之路-阿里云上:对“黑色30秒”问题的猜想
查看>>
云计算之路-阿里云上:“黑色30秒”走了,“黑色1秒”来了,真相也许大白了
查看>>
云计算之路-阿里云上:奇怪的CPU 100%问题
查看>>
云计算之路-阿里云上:2014年6月12日12点IIS请求到达量突降
查看>>
上周热点回顾(6.9-6.15)
查看>>
上周热点回顾(6.16-6.22)
查看>>
上周热点回顾(6.23-6.29)
查看>>
上周热点回顾(10.20-10.26)
查看>>
上周热点回顾(2.16-2.22)
查看>>
上周热点回顾(3.2-3.8)
查看>>
.NET跨平台之旅:借助ASP.NET 5 Beta5的新特性显示CLR与操作系统信息
查看>>
上周热点回顾(7.27-8.2)
查看>>
上周热点回顾(9.28-10.4)
查看>>
上周热点回顾(3.28-4.3)
查看>>
上周热点回顾(5.2-5.8)
查看>>
上周热点回顾(5.9-5.15)
查看>>