SetProperty, RelayCommand , AsyncRelayCommand,CommunityToolkit.Mvvm
CommunityToolkit.Mvvm
是一个用于简化创建Model-View-ViewModel (MVVM) 应用程序的库,特别是在使用 .NET 开发时。
它提供了诸如 ObservableObject
, RelayCommand
, 和 AsyncRelayCommand
等基础组件来帮助开发者快速实现 MVVM 模式。
下面是基于提供的代码示例对 CommunityToolkit.Mvvm
依赖包的用法分析:
SetProperty
在你的项目中,MainViewModel
继承自 ObservableObject
,这是 CommunityToolkit.Mvvm
提供的一个基类,用来实现 INotifyPropertyChanged 接口。这使得 ViewModel 中的属性可以在值改变时通知视图(View)进行更新。
public partial class MainViewModel : ObservableObject { private string _name = string.Empty; public string Name { get => _name; set => SetProperty(ref _name, value); } }
这里使用了 SetProperty()
方法来自动处理属性更改的通知逻辑。
RelayCommand 和 AsyncRelayCommand
为了处理用户交互或触发某些操作,你通常需要定义命令。CommunityToolkit.Mvvm
提供了 RelayCommand
和 AsyncRelayCommand
来简化这个过程。
- RelayCommand: 用于同步命令执行。
public IRelayCommand SayNameCommand { get; } public MainViewModel() { SayNameCommand = new RelayCommand(OnSayHelloCommand); } private void OnSayHelloCommand() { Name = "Hello, World!"; }
- AsyncRelayCommand: 用于异步命令执行,比如需要等待网络请求或其他耗时操作完成的情况。
public IAsyncRelayCommand ChangeSexCommand { get; } public MainViewModel() { ChangeSexCommand = new AsyncRelayCommand(OnChangeSexCommand, () => Age >= 18); } private async Task OnChangeSexCommand() { await Task.Delay(3000); Sex = "F"; }
数据绑定
在 XAML 文件 (MainView.xaml
) 中,通过设置控件的 DataContext
属性为 MainViewModel
的实例,实现了数据绑定。这样就可以将 UI 控件与 ViewModel 中的属性和命令连接起来。
<Window.DataContext> <local:MainViewModel x:Name="MainViewModel" /> </Window.DataContext>
代码
MainViewModel.cs
using System.Threading.Tasks; using CommunityToolkit.Mvvm.ComponentModel; using CommunityToolkit.Mvvm.Input; namespace DemoMVVM.ViewModels; public partial class MainViewModel : ObservableObject { /// <summary> /// 1. SetProperty() /// </summary> private string _name = string.Empty; public string Name { get => _name; set => SetProperty(ref _name, value); } public IRelayCommand SayNameCommand { get; } /// <summary> /// 2. OnPropertyChanged() /// </summary> private uint _age; public uint Age { get { return _age; } set { if (SetProperty(ref _age, value)) { ChangeSexCommand.NotifyCanExecuteChanged(); } } } public IRelayCommand IncreaseAgeCommand { get; } public IRelayCommand DecreaseAgeCommand { get; } private string _sex = "M"; public string Sex { get => _sex; set => SetProperty(ref _sex, value); } /// <summary> /// 3.Async Relay Command /// </summary> public IAsyncRelayCommand ChangeSexCommand { get; } public MainViewModel() { SayNameCommand = new RelayCommand(OnSayHelloCommand); IncreaseAgeCommand = new RelayCommand(() => Age++); DecreaseAgeCommand = new RelayCommand(() => Age--); ChangeSexCommand = new AsyncRelayCommand(OnChangeSexCommand, () => Age >= 18); } private void OnSayHelloCommand() { Name = "Hello, World!"; } private async Task OnChangeSexCommand() { await Task.Delay(3000); Sex = "F"; } }
MainView.xaml
<Window x:Class="DemoMVVM.Views.MainView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="MainView" Width="800" Height="450" WindowStartupLocation="CenterScreen" xmlns:local="clr-namespace:DemoMVVM.ViewModels" mc:Ignorable="d"> <Window.DataContext> <local:MainViewModel x:Name="MainViewModel" /> </Window.DataContext> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="4*"/> <ColumnDefinition Width="6*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="3*"/> </Grid.RowDefinitions> <Border Background="WhiteSmoke"/> <Border Grid.Column ="1" Background="WhiteSmoke"/> <Border Grid.Row="1" Grid.ColumnSpan="2" Background="WhiteSmoke"/> <StackPanel Grid.Column="0" Margin="20" VerticalAlignment="Center"> <!-- 新增:用于选择性别的RadioButton组 --> <TextBlock Text="请选择炉号:" /> <RadioButton GroupName="GenderGroup" Content="OVEN-A" IsChecked="{Binding IsMale, Mode=TwoWay}" Width="100" /> <RadioButton GroupName="GenderGroup" Content="OVEN-B" IsChecked="{Binding IsFemale, Mode=TwoWay}" Width="100" /> <Button Content="Set Chamber" Width="100"></Button> </StackPanel> <StackPanel Grid.Column="1" Margin="40,0,0,0" VerticalAlignment="Center"> <StackPanel Orientation="Horizontal"> <Label Content="OpId" Width="50" ></Label> <TextBox Foreground="White" FontSize="25" Width="200" /> </StackPanel> <StackPanel Orientation="Horizontal"> <Label Content="Lot" Width="50" ></Label> <TextBox Foreground="White" FontSize="25" Width="200" /> </StackPanel> </StackPanel> <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock FontSize="25" Text="High: 66°" Margin="0,0,20,0"/> <TextBlock FontSize="25" Text="Low: 43°" Margin="0,0,20,0"/> <TextBlock FontSize="25" Text="Feels like: 63°"/> </StackPanel> </Grid> </Window>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2023-02-18 fastapi_sqlalchemy_mysql_rbac_jwt_gooddemo
2023-02-18 opencv_人脸检测_学习笔记_读取图片_灰度转换_修改尺寸_绘制矩形_视频检测_训练数据