1.概要

本章將講解如何在MAUI中使用簡單的MVVM模式開發“ListView”內容的增刪功能，MVVM在MAUI中也同樣適用。

Microsoft.Toolkit.Mvvm

在學習之前我們先了解一個nuget包，它可以幫助我們省去一些代碼的開發時間。包Microsoft.Toolkit.Mvvm (aka MVVM Toolkit) 是一個現代、快速、模塊化的 MVVM 庫。此包面向 .NET Standard，以便在任何應用平臺上使用它：UWP、WinForms、WPF、Xamarin、Uno 等;在任何運行時：.NET Native、.NET Core、.NET Framework或 Mono。它在所有上運行。在所有情況下，API 圖面都是相同的，因此非常適合生成共享庫。在解決方案資源管理器中，右鍵單擊項目，然后選擇“管理NuGet包”。搜索 Microsoft.Toolkit。Mvvm 并安裝它。

2.詳細內容

Project

View

<Grid RowDefinitions="500,50"><ListView ItemsSource="{Binding Temps}"/><StackLayout Grid.Row="1"><Button WidthRequest="100" HeightRequest="25" Text="add" Command="{Binding AddCommand}"/><Button WidthRequest="100" HeightRequest="25" Text="add" Command="{Binding DeleteCommand}"/></StackLayout>
</Grid>

ViewModel

//ViewModel需繼承public class MainViewModel : ObservableObject{private string _test;private ObservableCollection<MainModel> _temps;private ICommand addCommand;private ICommand deleteCommand;//數據通知集合public ObservableCollection<MainModel> Temps { get => _temps; set => _temps = value; }//命令public ICommand AddCommand { get => addCommand ?? (addCommand = new RelayCommand(AddCallback));}public ICommand DeleteCommand { get => deleteCommand ?? (deleteCommand = new RelayCommand(DeleteCallback));  }//數據通知字段public string Test { get => _test; set => SetProperty(ref _test , value); }public MainViewModel() {//初始化Temps = new ObservableCollection<MainModel>();Temps.Add(new MainModel { Name = "zhangsan" });Temps.Add(new MainModel { Name = "zhangsan" });}//命令執行內容private void AddCallback(){Temps.Add(new MainModel { Name = DateTime.Now.ToString() });}private void DeleteCallback(){Temps.RemoveAt(0);}}

Model

public class MainModel
{public string Name { get; set; }public override string ToString(){return Name;}
}

Run