Partager via

Retour d’une valeur à partir d’une fenêtre contextuelle

Le kit de ressources communauté .NET MAUI offre la possibilité d’afficher une fenêtre contextuelle à un utilisateur. Le Kit de ressources permet également un scénario courant, mais plus complexe, dans lequel un développeur affiche une Popup et attend (await) le retour de son résultat lorsque cette Popup est fermée. Cette page explique comment la Popup<T> classe peut être utilisée pour obtenir le comportement souhaité.

Création d’une fenêtre contextuelle

Une Popup<T> peut être créée en XAML ou en C# comme suit :

Création d’une fenêtre contextuelle en XAML

La section suivante explique comment créer un Popup<T> avec XAML.

Définition de votre fenêtre pop-up

Le moyen le plus simple de créer un Popup<T> fichier consiste à ajouter un nouveau .NET MAUI ContentView (XAML) fichier à votre projet, ce qui crée 2 fichiers ; un fichier *.xaml et un fichier *.xaml.cs . Le contenu de chaque fichier peut être remplacé par ce qui suit :

Fichier XAML
<toolkit:Popup
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    Padding="10"
    x:TypeArguments="system:Boolean"
    x:Class="MyProject.ReturnResultPopup">

    <VerticalStackLayout Spacing="6">
        <Label Text="This is a very important message! Do you agree?" />

        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />

        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    
    </VerticalStackLayout>
    
</toolkit:Popup>

L’utilisation de x:TypeArguments en XAML permet de fournir le paramètre de type pour un type générique.

Fichier de code-behind XAML
public partial class ReturnResultPopup : Popup<bool>
{
    public ReturnResultPopup()
    {
        InitializeComponent();
    }

    async void OnYesButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(true);
    }
    
    async void OnNoButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(false);
    }
}

L’utilisation de Popup<bool> doit correspondre à la définition dans le code XAML par le biais de l’utilisation de x:TypeArguments.

Importante

Si le fichier de code-behind n’est pas créé avec l’appel à InitializeComponent, alors une exception sera levée lors de la tentative d’affichage de votre Popup.

Création d’une fenêtre contextuelle en C#

La section suivante explique comment créer une Popup en utilisant C#.

using CommunityToolkit.Maui.Views;

namespace MyProject;

public class ReturnResultPopup : Popup<bool>
{
    public ReturnResultPopup()
    {
        var yesButton = new Button { Text = "Yes" };
        yesButton.Clicked += OnYesButtonClicked;

        var noButton = new Button { Text = "No" };
        noButton.Clicked += OnNoButtonClicked;

        Content = new VerticalStackLayout
        {
            Children = 
            {
                new Label { Text = "This is a very important message! Do you agree?" },
                
                yesButton,
                noButton
            }
        };
    }

    async void OnYesButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(true);
    }
    
    async void OnNoButtonClicked(object? sender, EventArgs e)
    {
        await CloseAsync(false);
    }
}

La CloseAsync méthode permet de fournir une valeur, ce sera la valeur de retour résultante. L’utilisation de génériques dans Popup<T> fournit une sécurité de type lors du retour de valeurs à partir d’une fenêtre contextuelle.

En attente du résultat d'un pop-up

Pour attendre le résultat, la ShowPopupAsync méthode doit être utilisée comme suit :

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayPopup()
    {
        var popup = new ReturnResultPopup();

        // The type parameter must match the type returned from the popup.
        IPopupResult<bool> popupResult = await this.ShowPopupAsync<bool>(popup, PopupOptions.Empty, CancellationToken.None);

        if (popupResult.WasDismissedByTappingOutsideOfPopup)
        {
            return;
        }

        if (popupResult.Result is true)
        {
            // Yes was tapped
        }
        else
        {
            // No was tapped
        }
    }
}

Fenêtre contextuelle avec résultat

Remarque

Si WasDismissedByTappingOutsideOfPopup est true, la propriété Result sera toujours null ou default.

Options de Popup

La PopupOptions classe offre la possibilité de personnaliser la Bordure, l'Ombre, la Couleur de superposition de page et bien plus encore du Popup affiché.

Pour en savoir plus, reportez-vous à la documentation PopupOptions .

Exemples

Vous trouverez un exemple de cette fonctionnalité en action dans l’exemple d’application .NET MAUI Community Toolkit.

API (Interface de Programmation d'Applications)

Vous pouvez trouver le code source de Popup dans le dépôt GitHub du .NET MAUI Community Toolkit .

Ressources additionnelles