MAUI : 使用 Prism Template 來建立 MAUI 應用程式

使用 Prism Template 來建立 MAUI 應用程式

在這個時間點，想要開發 MAUI 應用程式，需先要安裝 Visual Studio 2022 的 17.3 Preview 版本，因此，這裡已經安裝好可以開發 MAUI 專案的 17.3 Preview 開發工具了。

首先，要先安裝 Prism Template for MAUI ，想要做到這樣的需求，請先使用管理者權限來開啟 命令提示字元視窗，接著，在該視窗內輸入

dotnet new --install Prism.Templates::8.1.97

就可以把這個專案範本安裝到 Visual Studio 內，底下是下達這個命令之後的執行結果內容。

C:\Windows\system32>dotnet new --install Prism.Templates::8.1.97

歡迎使用 .NET 6.0!
---------------------
SDK 版本: 6.0.400-preview.22330.6

遙測
---------
.NET 工具會收集使用資料，協助我們改進您的體驗。資料會由 Microsoft 收集，並分享給社群使用。您可以選擇退出遙測，只要使用您慣用的殼層，將 DOTNET_CLI_TELEMETRY_OPTOUT 環境變數設定為 '1' 或 'true' 即可。

閱讀更多有關 .NET CLI 工具遙測的內容: https://aka.ms/dotnet-cli-telemetry

----------------
已安裝 ASP.NET Core HTTPS 開發憑證。
若要信任憑證，請執行 'dotnet dev-certs https --trust' (僅限 Windows 與 macOS )。
深入了解 HTTPS: https://aka.ms/dotnet-https
----------------
撰寫第一個應用程式: https://aka.ms/dotnet-hello-world
了解全新功能: https://aka.ms/dotnet-whats-new
探索文件: https://aka.ms/dotnet-docs
於 GitHub 回報問題和尋找來源: https://github.com/dotnet/core
Use 'dotnet --help' 查看可用的命令或瀏覽: https://aka.ms/dotnet-cli
--------------------------------------------------------------------------------------
將安裝下列範本套件:
   Prism.Templates::8.1.97

