首页 > 其他分享 >WPF如何构建MVVM+模块化的桌面应用

WPF如何构建MVVM+模块化的桌面应用

时间:2023-08-15 09:24:45浏览次数:49  
标签:MVVM 模块化 void 视图 Prism WPF public 页面

为何模块化

模块化是一种分治思想,不仅可以分离复杂的业务逻辑,还可以进行不同任务的分工。模块与模块之间相互独立,从而构建一种松耦合的应用程序,便于开发和维护。

开发技术

.Net 6 + WPF + Prism (v8.0.0.1909) + HandyControl (v3.4.0)

知识准备

什么是MVVM

Model-View-ViewModel 是一种软件架构设计,它是一种简化用户界面的事件驱动编程方式。Model:数据模型,用来存储数据。 View:视图界面,用来展示UI界面和响应用户交互。ViewModel:连接View和Model的中间件,起到了桥梁的作用。

什么是Prism

Prism 是一套桌面开发框架,用于在WPF和Xamarin Forms中构建松耦合、可维护、可以测试的XAML应用程序。Prism提供了一组设计模式的实现,这些模式有助于编写结构良好且可维护的XAML应用程序,包括MVVM、依赖注入、命令、事件聚合器等。

什么是HandyControl

HandyControl 是一套WPF控件库,它几乎重写了所有原生样式,同时包含80余款自定义控件。

搭建项目

假设现在有一套叫Lapis的业务系统,包含A和B两块业务。业务A含有<页面1>和<页面2>,业务B含有<页面3>。界面设计如下:

下面我们就按照上述要求,来搭建一套MVVM + 模块化的桌面应用程序。

首先,新建一个名为Lapis.WpfDemo的解决方案,分别创建以下四个不同项目:其中Lapis.Shell是WPF应用程序,其余是WPF类库。如图所示:

Lapis.Share: 是一个共享库,用来定义抽象基类和一些公共方法,供上层调用。它引用了Prism.Wpf、Prism.Core和HandyControl第三方Nuget包。BaseViewModel 是一个视图模型基类,继承自 BindableBase,分别定义了EventAggregator、RegionManager、LoadCommand 属性。代码如下:

 1     /// <summary>
 2     /// 视图模型基类
 3     /// </summary>
 4     public abstract class BaseViewModel : BindableBase
 5     {
 6         private DelegateCommand _loadCommand;
 7         protected IEventAggregator EventAggregator { get; } //事件聚合器
 8         protected IRegionManager RegionManager { get; } // 区域管理器
 9         public DelegateCommand LoadCommand => _loadCommand ??= new(OnLoad); //界面加载命令
10 
11         public BaseViewModel()
12         {
13             RegionManager = ContainerLocator.Current.Resolve<IRegionManager>();
14             EventAggregator = ContainerLocator.Current.Resolve<IEventAggregator>();
15         }
16 
17         /// <summary>
18         /// 界面加载时,由Loaded事件触发
19         /// </summary>
20         protected virtual void onl oad()
21         {
22         }
23 
24         /// <summary>
25         /// 根据区域名称查找视图
26         /// </summary>
27         /// <param name="regionName">区域名称</param>
28         protected TView TryFindView<TView>(string regionName) where TView : class
29         {
30             return RegionManager.Regions[regionName].Views
31                      .Where(v => v.GetType() == typeof(TView))
32                      .FirstOrDefault() as TView;
33         }
34     }
BaseViewModel.cs

Lapis.ModuleA 和 Lapis.ModuleB: 对应前端业务模块A和B,  模块A包含 PageOne 和 PageTwo 两个视图及视图模型,模块B只含 PageThree 一个视图及视图模型。按照Prism框架规定,视图模型最好以 视图名称 + ViewModel 来命名。如图所示:

 其中,ModuleA 和 ModuleB 表示模块类,用于初始化模块和注册类型。ModuleA 代码如下:

 1     [Module(ModuleName = "ModuleA", OnDemand = true)]
 2     public class ModuleA : IModule
 3     {
 4         public void OnInitialized(IContainerProvider containerProvider)
 5         {
 6             var regionManager = containerProvider.Resolve<IRegionManager>();
 7             regionManager.RegisterViewWithRegion(ModuleARegionNames.RegionOne, typeof(PageOne)); // 将页面一注册到区域一
 8             regionManager.RegisterViewWithRegion(ModuleARegionNames.RegionTwo, typeof(PageTwo)); // 将页面二注册到区域二
 9         }
10 
11         public void RegisterTypes(IContainerRegistry containerRegistry)
12         {
13         }
14     }

