WPF CommunityToolkit.Mvvm

前言

CommunityToolkit.Mvvm(以下简称Toolkit)是WPF最有名的两个框架,一个是Prism,另一个就是Toolkit。

Prism可以看我的Prism详解

WPF Prims框架详解

Toolkit

Toolkit 官方文档

用 CommunityToolkit.Mvvm 加速 MVVM 开发流程

Nuget安装

在这里插入图片描述

简单使用

Toolkit简单复写了我们常用的两个方法
一个是 SetProperty,一个是RelayCommand

SetProperty,通知更新

 public class MainViewModel:ObservableObject
 {
     private string _title;

     public string Title
     {
         get => _title;
         set => SetProperty(ref _title,value);
     }
 }

RealyCommand

public RelayCommand ButtonClickCommand { get; set; }

public MainViewModel()
{
    ButtonClickCommand = new RelayCommand(() => { Debug.WriteLine("Hello World!"); });

}

MVVM模式的3种command总结[2]–RelayCommand

RealyCommand主要有一个CanExecute属性。通知是否能点击

CanExecute

通知按钮能否点击(我感觉有点鸡肋)

public class MainViewModel:ObservableObject
{
    private string _title = "Hello world!";

    public string Title
    {
        get => _title;
        set => SetProperty(ref _title,value);
    }

    private bool _isEnable = false;

    public bool IsEnable
    {
        get=> _isEnable;
        set
        {
            SetProperty(ref _isEnable,value);
            ButtonClickCommand.NotifyCanExecuteChanged();
        }
    }




    public RelayCommand ButtonClickCommand { get; set; }


    public MainViewModel()
    {
        ButtonClickCommand = new RelayCommand(() => { Title = "Value is changed"; },()=>IsEnable);

    }
}
<Window.DataContext>
    <viewModel:MainViewModel />
</Window.DataContext>
<Grid>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
        <TextBox Text="{Binding Title}" Width="200"/>
        <CheckBox Content="Is Enable" IsChecked="{Binding IsEnable}" />
        <Separator Margin="5"/>
        <Button Command="{Binding ButtonClickCommand}" Content="Click Me"/>
    </StackPanel>
</Grid>

在这里插入图片描述

新功能,代码生成器

Toolkit新增了生成器功能,自动帮我们将代码补全。

ObservableProperty

ObservableProperty
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
生成的Public属性是符合一下特性

  • private
    • name=>Name
    • _name=>Name
    • m_name=>Name

以上三者都会自动对应到public Name

NotifyCanExecuteChangedFor

因为我们之前修改RelayCommand的CanExecute都是通过public 里面的get set去通知的,我们现在可以使用NotifyCanExecuteChangedFor来通知

[NotifyCanExecuteChangedFor(nameof(ButtonClickCommand))]
[ObservableProperty]
private bool _isEnable = false;
//等价于
private bool _isEnable = false;

    public bool IsEnable
    {
        get=> _isEnable;
        set
        {
            SetProperty(ref _isEnable,value);
            ButtonClickCommand.NotifyCanExecuteChanged();
        }
    }

RelayCommand

RelayCommand给一个Void函数,会自动生成一个对应Command 和初始化这个Command

[RelayCommand]
public void ButtonClick()
{

}
//等价于
public RelayCommand ButtonClickCommand { get; set; }


public MainViewModel()
{
    ButtonClickCommand = new RelayCommand(() => { Title = "Value is changed"; }, () => IsEnable);

}

其他功能
//将CanExecute绑定到IsEnable
[RelayCommand(CanExecute =nameof(IsEnable))]
public void ButtonClick()
{

}
///异步函数也可以,CanExecute会在异步函数结束之后变回去
[RelayCommand(CanExecute =nameof(IsEnable))]
public async Task ButtonClickAsync()
{
    await Task.Delay(1000);
    Title = "我被修改了";
}

异步函数演示:注意看按钮颜色
在这里插入图片描述

对应关系

ButtonClickAsync、ButtonClick=>ButtonClickCommand

NotifyPropertyChangedFor

我们希望两个属性是强关联的,比如Title和TestStr是强关联的。

我们希望能通知另一个属性发生了更改,比如Title 通知TestStr更改

 private string testStr = $"Title:{Title}";

但是这么写会报错,只能设置静态方法
在这里插入图片描述
然后我们可以通过NotifyPropertyChangedFor来进行通知

[ObservableProperty]
[NotifyPropertyChangedFor(nameof(TestStr))]
private string _title = "Hello world!";

public string TestStr => $"Title:{Title}";
### 使用 CommunityToolkit.Mvvm 开发 WPF 示例项目 #### 创建新项目 为了创建一个新的 WPF 应用程序并集成 `CommunityToolkit.Mvvm`,首先需要安装 .NET SDK 和 Visual Studio 或其他支持 C# 的 IDE。启动 Visual Studio 后,选择“新建项目”,然后挑选 WPF App (.NET Core) 模板。 #### 安装 NuGet 包 在解决方案资源管理器中右键单击项目的名称,选择“管理 NuGet 包”。搜索 `CommunityToolkit.Mvvm` 并点击安装按钮来添加此库到项目里[^1]。 #### 设置 ViewModel 基类 通常会定义一个继承自 `ObservableObject` 类的基础视图模型基类,在其中实现 INotifyPropertyChanged 接口的功能: ```csharp using CommunityToolkit.Mvvm.ComponentModel; public class BaseViewModel : ObservableObject { } ``` 这使得所有的 ViewModels 都能轻松地通知 UI 关于属性变化的信息[^2]。 #### 实现命令绑定 对于事件处理逻辑,则可以通过 Command 来完成。下面展示了一个简单的例子,展示了如何利用 `ICommand` 接口以及 `RelayCommand<T>` 泛型类来进行操作封装: ```csharp using System.Windows.Input; using CommunityToolkit.Mvvm.Input; public partial class MainViewModel : BaseViewModel { public ICommand IncrementCounterCommand => new RelayCommand(IncrementCounter); private void IncrementCounter() { Counter++; } [ObservableProperty] private int counter = 0; // 自动生成 PropertyChanged 通知 } ``` 上述代码片段中的 `[ObservableProperty]` 属性用于简化属性声明过程,并自动提供必要的更改通知机制[^3]。 #### 绑定数据上下文 最后一步是在 XAML 文件内设置页面的数据源为对应的 ViewModel 对象实例。可以在 MainWindow.xaml 中这样写: ```xml <Window.DataContext> <local:MainViewModel /> </Window.DataContext> <Button Content="Click Me!" Command="{Binding IncrementCounterCommand}" /> <TextBlock Text="{Binding Counter, StringFormat='Count is {0}'}"/> ``` 这段标记语言指定了窗口的内容区域应显示由关联的 ViewModel 提供的数据项;同时还将按钮控件的行为与特定的方法相连接起来,实现了交互效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值