PopupDienst
De PopupService biedt een mechanisme voor het weergeven van pop-ups in een toepassing met behulp van het MVVM-patroon.
De volgende secties bouwen stapsgewijs voort op het gebruik van de PopupService in een .NET MAUI-toepassing.
Een pop-up maken
Als u de PopupService wilt gebruiken om een Popup te presenteren of te sluiten, moet de Popup eerst worden geregistreerd. Op basis van de stappen in Uw pop-up definiëren kunt u het volgende maken.
De XAML-inhoud van de Popup kan worden gedefinieerd als:
<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>
De C#-inhoud van de Popup kan worden gedefinieerd als:
using CommunityToolkit.Maui.Views;
using MyProject.ViewModels;
namespace MyProject.Popups;
public partial class NamePopup : Popup
{
public NamePopup(NamePopupViewModel namePopupViewModel)
{
InitializeComponent();
BindingContext = namePopupViewModel;
}
}
Het backing view-model voor de Popup kan worden gedefinieerd als:
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;
}
Een pop-up registreren
Als u eerst de IPopupService wilt gebruiken om een pop-up in uw toepassing weer te geven, moet u het pop-upvenster registreren en het model weergeven met de MauiAppBuilder, dit kan worden gedaan via het gebruik van Pop-upweergave registreren en Model weergeven.
Op basis van het bovenstaande voorbeeld kan de volgende code worden toegevoegd aan het MauiProgram.cs-bestand.
builder.Services.AddTransientPopup<NamePopup, NamePopupViewModel>();
Een pop-up presenteren
De .NET MAUI Community Toolkit biedt een mechanisme voor het instantiëren en presenteren van pop-ups in een .NET MAUI-toepassing. De pop-upservice wordt automatisch geregistreerd bij de MauiAppBuilder wanneer u de UseMauiCommunityToolkit initialisatiemethode gebruikt. Hiermee kunt u een IPopupService-implementatie in een deel van uw toepassing oplossen.
De IPopupService maakt het mogelijk om een pop-upweergave en het bijbehorende weergavemodel te registreren. De mogelijkheid om een Popup weer te geven, kan nu alleen worden aangestuurd door alleen het weergavemodel op te geven, waardoor het mogelijk is om een schone scheiding tussen het weergave- en weergavemodel te behouden.
In het volgende voorbeeld ziet u hoe u de IPopupService gebruikt om een pop-up te maken en weer te geven in een .NET MAUI-toepassing:
public class MyViewModel : INotifyPropertyChanged
{
private readonly IPopupService popupService;
public MyViewModel(IPopupService popupService)
{
this.popupService = popupService;
}
public void DisplayPopup()
{
this.popupService.ShowPopup<NamePopupViewModel>();
}
}
De beller kan ook wachten op de ShowPopupAsync-methode om een resultaat te verwerken dat geretourneerd wordt. De methode DisplayPopup kan worden herschreven als:
public void DisplayPopup()
{
var name = await this.popupService.ShowPopupAsync<NamePopupViewModel>();
}
Raadpleeg onze voorbeeldtoepassing en het voorbeeld in MultiplePopupViewModel
De IPopupService biedt ook methoden voor het afhandelen van een resultaat dat wordt geretourneerd vanuit een pop-up zoals beschreven in Een resultaat retourneren.
Gegevens doorgeven aan een pop-upweergavemodel
Bij het presenteren van een pop-up moeten we soms gegevens doorgeven aan het onderliggende weergavemodel, zodat dynamische inhoud aan de gebruiker kan worden gepresenteerd. De IPopupService maakt dit mogelijk door de overbelasting van de ShowPopup en ShowPopupAsync methoden die een Action<TViewModel> onPresenting parameter gebruiken. Deze parameter is ontworpen om onafhankelijk van een framework te zijn en stelt u als ontwikkelaar in staat om het laden en doorgeven van gegevens te beheersen, zodat het het beste past bij uw architectuur.
Als u het vorige voorbeeld van het weergeven van een NamePopupViewModel en de bijbehorende pop-up wilt uitbreiden, kunnen we de parameter onPresenting gebruiken om de naam van de gebruiker door te geven:
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");
}
}
Een pop-up sluiten
De PopupService biedt de methoden ClosePopup en ClosePopupAsync waarmee u een Popup kunt sluiten vanuit een weergavemodel.
Programmatisch een pop-up sluiten
Als u het vorige voorbeeld uitbreidt, kan de volgende implementatie worden toegevoegd aan de methode OnCancel:
[RelayCommand]
void OnCancel()
{
popupService.ClosePopup();
}
Dit zal ertoe leiden dat de laatst weergegeven Popup wordt gesloten.
Een resultaat retourneren
Bij het sluiten van een Popup is het mogelijk om een resultaat terug te sturen naar de aanroeper die de Popupheeft gepresenteerd.
Als u het vorige voorbeeld uitbreidt, kan de volgende implementatie worden toegevoegd aan de methode OnSave:
[RelayCommand(CanExecute = nameof(CanSave))]
void OnSave()
{
popupService.ClosePopup(Name);
}
Dit leidt ertoe dat de laatst weergegeven Popup wordt gesloten en dat de beller de waarde in Nameretourneert.
Voorbeelden
U vindt een voorbeeld van deze functie in actie in de .NET COMMUNITY Toolkit Sample Application.
API
U vindt de broncode voor Popup in de .NET MAUI Community Toolkit GitHub-opslagplaats.
.NET MAUI Community Toolkit