第7和第8行代码:分别将 PageOne 和 PageTwo 注册到 RegionOne 和 RegionTwo。为了方便,区域名称用字符串常量表示。

Lapis.Shell: 是一个启动模块,负责启动/初始化应用程序(加载模块和资源),它包含App启动类、主窗口、侧边菜单和Tab页内容视图及对应的视图模型等。其中 PageSelectedEvent 是一个页面选中事件,用于 ViewModel 之间传递消息,起到解耦作用。如图所示:

MainWindow 此处作为启动窗口/主窗口。为了让 MainWindow 代码保持简洁,我们只把它当作布局页面来使用。代码片段如下:

 1     <Grid>
 2         <Grid.ColumnDefinitions>
 3             <ColumnDefinition Width="auto" />
 4             <ColumnDefinition />
 5         </Grid.ColumnDefinitions>
 6         <!--  侧边菜单栏内容  -->
 7         <ContentControl Name="sideMenuContentControl" Width="200px" Margin="5" />
 8         <!--  Tab页主内容  -->
 9         <ContentControl Name="tabPagesContentControl" Grid.Column="1" Margin="0,5,5,5" />
10     </Grid>

第7和第9行代码:sideMenuContentControl 和 tabPagesContentControl 是两个内容控件,用来呈现左侧菜单和Tab页面视图。看到这里,大家一定会问:ContentControl 是通过什么来关联视图的?没错,就是上面提到的Region,我们可以在MainWindow.cs中进行区域设置,代码如下:

1     public partial class MainWindow : Window
2     {
3         public MainWindow()
4         {
5             InitializeComponent();
6             RegionManager.SetRegionName(this.sideMenuContentControl, ShellRegionNames.SideMenuContentRegion);
7             RegionManager.SetRegionName(this.tabPagesContentControl, ShellRegionNames.TabPagesContentRegion);
8         }
9     }

然后,同样在 ShellModule 类里对 SideMenuContent 和 TabPagesContent 视图进行区域注册,这样主窗口就能显示左侧菜单和Tab页面了。代码如下:

 1     [Module(ModuleName = "ShellModule", OnDemand = true)]
 2     public class ShellModule : IModule
 3     {
 4         public void OnInitialized(IContainerProvider containerProvider)
 5         {
 6             var regionManager = containerProvider.Resolve<IRegionManager>();
 7             regionManager.RegisterViewWithRegion(ShellRegionNames.SideMenuContentRegion, typeof(SideMenuContent)); // 注册侧边菜单内容视图
 8             regionManager.RegisterViewWithRegion(ShellRegionNames.TabPagesContentRegion, typeof(TabPagesContent)); // 注册Tab页面内容视图
 9         }
10 
11         public void RegisterTypes(IContainerRegistry containerRegistry)
12         {
13         }
14     }
ShellModule.cs

App 是WPF应用启动入口,由于使用了第三方Prism框架和HandyControl控件库,我们需要对 App.xaml 和 App.xaml.cs 两个文件做一些修改。代码如下:

 1 <unity:PrismApplication
 2     x:Class="Lapis.Shell.App"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="clr-namespace:Lapis.Shell"
 6     xmlns:unity="http://prismlibrary.com/">
 7     <Application.Resources>
 8         <ResourceDictionary>
 9             <ResourceDictionary.MergedDictionaries>
10                 <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml" />
11                 <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml" />
12             </ResourceDictionary.MergedDictionaries>
13         </ResourceDictionary>
14     </Application.Resources>
15 </unity:PrismApplication>
App.xaml
 1     public partial class App : PrismApplication
 2     {
 3         protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
 4         {
 5             base.ConfigureModuleCatalog(moduleCatalog);
 6             //
 7             moduleCatalog.AddModule<ShellModule>();      //添加宿主模块
 8             moduleCatalog.AddModule<ModuleA.ModuleA>();  //添加业务模块A
 9             moduleCatalog.AddModule<ModuleB.ModuleB>();  //添加业务模块B
10         }
11 
12         protected override Window CreateShell()
13         {
14             return Container.Resolve<MainWindow>(); //返回主窗体
15         }
16 
17         protected override void RegisterTypes(IContainerRegistry containerRegistry)
18         {
19         }
20     }
App.xaml.cs

