> 技术文档 > WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes


CommunityToolkit.Mvvm与界面库

  • 一、 CommunityToolkit.Mvvm框架
    • 1. 常用的MVVM框架
    • 2. CommunityToolkit.Mvvm概述
    • 3. CommunityToolkit.Mvvm详解
  • 二、 CommunityToolkit.Mvvm源生成器
    • 1. 源生成器概述
    • 2. 示例
  • 三、界面库MaterialDesignThemes
    • 1. 概述
    • 2. 示例

一、 CommunityToolkit.Mvvm框架

1. 常用的MVVM框架

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

2. CommunityToolkit.Mvvm概述

官方文档:https://learn.microsoft.com/zh-cn/dotnet/communitytoolkit/mvvm/
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

3. CommunityToolkit.Mvvm详解

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
以上文中的LoginViewModel为例,将自写的BaseViewModel类改为继承自CommunityToolkit.Mvvm中的ObservableObject
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

将自写的MainWindowViewModel类改为继承自CommunityToolkit.Mvvm中的ObservableObject
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

二、 CommunityToolkit.Mvvm源生成器

1. 源生成器概述

官方文档:https://learn.microsoft.com/zh-cn/dotnet/communitytoolkit/mvvm/generators/overview

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

2. 示例

源生成器不支持 .net framework,本次使用 .net6.0
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
将上文中的View、ViewModel、Model文件夹及其内容分别放到新建立的解决方案中。
重新配置App.xaml和App.xaml.cs

<Application x:Class=\"_077.App\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" xmlns:local=\"clr-namespace:_077\" ShutdownMode =\"OnExplicitShutdown\">   <Application.Resources> </Application.Resources></Application>
public partial class App : Application {//重写方法 protected override void OnStartup(StartupEventArgs e) { base.OnStartup(e); //先弹出登录窗口 Login login = new Login(); bool? ret = login.ShowDialog(); if (ret == true) { //成功登录显示主窗口 MainWindow mainWindow = new MainWindow(); mainWindow.ShowDialog(); //关闭程序 App.Current.Shutdown(); } } }

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

using CommunityToolkit.Mvvm.ComponentModel;using CommunityToolkit.Mvvm.Input;using Model;using System;using System.Collections.Generic;using System.ComponentModel;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Input;namespace ViewModel{ //批注了之后,源生成器 会将 ViewModel 自动实现 INotifyPropertyChanged [ObservableObject] internal partial class LoginViewModel { //构造函数 public LoginViewModel() { } //源生成器自动将首字母大写生成属性 [ObservableProperty] private string name = \"admin\"; //源生成器自动将首字母大写生成属性 [ObservableProperty] private string? pwd = null; //属性对应,界面上报错Label控件  [ObservableProperty] private string error = \"暂无信息\"; //命令属性,对应界面上的登录事件 //源生成器,自动生成Login + Command的类型 [RelayCommand] public void Login (object parameter) { //Execute方法中实现命令处理逻辑 if (string.IsNullOrEmpty(Name) || string.IsNullOrEmpty(Pwd)) { Error = \"用户名密码不能为空!\"; return; } //检查登录信息 User u = dal.FindUserByName(Name); if (u != null && u.Pwd == Pwd) { Window? w = parameter as Window; w.DialogResult = true;//关闭窗口 } else Error = \"用户名密码错误!\"; } //数据访问层 public DAL dal = new DAL(); }}
using CommunityToolkit.Mvvm.ComponentModel;using CommunityToolkit.Mvvm.Input;using Model;using System;using System.Collections.Generic;using System.Collections.ObjectModel;using System.ComponentModel;using System.Linq;using System.Reflection.Metadata;using System.Text;using System.Threading.Tasks;using System.Windows.Input;namespace ViewModel{ //批注了之后,源生成器 会将 ViewModel 自动实现 INotifyPropertyChanged [ObservableObject] internal partial class MainWindowViewModel { //数据访问层 public DAL dal = new DAL(); public MainWindowViewModel() { Books = dal.GetBookList(); } //对应界面上的 ListView显示的数据 //ObservableCollection 可以通知界面更新的 //源生成器自动将首字母大写生成属性 [ObservableProperty] private ObservableCollection<Book> books; //删除命令 ,对应界面的删除按钮的点击操作 //源生成器,会自动生成 (方法名)Del + Command 的命令类型,实现ICommand [RelayCommand] public void Del(object parameter) { Book b = parameter as Book; //删除执行的内容 Books.Remove(b); } }}

三、界面库MaterialDesignThemes

1. 概述

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

官方链接:https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
演示app:https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

2. 示例

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
内容来自链接的演示内容

<Application x:Class=\"Example.App\" xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" xmlns:materialDesign=\"http://materialdesigninxaml.net/winfx/xaml/themes\" StartupUri=\"MainWindow.xaml\"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <materialDesign:BundledTheme BaseTheme=\"Light\" PrimaryColor=\"DeepPurple\" SecondaryColor=\"Lime\" /> <ResourceDictionary Source=\"pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml\" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources></Application>

WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes
演示效果如下:
WPF学习笔记(26)CommunityToolkit.Mvvm与MaterialDesignThemes