适用于初学者的 .NET MAUI

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

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

适用于初学者的 .NET MAUI_第1张图片适用于初学者的 .NET MAUI_第2张图片

练习中一共有两个页面:

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

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

用到的MVVM包有:

1、CommunityToolkit.Mvvm

接下来是MainPage.xaml代码:




    
        
        
        
        
        
        
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()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

        builder.Services.AddSingleton();
        builder.Services.AddSingleton();

        builder.Services.AddTransient();
		builder.Services.AddSingleton();		

		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
{
    /// 
    /// CommunityToolkit.Mvvm
    /// 
    public partial class MainViewModel : ObservableObject
    {

        public MainViewModel()
        {
            items = new ObservableCollection();
        }

        [ObservableProperty]

        ObservableCollection 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}");
        }
    }

    /// 
    /// 基本写法
    /// 
    //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

                



    
        
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("..");
        }
    }
}

你可能感兴趣的:(MAUI,.net,ui)