接下来,要做的就是左侧菜单和Tab页面之间的交互动作。不同于传统Winform的事件驱动机制,我们使用MVVM模式将视图和UI逻辑分离。因此一般情况下,所有的界面逻辑都应该在 ViewModel 里完成。SideMenuContentViewModel 通过事件聚合器发布页面选中事件,TabPagesContentViewModel 则通过订阅该事件来进行页面切换,代码如下:

 1     /// <summary>
 2     /// 侧边菜单内容视图模型
 3     /// </summary>
 4     public class SideMenuContentViewModel : BaseViewModel
 5     {
 6         private DelegateCommand<string> _menuSelectedCommand;
 7 
 8         private List<PageInfo> _pages = new()
 9         {
10             new PageInfo { Id = "1" ,RegionName = "RegionOne", DisplayName = "子菜单1" },
11             new PageInfo { Id = "2", RegionName = "RegionTwo", DisplayName = "子菜单2" },
12             new PageInfo { Id = "3", RegionName = "RegionThree", DisplayName = "子菜单3" },
13         };
14 
15         public DelegateCommand<string> MenuSelectedCommand => _menuSelectedCommand ??= new DelegateCommand<string>(ExecuteMenuSelectedCommand);
16 
17         private void ExecuteMenuSelectedCommand(string id)
18         {
19             var info = _pages.Find(x => x.Id == id);
20             if (info != null)
21             {
22                 EventAggregator.GetEvent<PageSelectedEvent>().Publish(info);
23             }
24         }
25     }
SideMenuContentViewModel.cs
 1     /// <summary>
 2     /// Tab页面内容视图模型
 3     /// </summary>
 4     public class TabPagesContentViewModel : BaseViewModel
 5     {
 6         private TabControl _tabControl;
 7 
 8         protected override void onl oad()
 9         {
10             _tabControl = TryFindView<TabPagesContent>(ShellRegionNames.TabPagesContentRegion)?.FindName("tabControl") as TabControl;
11 
12             EventAggregator.GetEvent<PageSelectedEvent>().Subscribe(OnPageSelected);
13         }
14 
15         /// <summary>
16         /// 页面选中事件处理
17         /// </summary>
18         /// <param name="page"></param>
19         private void OnPageSelected(PageInfo page)
20         {
21             try
22             {
23                 var existItem = FindItem(_tabControl, page.RegionName);
24                 if (existItem != null)
25                 {
26                     existItem.IsSelected = true;
27                 }
28                 else
29                 {
30                     // 创建页面区域控件
31                     var pageContentControl = new ContentControl();
32                     pageContentControl.SetRegionName(page.RegionName);
33 
34                     var item = new TabItem
35                     {
36                         Name = page.RegionName,     // 区域名称,如:RegionOne、RegionTwo
37                         Header = page.DisplayName,  // 页面名称
38                         IsSelected = true,
39                         Content = pageContentControl
40                     };
41 
42                     _tabControl.Items.Add(item);
43                 }
44             }
45             catch { }
46         }
47 
48         private TabItem FindItem(TabControl tc, string name)
49         {
50             foreach (TabItem item in tc.Items)
51             {
52                 if (item.Name == name)
53                 {
54                     return item;
55                 }
56             }
57             return null;
58         }
59     }
TabPagesContentViewModel.cs

整个UI交互过程,如图所示:

至此,整个桌面前端应用就基本完成了。界面如图所示:

参考资料

欢迎使用HandyControl | HandyOrg

Introduction to Prism | Prism (prismlibrary.com)

.NET Core 3 WPF MVVM框架 Prism系列文章索引 - RyzenAdorer - 博客园 (cnblogs.com)

标签:MVVM,模块化,void,视图,Prism,WPF,public,页面
From: https://www.cnblogs.com/fengjq/p/17630386.html

