PopupService

PopupService 提供一種方法，可讓您在應用程式中使用 MVVM 模式來顯示 快顯。

下列各節將逐步介紹如何在 .NET MAUI 應用程式中使用 PopupService。

建立快顯視窗

若要使用 PopupService 來呈現或關閉 Popup，必須先註冊 Popup。 根據步驟 定義快顯，可以建立以下內容。

Popup 的 XAML 內容可以定義為：

<toolkit:Popup 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:viewModels="clr-namespace:MyProject.ViewModels"
    x:Class="MyProject.Popups.NamePopup"
    x:DataType="viewModels:NamePopupViewModel">

    <VerticalStackLayout>
        <Label Text="What is your name?" />
        <Entry Text="{Binding Name}" />

        <Button Text="Save" Command="{Binding SaveCommand}" />
        <Button Text="Cancel" Command="{Binding CancelCommand}" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Popup 的 C# 內容可以定義為：

using CommunityToolkit.Maui.Views;
using MyProject.ViewModels;

namespace MyProject.Popups;

public partial class NamePopup : Popup
{
    public NamePopup(NamePopupViewModel namePopupViewModel)
    {
        InitializeComponent();
        BindingContext = namePopupViewModel;
    }
}

Popup 的備份檢視模型可以定義為：

public class NamePopupViewModel : ObservableObject
{
    [ObservableProperty]
    string name = "";

    readonly IPopupService popupService;

    public NamePopupViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    void OnCancel()
    {
    }

    [RelayCommand(CanExecute = nameof(CanSave))]
    void OnSave()
    {
    }

    bool CanSave() => string.IsNullOrWhitespace(Name) is false;
}

註冊彈出視窗

若要先使用 IPopupService 在應用程式中顯示彈出視窗，您必須向 MauiAppBuilder註冊快顯和檢視模型，這可以透過使用 Register Popup View 和 View Model來完成。

根據上述範例，下列程式代碼可以新增至MauiProgram.cs檔案。

builder.Services.AddTransientPopup<NamePopup, NamePopupViewModel>();

顯示彈出視窗

.NET MAUI 社群工具組提供了一個機制，可在 .NET MAUI 應用程式中建立和呈現快顯視窗。 使用 UseMauiCommunityToolkit 初始化方法時，快顯服務會自動向 MauiAppBuilder 註冊。 這可讓您解決應用程式中任何部分的 IPopupService 實作。

IPopupService 可讓您註冊彈出視圖及其相關聯的視圖模型。 現在只需提供視圖模型即可驅動顯示 Popup，這使得保持視圖與視圖模型之間的清晰分隔成為可能。

下列範例示範如何使用 IPopupService，在 .NET MAUI 應用程式中建立及顯示快顯：

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

    public MyViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    public void DisplayPopup()
    {
        this.popupService.ShowPopup<NamePopupViewModel>();
    }
}

或者，呼叫端可以等候 ShowPopupAsync 方法，以處理傳回結果。 DisplayPopup 方法可以重寫為：

public void DisplayPopup()
{
    var name = await this.popupService.ShowPopupAsync<NamePopupViewModel>();
}

如需更具體的範例，請參閱我們的示例應用程式和文檔中的MultiplePopupViewModel範例。

IPopupService 也提供方法來處理從彈出窗口傳回的結果，如 傳回結果中所述。

將資料傳遞至彈出視圖模型

在呈現快顯時，我們有時需要將數據傳遞至基礎檢視模型，以允許使用者呈現動態內容。 IPopupService 可透過採用 Action<TViewModel> onPresenting 參數之 ShowPopup 和 ShowPopupAsync 方法的多載來達成此作業。 此參數的設計與架構無關，並可讓您身為開發人員，以最佳方式驅動數據的載入/傳遞。

若要擴充上一個顯示 NamePopupViewModel 及其相關聯 Popup 的範例，我們可以使用 onPresenting 參數來傳入使用者名稱：

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

    public MyViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    public void DisplayPopup()
    {
        this.popupService.ShowPopup<UpdatingPopupViewModel>(onPresenting: viewModel => viewModel.Name = "Shaun");
    }
}

關閉彈出視窗

PopupService 提供 ClosePopup 和 ClosePopupAsync 方法，讓您能夠從檢視模型關閉 Popup。

透過程式關閉快顯視窗

在擴展上一個範例的基礎上，可以將下列實作新增至 OnCancel 方法：

[RelayCommand]
void OnCancel()
{
    popupService.ClosePopup();
}

這會導致最近顯示的 Popup 關閉。

返回結果

關閉 Popup 可以將結果傳回給呈現 Popup的呼叫端。

在基於上一個範例的基礎上，以下實作可以被添加到 OnSave 方法中：

[RelayCommand(CanExecute = nameof(CanSave))]
void OnSave()
{
    popupService.ClosePopup(Name);
}

這會導致最近顯示的 Popup 被關閉，並且呼叫者會被返回 Name中的值。

例子

您可以在 .NET MAUI 社群工具組範例應用程式中找到這項功能的範例。

應用程式介面

您可以在 .NET MAUI Community Toolkit GitHub 存放庫上找到 Popup 的原始程式碼，。