(04). Net Maui actual MVVM

1. Summary

This chapter will explain how to MAUI Use the simple MVVM Pattern development “ListView” Content addition and deletion function ,MVVM stay MAUI The same applies to .

Microsoft.Toolkit.Mvvm

Before we study, let's learn about nuget package , It can help us save some code development time . package Microsoft.Toolkit.Mvvm (aka MVVM Toolkit) It's a modern 、 Fast 、 Modular MVVM library . This package is for .NET Standard, In order to use it on any application platform ：UWP、WinForms、WPF、Xamarin、Uno etc. ; At any run time ：.NET Native、.NET Core、.NET Framework or Mono. It runs on all . In all cases ,API The surfaces are the same , Therefore, it is very suitable for generating shared libraries . In Solution Explorer , Right click on the item , And then choose “ management NuGet package ”. Search for Microsoft.Toolkit.Mvvm And install it .

2. The detailed content

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 Need to inherit 
    public class MainViewModel : ObservableObject
    {
        private string _test;
        private ObservableCollection<MainModel> _temps;
        private ICommand addCommand;
        private ICommand deleteCommand;

        // Data notification collection 
        public ObservableCollection<MainModel> Temps { get => _temps; set => _temps = value; }

        // command 
        public ICommand AddCommand { get => addCommand ?? (addCommand = new RelayCommand(AddCallback));}
        public ICommand DeleteCommand { get => deleteCommand ?? (deleteCommand = new RelayCommand(DeleteCallback));  }

        // Data notification fields 
        public string Test { get => _test; set => SetProperty(ref _test , value); }

        public MainViewModel() 
        {
            // initialization 
            Temps = new ObservableCollection<MainModel>();
            Temps.Add(new MainModel { Name = "zhangsan" });
            Temps.Add(new MainModel { Name = "zhangsan" });
        }

        // Command execution content 
        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