MAUI新生2.3-数据绑定和MVVM：MVVM开发模式

//MainPageViewModel类实现了INotifyPropertyChanged接口
public class MainPageViewModel : INotifyPropertyChanged
{
    //PropertyChanged事件，是View层和ViewModel层链接的桥梁
    //View层通过Binding机制，将更改属性的方法委托给PropertyChanged事件，当触发PropertyChanged事件时，执行View层的这个方法
    //OnPropertyChanged方法，将触发PropertyChanged事件，并传入属性名和属性值等参数。这个方法，在属性的Set函数中调用。
    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] string name = "") => 
                              PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

    //创建Result属性，并在属性的Set函数中，执行OnPropertyChanged方法，从而触发PropertyChanged事件
    private string _result = "HiWorld!";
    public string Result
    {
        get => _result;
        set
        {
            if (_result != value)
            {
                _result = value;
                //属性值发生变化时，执行OnPropertyChanged方法
                //如果不传参，则传入本属性。可以通过OnPropertyChanged("属性名")方式，传入指定属性
                OnPropertyChanged(); 
            }
        }
    }

    //创建ClickMeCommand命令
    //命令本质上是ICommand类型的属性，需要在构造函数中初始化，并定义触发命令时的回调函数
    public ICommand ClickMeCommand { get; private set; }
    public MainPageViewModel()
    {
        ClickMeCommand = new Command(() =>
        {
            this.Result = "你好世界！";
        });
    }
}

<ContentPage
    x:Class="MauiApp8.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:vm="clr-namespace:MauiApp8.ViewModels">

    <ContentPage.BindingContext>
        <vm:MainPageViewModel />
    </ContentPage.BindingContext>

    <StackLayout Padding="30">
        <!--绑定ViewModel对象的Result属性-->
        <Label Text="{Binding Result}"/>
        <!--绑定ViewModel对象的ClickMeCommand命令。如果命令要传入参数，可以设置【CommanParameter=""】属性-->
        <Button Text="点击修改为中文" Command="{Binding ClickMeCommand}"/>
    </StackLayout>

</ContentPage>

//ObservableObject实现了INotifyPropertyChanged和INotifyPropertyChanging接口，并提供SetProperty、RelayCommand等成员
public class MainPageViewModel : ObservableObject
{
    //定义一个无参构造函数，方便创建对象时调用，因为下例中使用了有参构造函数
    public MainPageViewModel() { } 


    //①简单类型属性和命令。注：RelayCommand的异步为AsyncRelayCommand===============================================
    private string result = "HiWorld!";
    public string Result
    {
        get => result;
        //SetProperty方法，比较旧值和新值是否相等，如果不相等，则将新值value赋值给_result，并触发属性更改事件
        set => SetProperty(ref result, value);
    }

    private RelayCommand clickMeCommand;
    public RelayCommand ClickMeCommand =>
        clickMeCommand ??= new RelayCommand(() => Result = "你好世界！");//如果_clickMeCommand不为空，则赋值回调函数



    //②集合类型属性和命令(带参数)=================================================================================
    //注，①集合List无事件通知机制，不能用于绑定属性；②RelayCommand<T>的异步为AsyncRelayCommand<T>
    private ObservableCollection<string> names = new ObservableCollection<string> { "zs","ls","ww"};
    public ObservableCollection<string> Names
    {
        get => names;
        set => SetProperty(ref names, value);
    }

    private RelayCommand<string> addNameCommand;
    public RelayCommand<string> AddNameCommand => addNameCommand ??= new RelayCommand<string>(AddName);
    private void AddName(string name)
    {
        Names.Add(name);
    }



    //③复杂类型的某个属性，较少使用=================================================================================
    //可以实现复杂类型某个属性更改通知，较少使用
    //如果是定义User属性，则整个对象替换时，才会有属性更改通知，也就是引用类型是浅绑定，类似于Vue2的引用类型data
    private readonly User user;
    public MainPageViewModel(User user) => this.user = user;
    public string Name
    {
        get => user.Name;
        //SetProperty重载方法，user.Name-旧值，value-新值，user-复杂类型。判断user.Name和新值value是否相等，如果不想等，则将新值赋值给u.Name，并触发属性更改事件
        set => SetProperty(user.Name, value, user, (user, value) => user.Name = value);
    }



    //④Task类型属性，较少使用=====================================================================================
    //主要用于加载任务的提示，如任务完成，通知UI更新，还没使用过。
    private TaskNotifier<int> requestTask;
    public Task<int> RequestTask
    {
        get => requestTask;
        set => SetPropertyAndNotifyOnCompletion(ref requestTask, value);
    }
    public void RequestValue() 
    { 
        RequestTask = WebService.LoadMyValueAsync(); 
    }
}