成功: Prism.Templates::8.1.97 已安裝下列範本:
範本名稱                         簡短名稱         語言  標記
-------------------------------  ---------------  ----  ------------------------------------------------------------
Prism .NET MAUI App              prism-maui       [C#]  MAUI/Android/iOS/macOS/Mac Catalyst/Windows/Tizen
Prism Blank App (Uno Platform)   uno-blank        [C#]  Prism/Xamarin/Uno Platform/WebAssembly/iOS/Android/WinUI/UWP
Prism Blank App (WPF)            wpf-core-blank   [C#]  Desktop
Prism Blank App (Xamarin.Forms)  xf-blank         [C#]  Prism/Xamarin/Xamarin.Forms
Prism Full App (WPF)             wpf-core-full    [C#]  Desktop
Prism Module (WPF)               wpf-module-core  [C#]  Desktop
Prism Module (Xamarin)           xf-module        [C#]  Prism/Xamarin/Xamarin.Forms

建立一個可以支援 Prism 開發框架的 MAUI 專案

• 開啟 Visual Studio 2022 Preview 版本

• 點選螢幕右下角的 [建立新的專案] 按鈕

• 在最上方的 [搜尋範本] 文字輸入盒內

• 輸入 prism 找出可用的專案範本

  

• 現在可以從 [建立新專案] 對話窗內出現了 [Prism .NET MAUI App (Dan Siegel)] 這個專案範本

• 選擇這個專案範本

• 點選右下角的 [下一步] 按鈕

• 當出現了 [設定新的專案] 對話窗

• 在 [專案名稱] 欄位內，輸入 MyFirstPrismMaui

• 點選右下角的 [建立] 按鈕

現在使用 Prism 開發框架的 MAUI 專案已經成功建立了

底下是建立好的整個專案結構

首先打開 [MauiProgram.cs] 這個檔案，將會看到底下的內容

namespace MyFirstPrismMaui;

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

        return builder.Build();
    }
}

在這裡所看到的是標準 MAUI 專案的啟動內容，不過，在此使用了

UsePrismApp(PrismStartup.Configure)

敘述，指定要使用 Prism 作為這個專案的開發框架

因此，在這個專案根目錄下，找到並且打開 [PrismStartup.cs] 這個檔案，底下是這個檔案的內容

using MyFirstPrismMaui.Views;

namespace MyFirstPrismMaui;

internal static class PrismStartup
{
    public static void Configure(PrismAppBuilder builder)
    {
        builder.RegisterTypes(RegisterTypes)
                .OnAppStart("NavigationPage/MainPage");
    }

    private static void RegisterTypes(IContainerRegistry containerRegistry)
    {
        containerRegistry.RegisterForNavigation<MainPage>()
                     .RegisterInstance(SemanticScreenReader.Default);
    }
}

在這裡將會看到 Prism 在這個專案中的設定程式碼，首先，對於 DI / IoC Container 相依性注入容器，並不是使用微軟內建的原件，而是 Prism 自己的，因此，想要注入的相關服務，要在這裡來進行註冊，當然，要使用到的頁面，也需要在這裡來宣告。

點選中間上方工具列的 [Windows Machine] 這個工具列按鈕旁的下拉選單三角形

從彈出功能表中，找到 [Android Emulators] 內的任何一個模擬器

接者，開始執行這個專案，讓他可以在 Android 模擬器出現

底下是執行後的結果

 

MAUI : 資料綁定 Data Binding - 5 在 Maui 專案內，如何得知 ViewModel 內的屬性產生異動，而 View 可以收到通知呢？

資料綁定 Data Binding - 5 在 Maui 專案內，如何得知 ViewModel 內的屬性產生異動，而 View 可以收到通知呢？

在最後對於資料綁定 Data Binding 的 INotifyPropertyChanged 的用法，將會回到 MAUI 專案內來實際觀察，在這篇文章中，將會使用 CommunityToolkit.Mvvm 這個套件來進行檢測

系列文章清單

1 自行建置 INotifyPropertyChanged 介面

2 設計基底類別，透過繼承可以使用屬性變更通知

3 PropertyChanged.Fody 套件，大幅簡化屬性變更通知程式設計碼

4 CommunityToolkit.Mvvm 套件，透過原始碼產生來簡化屬性變更通知程式設計碼

5 在 Maui 專案內，如何得知 ViewModel 內的屬性產生異動，而 View 可以收到通知呢？

建立新專案

• 開啟 Visual Studio 2022 Preview 開發工具

  在這個時間點，若想要使用 MAUI 專案來進行開發，需要安裝 Visual Studio 2022 17.3 Preview 版本，才能夠順利建立 MAUI 專案

• 當 [Visual Studio 2022 Preview] 對話窗出現的時候

• 點選右下角的 [建立新的專案] 按鈕選項

• 現在將看到 [建立新專案] 對話窗

• 切換右上角的 [所有專案類型] 下拉選單控制項

• 從清單中找到並選擇 [.NET MAUI 應用程式] 這個專案範本

  此專案可用於建立適用於 iOS、Android、Mac Catalyst、Tizen 和 WinUI 的 NET MAUI 應用程式

• 點選右下角的 [下一步] 按鈕

• 此時將會看到 [設定新的專案] 對話窗

• 在 [專案名稱] 欄位，輸入 mauiMonitorPropertyChanged

• 點選右下角的 [下一步] 按鈕

• 最後會看到 [其他資訊] 對話窗

• 使用預設設定值，也就是 [架構] 為 [.NET 6.0 (長期支援)]

• 點選右下角的 [建立] 按鈕

加入 CommunityToolkit.Mvvm 的 NuGet 套件

• 滑鼠右擊該專案的 [相依性] 節點
• 從彈出功能表中選擇 [管理 NuGet 套件] 功能選項
• 此時，[NuGet: csCommunityToolkitMVVM] 視窗將會出現
• 點選 [瀏覽] 標籤頁次
• 在左上方的搜尋文字輸入盒內輸入 CommunityToolkit.Mvvm 關鍵字
• 若你沒有看到 8.0 以上的版本，請勾選 [包括搶鮮版] 檢查盒控制項
• 現在，將會看到 CommunityToolkit.Mvvm 套件出現在清單內
• 點選這個 CommunityToolkit.Mvvm 套件，並且點選右上方的 [安裝] 按鈕，安裝這個套件到這個專案內。

進行 ViewModel 的設計

• 滑鼠右擊專案節點
• 從彈出功能表中，點選 [加入] > [類別]
• 當出現 [新增項目 - mauiMonitorPropertyChanged] 對話窗後
• 在下方的 [名稱] 欄位內，輸入 MainPageViewModel
• 點選對話窗右下角的 [新增] 按鈕
• 使用底下 C# 程式碼將這個檔案內容替換掉

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

namespace mauiMonitorPropertyChanged
{
    using CommunityToolkit.Mvvm.ComponentModel;
    using CommunityToolkit.Mvvm.Input;

    public partial class MainPageViewModel : ObservableObject
    {
        public MainPageViewModel()
        {
            person = new Person();
        }
        [ObservableProperty]
        private Person person;

        [RelayCommand]
        void ChangeData()
        {
            Person.Name = "Vulcan Lee";
            Person.Age = 25;
        }
    }
    public partial class Person : ObservableObject
    {
        [ObservableProperty]
        private string name;

        [ObservableProperty]
        private int age;

        private string customDesign;
        public string CustomDesign
        {
            get => name;
            set => SetProperty(ref customDesign, value);
        }
    }
}

在這裡設計一個 Person 類別，並且透過 CommunityToolkit.Mvvm 套件的原始碼自動產生機制，幫助產生出相關的 PropertyChanged 屬性變更事件需要用到的相關程式碼。

在最上面則是建立一個新的類別，將會是 MainPage 這個 XAML 頁面需要用到的 ViewModel，因此，在這裡將會把這個 ViewModel 類別命名為 MainPageViewModel。

在 MainPageViewModel 建構式內，首先將 Person 這個屬性建立初始物件值，避免之後產生 null reference 空值存取的問題。

這裡設計一個 void ChangeData() 方法，一旦執行這個方法之後，將會變更 Person 物件內的 Name 與 Age 屬性值，其實，這是一個用於命令要綁定的委派方法，在這裡，透過在此方法上方加入了 [RelayCommand] 屬性宣告，讓這個方法可以用於 XAML 頁面上來進行命令的綁定，因此，在 MainPage.xaml 檔案中，將會看到有個 ChangeDataCommand 這樣的物件可以選擇。

進行 View 與 ViewModel 的服務註冊

接下來要來進行使用 DI Container 相依性服務容器的註冊工作，要使用這樣的功能，將會在取得頁面物件的時候，可以自動注入相對應的 ViewModel 物件來使用。

• 在專案根目錄找到並且打開 [MauiProgram.cs] 檔案
• 在最後面找到 return builder.Build(); 敘述
• 在此敘述前，加入底下程式碼

#region 在這裡進行 ViewModel 的註冊
builder.Services.AddSingleton<MainPage>();
builder.Services.AddSingleton<MainPageViewModel>();
#endregion

修正 View XAML 內容，加入 Entry 控制項與宣告與 ViewModel 的資料綁定設定

• 在專案根目錄下，找到並且打開 [MainPage.xaml] 檔案
• 使用底下 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"
             xmlns:local="clr-namespace:mauiMonitorPropertyChanged"
             x:DataType="local:MainPageViewModel"
             x:Class="mauiMonitorPropertyChanged.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Entry Placeholder="請輸入姓名"
                   x:Name="entryName"
                   Text="{Binding Person.Name}"/>
            <Entry Placeholder="請輸入年紀"
                   x:Name="entryAge"
                   Text="{Binding Person.Age}"/>
            <Button Text="變更屬性"
                    Command="{Binding ChangeDataCommand}"/>
            
            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

在根目錄節點， ContentPage 內，宣告一個 local 命名空間，這次要用來指定該頁面 ViewModel 所在的命名空間位置，接下來的 x:DataType ， 這是用於 編譯的系結 ，在微軟官方文件上，是這樣描述的 : 編譯的系結藉由在編譯時期解析系結運算式，而不是執行時間，以改善 .NET MAUI 應用程式中的資料系結效能。 此外，在編譯時間驗證繫結運算式可改善開發人員的疑難排解體驗，因為無效的繫結會回報為建置錯誤。

我非常熱愛這項功能，因為，可以讓我在設計 XAML 的時候，即時得知綁定的物件名稱是甚麼與是否正確，避免要等到執行時期才知道發生了問題。

接著，宣告了兩個 Entry 控制項與一個按鈕，前面兩個控制項用於顯示與讓使用者輸入 姓名 與 年紀 的內容，而後者的按鈕控制項，透過 Command 這個屬性值，來綁定到 ViewModel 內的這個具有實作 ICommand 的物件 (ChangeDataCommand 這個物件，是由 CommunityToolkit.Mvvm 透過原始碼產生器自動產生的，在 ViewModel 內的綁定方法為 ChangeData)

修正 Code Behind 程式碼，注入 ViewModel 與 綁定屬性變更通知

• 在專案根目錄找到並且打開 [MainPage.xaml.cs] 檔案
• 使用底下 C# 程式碼替換掉這個檔案內容

using System.Diagnostics;

namespace mauiMonitorPropertyChanged;

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

    public MainPage(MainPageViewModel mainPageViewModel)
    {
        InitializeComponent();
        MainPageViewModel = mainPageViewModel;
        this.BindingContext = MainPageViewModel;

        MainPageViewModel.Person.PropertyChanging += (s, e) =>
        {
            Debug.WriteLine($"   ViewModel.Person : {e.PropertyName} 正在進行變更完成");
        };
        MainPageViewModel.Person.PropertyChanged += (s, e) =>
        {
            Debug.WriteLine($"   ViewModel.Person :  {e.PropertyName} 已經變更完成");
        };
        entryName.PropertyChanged += (s, e) =>
        {
            Debug.WriteLine($"   姓名控制項 {e.PropertyName} 已經變更完成");
        };
        entryName.PropertyChanging += (s, e) =>
        {
            Debug.WriteLine($"   姓名控制項 {e.PropertyName} 正在進行變更完成");
        };
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;

        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";

        SemanticScreenReader.Announce(CounterBtn.Text);
    }
}

在這裡的 Code Behind 程式碼中，透過了建構式注入方式，取得該頁面要使用的 ViewModel 物件，也就是 MainPageViewModel。接著，將這個 ViewModel 物件設定到 XAML ContentPage 內的 BindingContext 屬性內。

在建構式內，還針對的姓名文字輸入盒 Entry 這個控制項，訂閱綁定了該控制項的 PropertyChanging 與 PropertyChanged 這兩個事件，所以，當在使用這個 Entry 控制項的時候，有宣告某些屬性有進行資料綁定的行為，並且這個屬性值有變更的時候，就會觸發這了 Lambda 事件。

另外，還針對 ViewModel 內的 Person 物件，同樣的也訂閱了 PropertyChanging 與 PropertyChanged 這兩個事件，一旦這些事件被觸發之後，將會顯示訊息文字在 Visual Studio 輸出視窗內。

進行測試與觀察

由於 .NET MAUI 專案具有單一專案，但是可以在不同平台下執行的特性，因此，在這裡將會選擇最簡單的執行方式，那就是選擇使用 Windows 平台下來執行

• 點選最上方中間工具列區域的 [Windows Machine] 按鈕

• 這個專案將會產生出一個 WinUI 3 的應用程式

• 執行結果畫面如下

  

• 點選 [變更屬性] 按鈕

  此時將會觸發 ViewModel 內的 ChangeData() 方法，在這個方法內，會變更 Person 物件內的 Name 與 Age 這兩個屬性值

• 從 Visual Studio 2022 [輸出] 視窗內，將會看到底下輸出內容

ViewModel.Person : Name 正在進行變更完成
姓名控制項 Text 正在進行變更完成
姓名控制項 Text 已經變更完成
ViewModel.Person :  Name 已經變更完成
ViewModel.Person : Age 正在進行變更完成
姓名控制項 Height 正在進行變更完成
姓名控制項 Height 已經變更完成
ViewModel.Person :  Age 已經變更完成
姓名控制項 CursorPosition 正在進行變更完成
姓名控制項 CursorPosition 已經變更完成

從輸出內容可以看出，一旦按鈕被點擊後，就會變更 ViewModel 內的 Person.Name 的屬性值，在變更之前，將會顯示 [ViewModel.Person : Name 正在進行變更完成] ，緊接著因為 Name 這個屬性有綁定到 Entry.Text 這個可綁定屬性上，因此，將會觸發其事件，所以，將會顯示出 [姓名控制項 Text 正在進行變更完成]，當都變更完成後，就會顯示出 [姓名控制項 Text 已經變更完成] 與 [ViewModel.Person : Name 已經變更完成] 這些內容

從上述的執行結果，可以看到透過 PropertyChanged 這樣的屬性變更通知機制，使得 XAML 的資料綁定作業可以無縫的運作起來。