Community Mvvm Toolkit常用组件的基本使用（第一版）

一、组件

ObservableObject

ObservableObject实现了INotifyPropertyChanged和INotifyPropertyChanging,并触发PropertyChanged和PropertyChanging事件

public class User : ObservableObject
{
    private string name;

    public string Name
    {
        get => name;
        set => SetProperty(ref name, value);
    }
}

在这段示例代码中，如果 name 和 value 的值不同，首先触发 PropertyChanging 事件，然后触发 PropertyChanged。

RelayCommand

RelayCommand 和 RelayCommand<T> 实现了 ICommand 接口，INotifyPropertyChanged 和 ICommand 是 MVVM 模式的基础。下面的代码使用 ObservableObject 和 RelayCommand 展示一个基本的 ViewModel：

public class MyViewModel : ObservableObject
{
    public MyViewModel()
    {
        IncrementCounterCommand = new RelayCommand(IncrementCounter);
    }

    private int counter;

    public int Counter
    {
        get => counter;
        private set => SetProperty(ref counter, value);
    }

    public ICommand IncrementCounterCommand { get; }

    private void IncrementCounter() => Counter++;
}

<Page
    x:Class="MyApp.Views.MyPage"
    xmlns:viewModels="using:MyApp.ViewModels">
    <Page.DataContext>
        <viewModels:MyViewModel x:Name="ViewModel"/>
    </Page.DataContext>

    <StackPanel Spacing="8">
        <TextBlock Text="{x:Bind ViewModel.Counter, Mode=OneWay}"/>
        <Button
            Content="Click me!"
            Command="{x:Bind ViewModel.IncrementCounterCommand}"/>
    </StackPanel>
</Page>

在这段示例里 IncrementCounterCommand 包装了 IncrementCounter 函数提供给 Button 绑定。IncrementCounter 函数更改 Counter 的值并通过 PropertyChanged 事件通知绑定的 TextBlock。

AsyncRelayCommand

AsyncRelayCommand 和 AsyncRelayCommand<T> 也实现了 ICommand，不过它们支持异步操作，提供的 ExecutionTask 和 IsRunning 两个属性对监视任务运行状态十分有用。

 

直接在Task中处理结果

界面布局：

2  <Label Content="{Binding GetTextCommand.ExecutionTask.Status}" HorizontalAlignment="Left"></Label>
3  <Label HorizontalAlignment="Left" Content="{Binding TextResult}"/>
4  <Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="88" Content="开始任务" Command="{Binding GetTextCommand}"></Button>

ViewModel：

AsyncRelayCommand的构造函数需要传入一个返回Task类型的函数或委托。我这里定义了一个GetText函数，在函数里模拟等待了5秒（正常使用时，这个等待可以是任意一个耗时操作。）

public class AsyncRelayCommandPageViewModel : ObservableObject
    {
        private string textResult;
        public string TextResult { get => textResult; set => SetProperty(ref textResult, value); }

        public IAsyncRelayCommand GetTextCommand { get; set; }


        public AsyncRelayCommandPageViewModel()
        {
            GetTextCommand = new AsyncRelayCommand(GetText);
        }

        public async Task GetText()
        {
            await Task.Delay(3000); //模拟耗时操作
            TextResult =  "Hello world!";
        }
    }

直接绑定到AsyncRelayCommand的ExecutionTask,然后用一个Converter来转换值

界面布局：

1  <Label Content="{Binding GetTextCommand2.ExecutionTask.Status}" HorizontalAlignment="Left"></Label>
2  <Label HorizontalAlignment="Left" Content="{Binding GetTextCommand2.ExecutionTask,Converter={StaticResource TaskResultConverter}}"/>
3  <Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="88" Content="开始任务" Command="{Binding GetTextCommand2}"></Button>

ViewModel：

通过ExecutionTask属性，可以获取到GetTextCommand2最后执行的Task。

然后再通过一个CommunityToolkit.Common包中的Task.GetResultOrDefault()扩展函数，可以获取ExecutionTask的任务返回结果。

public class AsyncRelayCommandPageViewModel : ObservableObject
    {
        public IAsyncRelayCommand GetTextCommand2 { get; set; }


        public AsyncRelayCommandPageViewModel()
        {

            GetTextCommand2 = new AsyncRelayCommand(GetText2);

        }


        public async Task<string> GetText2()
        {
            await Task.Delay(3000); //模拟耗时操作
            return "Hello world!";
        }
}

Converter：

using CommunityToolkit.Common;
using System;
using System.Globalization;
using System.Threading.Tasks;
using System.Windows.Data;

namespace CommunityToolkit.Mvvm.WpfDemo.Converters
{
    public class TaskResultConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is Task task)
            {
                return task.GetResultOrDefault();
            }

            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}