适用于初学者的 .NET MAUI | Microsoft Learn

记录微软Learn中用到的代码。文章比较粗糙，大部分是项目代码粘贴。想详细学习的可到上面的链接学习，代码可以从这里复制后直接运行。

练习中一共有两个页面：

1、MainPage.xaml 用于添加列表中的内容。主要功能有向列表中添加一项；左滑删除该项；点击该选项进入详情页面。

2、DetailPage.xaml 显示详细信息，实际上显示的很少。返回主界面。

用到的MVVM包有：

1、CommunityToolkit.Mvvm

接下来是MainPage.xaml代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppDemo1.MainPage"
             xmlns:viewmode="clr-namespace:MauiAppDemo1.ViewModel"
             x:DataType="viewmode:MainViewModel">

    <Grid RowDefinitions="100,Auto,*"
          ColumnDefinitions=".75*,.25*"
          Padding="10"
          RowSpacing="10"
          ColumnSpacing="10">
        
        <Image Grid.ColumnSpan="2"
               Source="dotnet_bot.png"
               Background="white"/>
        
        <Entry Placeholder="Enter task"
               Text="{Binding Text}"
               Grid.Row="1"/>
        
        <Button Text="Add"
                Command="{Binding AddCommand}"
                Grid.Row="1"
                Grid.Column="1"/>

        <CollectionView Grid.Row="2" Grid.ColumnSpan="2"
                        ItemsSource="{Binding Items}"
                        SelectionMode="None">
            <!--<CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Apples</x:String>
                    <x:String>Bananas</x:String>
                    <x:String>Oranges</x:String>
                </x:Array>
            </CollectionView.ItemsSource>-->
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type x:String}">
                    <SwipeView>
                        <SwipeView.RightItems>
                            <SwipeItems>    
                                <SwipeItem Text="Delete"
                                           BackgroundColor="Red"
                                           Command="{Binding Source={RelativeSource AncestorType={x:Type viewmode:MainViewModel}},Path=DeleteCommand}"
                                           CommandParameter="{Binding .}"/>
                            </SwipeItems>
                        </SwipeView.RightItems>
                        <Grid Padding="0,5">
                            <Frame>
                                <Frame.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmode:MainViewModel}},Path=TapCommand}"
                                                          CommandParameter="{Binding .}"/>
                                </Frame.GestureRecognizers>
                                <Label Text="{Binding .}"
                                       FontSize="24"/>
                            </Frame>
                        </Grid>
                    </SwipeView>

                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>

</ContentPage>

using MauiAppDemo1.ViewModel;

namespace MauiAppDemo1;

public partial class MainPage : ContentPage
{
	int count = 0;

	public MainPage(MainViewModel vm)
	{
		InitializeComponent();
        BindingContext = vm;

    }

}

    using MauiAppDemo1.ViewModel;

namespace MauiAppDemo1;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

        builder.Services.AddSingleton<MainPage>();
        builder.Services.AddSingleton<MainViewModel>();

        builder.Services.AddTransient<DetailPage>();
		builder.Services.AddSingleton<DetailViewModel>();		

		return builder.Build();
	}
}

namespace MauiAppDemo1;

public partial class AppShell : Shell
{
	public AppShell()
	{
		InitializeComponent();

		Routing.RegisterRoute(nameof(DetailPage),typeof(DetailPage));
	}
}

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiAppDemo1.ViewModel
{
    /// <summary>
    /// CommunityToolkit.Mvvm
    /// </summary>
    public partial class MainViewModel : ObservableObject
    {

        public MainViewModel()
        {
            items = new ObservableCollection<string>();
        }

        [ObservableProperty]

        ObservableCollection<string> items;

        [ObservableProperty]
        string text;

        [RelayCommand]
        void Add()
        {
            if (string.IsNullOrWhiteSpace(Text)) return;

            items.Add(Text);

            Text = string.Empty;
        }

        [RelayCommand]

        void Delete(string s)
        {
            if (items.Contains(s))
            {
                items.Remove(s);
            }
        }

        [RelayCommand]  
        async Task Tap(string s)
        {
            await Shell.Current.GoToAsync($"{nameof(DetailPage)}?Text={s}");
        }
    }

    /// <summary>
    /// 基本写法
    /// </summary>
    //public class MainViewModel : INotifyPropertyChanged
    //{
    //    string text;

    //    public string Text
    //    {
    //        get => text;
    //        set
    //        {
    //            text=value;
    //            OnPropertyChanged(nameof(Text));
    //        }
    //    }

    //    public event PropertyChangedEventHandler PropertyChanged;
    //    void OnPropertyChanged(string name)=>PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    //}
}

DetailPage.xaml

                

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppDemo1.DetailPage"
             xmlns:viewmodel="clr-namespace:MauiAppDemo1.ViewModel"
             x:DataType="viewmodel:DetailViewModel"
             Title="DetailPage">
    <VerticalStackLayout Padding="20">
        <Label 
            Text="{Binding Text}"
            FontSize="25"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Button Text="Go Back"
                Command="{Binding GoBackCommand}"/>
    </VerticalStackLayout>
</ContentPage>

using MauiAppDemo1.ViewModel;

namespace MauiAppDemo1;

public partial class DetailPage : ContentPage
{
	public DetailPage(DetailViewModel vm)
	{
		InitializeComponent();
        BindingContext = vm;
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace MauiAppDemo1.ViewModel
{
    [QueryProperty("Text","Text")]
    public partial class DetailViewModel:ObservableObject
    {
        [ObservableProperty]
        string text;

        [RelayCommand]
        async Task GoBack()
        {
            await Shell.Current.GoToAsync("..");
        }
    }
}