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

笔尘珠

为何模块化

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

.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含有和，业务B含有。界面设计如下：

下面我们就按照上述要求，来搭建一套MVVM + 模块化的桌面应用程序。
首先，新建一个名为Lapis.WpfDemo的解决方案，分别创建以下四个不同项目：其中Lapis.Shell是WPF应用程序，其余是WPF类库。如图所示：

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

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

复制代码

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

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

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

复制代码

第7和第8行代码：分别将 PageOne 和 PageTwo 注册到 RegionOne 和 RegionTwo。为了方便，区域名称用字符串常量表示。
Lapis.Shell: 是一个启动模块，负责启动/初始化应用程序(加载模块和资源)，它包含App启动类、主窗口、侧边菜单和Tab页内容视图及对应的视图模型等。其中 PageSelectedEvent 是一个页面选中事件，用于 ViewModel 之间传递消息，起到解耦作用。如图所示：

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

1. 1     <Grid>
2. 2         <Grid.ColumnDefinitions>
3. 3             <ColumnDefinition Width="auto" />
4. 4             <ColumnDefinition />
5. 5         </Grid.ColumnDefinitions>
6. 6         
7. 7         <ContentControl Name="sideMenuContentControl" Width="200px" Margin="5" />
8. 8         
9. 9         <ContentControl Name="tabPagesContentControl" Grid.Column="1" Margin="0,5,5,5" />
10. 10     </Grid>

复制代码

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

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

复制代码

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

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

复制代码

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

1. 1 <unity:PrismApplication
2. 2     x:Class="Lapis.Shell.App"
3. 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4. 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5. 5     xmlns:local="clr-namespace:Lapis.Shell"
6. 6     xmlns:unity="http://prismlibrary.com/">
7. 7     <Application.Resources>
8. 8         <ResourceDictionary>
9. 9             <ResourceDictionary.MergedDictionaries>
10. 10                 <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml" />
11. 11                 <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml" />
12. 12             </ResourceDictionary.MergedDictionaries>
13. 13         </ResourceDictionary>
14. 14     </Application.Resources>
15. 15 </unity:PrismApplication>

复制代码

App.xaml

1. 1     public partial class App : PrismApplication
2. 2     {
3. 3         protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
4. 4         {
5. 5             base.ConfigureModuleCatalog(moduleCatalog);
6. 6             //
7. 7             moduleCatalog.AddModule<ShellModule>();      //添加宿主模块
8. 8             moduleCatalog.AddModule<ModuleA.ModuleA>();  //添加业务模块A
9. 9             moduleCatalog.AddModule<ModuleB.ModuleB>();  //添加业务模块B
10. 10         }
11. 11
12. 12         protected override Window CreateShell()
13. 13         {
14. 14             return Container.Resolve<MainWindow>(); //返回主窗体
15. 15         }
16. 16
17. 17         protected override void RegisterTypes(IContainerRegistry containerRegistry)
18. 18         {
19. 19         }
20. 20     }

复制代码

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

1. 1     /// <summary>
2. 2     /// 侧边菜单内容视图模型
3. 3     /// </summary>
4. 4     public class SideMenuContentViewModel : BaseViewModel
5. 5     {
6. 6         private DelegateCommand<string> _menuSelectedCommand;
7. 7
8. 8         private List<PageInfo> _pages = new()
9. 9         {
10. 10             new PageInfo { Id = "1" ,RegionName = "RegionOne", DisplayName = "子菜单1" },
11. 11             new PageInfo { Id = "2", RegionName = "RegionTwo", DisplayName = "子菜单2" },
12. 12             new PageInfo { Id = "3", RegionName = "RegionThree", DisplayName = "子菜单3" },
13. 13         };
14. 14
15. 15         public DelegateCommand<string> MenuSelectedCommand => _menuSelectedCommand ??= new DelegateCommand<string>(ExecuteMenuSelectedCommand);
16. 16
17. 17         private void ExecuteMenuSelectedCommand(string id)
18. 18         {
19. 19             var info = _pages.Find(x => x.Id == id);
20. 20             if (info != null)
21. 21             {
22. 22                 EventAggregator.GetEvent<PageSelectedEvent>().Publish(info);
23. 23             }
24. 24         }
25. 25     }

复制代码

SideMenuContentViewModel.cs

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

复制代码

TabPagesContentViewModel.cs整个UI交互过程，如图所示：
 

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

参考资料

欢迎使用HandyControl | HandyOrg
Introduction to Prism | Prism (prismlibrary.com)
.NET Core 3 WPF MVVM框架 Prism系列文章索引 - RyzenAdorer - 博客园 (cnblogs.com)
    出处：https://www.cnblogs.com/fengjq/p/17630386.html    如果此文对你有帮助的话，请点一下右下角的【推荐】，欢迎评论区留言。本文已同步至作者微信公众号：玩转DotNet，感谢扫码关注！
来源:https://www.cnblogs.com/fengjq/archive/2023/08/15/17630386.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！