相关文章

  • 【愚公系列】2023年08月 WPF控件专题 XAML介绍
    (文章目录)<hrstyle="border:solid;width:100px;height:1px;"color=#000000size=1">前言WPF(WindowsPresentationFoundation)是微软推出的一种基于.net框架的图形用户界面技术,它使用XAML(eXtensibleApplicationMarkupLanguage)作为UI的描述语言。XAML是一种基于XML的标记......
  • WPF 由TreeView想到的 DataTemplate,HierarchicalDataTemplate
    DataTemplate简而言之,解决的就是后台代码中的类以怎么样的形式展现在xaml前台代码中的问题。所以DataTemplate一般都要指定DataType,一般放在resource中,而HierarchicalDataTemplate是一种特殊的DataTemplate,它指定一个ItemsSource,当自身属性是列表时,有次序的在前台展示下去。以......
  • WPF 入门笔记 - 07 - MVVM示例
    滴咚,大家好久不见......
  • 用Wpf做一个Block编程画板(仿scratch)
    前言,当时想写这个东西(AIStudio.Wpf.Block)主要是陪我儿子学scratch,觉得这种编程语言挺有意思,但是没有想到自己写一个是如此的复杂,感觉给自己挖坑了,后续的工程也非常巨大,先发出一部分来看看,上几个动图。1.helloworld2.加法3.画线本次更新先发布这些内容,后续进展,敬请期待。......
  • WPF自定义控件实战:自制上传文件显示进度按钮
    自定义控件在WPF开发中是很常见的,有时候某些控件需要契合业务或者美化统一样式,这时候就需要对控件做出一些改造。 目录按钮设置圆角按钮上传文件相关定义测试代码 话不多说直接看效果默认效果:上传效果:按钮设置圆角因为按钮本身没有CornerRadius属性,所......
  • WPF 禁止输入法 IME
    WPF禁止输入法IME InputMethod.IsInputMethodEnabledhttps://learn.microsoft.com/zh-cn/dotnet/api/system.windows.uielement.isinputmethodenabled?view=netframework-4.8.1针对Listbox,如果也要禁止IME,需要禁止ListboxItem的IsInputMethodEnabled<StyleTarge......
  • C# WPF 将第三方DLL嵌入 exe
    没成功,只是做个记录,后面再研究希望将第三方的HandyControl.dll嵌入到exe中,这样不用发多个文件给别人将第三方DLL。加载到解决方案中添加引用将“属性页”中的“复制本地”项改为“False”右键点击最开始复制到项目目录中的dll文件,点击“属性”。将“属性”页中的“复制到输出......
  • 你们眼睛干涩,胀痛吗?C# WPF 久坐提醒桌面小程序 - 内附 眼肌运动、远视力表高清图
    目录说明设置提醒时间,及休息时间久坐提醒倒计时休息提醒倒计时休息到计时代码说明主窗体设置工作到计时休息倒计时源码高清图久坐提醒桌面小程序:干这行职业病比较多,之前用爱丽(即:玻璃酸钠滴眼液),用的时候挺舒服,缓解吧,不过治标不治本。注意休息,加强锻炼非常有必要,每工作1小时,休息10分......
  • 你们眼睛干涩,胀痛吗?C# WPF 久坐提醒桌面小程序 - 内附 眼肌运动、远视力表高清图
    目录说明设置提醒时间,及休息时间久坐提醒倒计时休息提醒倒计时休息到计时代码说明主窗体设置工作到计时休息倒计时源码高清图久坐提醒桌面小程序:干这行职业病比较多,之前用爱丽(即:玻璃酸钠滴眼液),用的时候挺舒服,缓解吧,不过治标不治本。注意休息,加强锻炼非常有必要,每工作1小时,休息10分......
  • 使用WPF构建响应式桌面应用程序
    当构建响应式桌面应用程序时,WPF(WindowsPresentationFoundation)是一个强大的工具,它允许你创建现代、交互式和具有吸引力的用户界面。在本博客中,我们将探讨如何使用WPF构建响应式桌面应用程序,并提供一些示例代码来帮助你入门。什么是WPF?WPF是一种用于创建Windows桌面应用程序的技术......