适用于初学者的 .NET MAUI

适用于初学者的 .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("..");}}
}