public partial class MainPageViewModel : ObservableObject
{
    //定义可观察属性================================================================================================
    [ObservableProperty] //标注为可观察属性
    [NotifyPropertyChangedFor(nameof(FullName))] //当FirstName属性发生变化时，通知FullName响应
    private string firstName; //定义属性的back字段即可

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(FullName))]
    private string lastName;

    //因FirstName和LastName是可观察属性，FullName也具有可观察特性。类似Vue的计算属性-computed
    public string FullName => $"{FirstName}{LastName}";



    //可以监听属性变化。类似于Vue中的Watch============================================================================
    [ObservableProperty]
    private int result;
    //两个监听方法的定义规则：
    //①两个方法可以同时存在，也可以任一个，或者都不定义
    //②按约定命名为“On+属性名+Changing”和“On+属性名+Changed”
    //③不能使用访问修饰符，如private等，必须使用partial修饰符
    //④方法参数为新值
    partial void OnResultChanging(int value)
    {
        Console.WriteLine($"Result将改变为{value}");
    }
    partial void OnResultChanged(int value)
    {
        Console.WriteLine($"Result已改变为{value}");
    }



    //定义命令=======================================================================================================
    //按约定自动生成名称为ChangeNameCommand的命令
    //如果ChangeName不带参，生成的命令属性为RelayCommand；如果带参，则为RelayCommand<T>。仅支持一个参数，不限制类型
    //如果ChangeName为异步方法，则生成的命令属性也是异步的，AsyncRelayCommand、AsyncRelayCommand<T>
    [RelayCommand]
    private void ChangeName(FullName fullName) 
    {
        if (fullName != null)
        {
            FirstName = fullName.FirstName;
            LastName= fullName.LastName;
        }
    }

    

    //控制命令是否可以执行。CanExcute的值为CanCallUser方法的返回值====================================================
    [RelayCommand(CanExecute = nameof(CanCallUser))]
    private async void CallUser(User? user)
    {
        await Application.Current.MainPage.DisplayAlert("title",$"Hi,{user.Name}","cancel");
    }
    //CanCallUser方法可以传入RelayCommand<T>命令的T参数
    private bool CanCallUser(User? user) 
    {
        return user is not null; //UI层将CommandParameter绑定为User对象，可使用资源字典
    }
    //属性可以触发命令的CanExcute的执行，实现在运行时，控制命令是否可以执行
    [ObservableProperty]
    [NotifyCanExecuteChangedFor(nameof(CallUserCommand))]
    private User? selectedUser; //UI层将CommandParameter绑定为SelectedUser属性



    //命令特性的另外两个参数，应用于异步命令，很少用，知道一下=======================================================   
    //①控制异步的执行
    [RelayCommand(IncludeCancelCommand = true)]
    private async Task DoWorkAsync(CancellationToken token) { }

    //控制异常的处理方式，默认值为false，如有异常，将导致应用崩溃。为true时，不会导致应用崩溃
    [RelayCommand(FlowExceptionsToTaskScheduler = true)]
    private async Task GreetUserAsync(CancellationToken token){}
}

[ObservableObject]
public partial class MainPageViewModel
{
}
//除了ObservableObject特殊之外，还提供了[INotifyPropertyChanged]、[ObservableRecipient]特性
//三者关系：ObservableObject实现了INotifyPropertyChanged，ObservableRecipient派生自ObservableObject

<ContentPage
    ......
    xmlns:vm="clr-namespace:MauiApp8.ViewModels">

    <ContentPage.BindingContext>
        <vm:MainPageViewModel />
    </ContentPage.BindingContext>

    <!--子元素继承ContentPage的BindingContext-->
    <StackLayout Padding="30">
        <Entry Text="{Binding FirstName}" /> 
        <Entry Text="{Binding LastName}" />
        <Label Text="{Binding FullName}" />
    </StackLayout>

</ContentPage>

//第一步：在MauiProgram.cs中，注册MainPageViewModel服务
//本质就是应用启动时，由框架帮我们创建MainPageViewModel对象
builder.Services.AddSingleton<MainPageViewModel>();

//第二步：在MainPage.xaml.cs后台代码中，注入服务，设置BindingContext
public partial class MainPage : ContentPage
{
    public MainPage(MainPageViewModel viewModel)
    {
        InitializeComponent();
        this.BindingContext = viewModel;
    }
}

public class ServiceLocator
{
    //服务定位器字段，使用这个字段来获取服务
    private IServiceProvider serviceProvider;
    //******以下定义属性，通过serviceProvider返回需要的服务（对象）
    public MainPageViewModel MainPageViewModel => serviceProvider.GetService<MainPageViewModel>();

    //构造函数，创建ServiceLocator对象时，①创建容器；②注册ViewModel服务；③创建服务定位器。
    public ServiceLocator()
    {
        var serviceCollection = new ServiceCollection();
        //******以下注册服务
        serviceCollection.AddSingleton<MainPageViewModel>();

        //【注意顺序】，服务定义器在注册完所有服务后，再创建
        serviceProvider = serviceCollection.BuildServiceProvider();
    }
}

<Application
    x:Class="MauiApp8.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp8">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
                <ResourceDictionary>
                    <local:ServiceLocator x:Key="ServiceLocator"/>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<ContentPage
    x:Class="MauiApp10.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BindingContext="{Binding MainPageViewModel, Source={StaticResource ServiceLocator}}">

    <VerticalStackLayout>
        <Entry Text="{Binding FirstName}" />
        <Entry Text="{Binding LastName}" />
        <Label Text="{Binding FullName}" />
    </VerticalStackLayout>

</ContentPage>