Découvrir plusieurs façons de créer des fenêtres contextuelles dans .net Maui

mai 7, 2025

Découvrir plusieurs façons de créer des fenêtres contextuelles dans .net Maui

Dans cet article, je vais vous parler de certains moyens d’améliorer vos applications .net Maui grâce à l’utilisation de popups personnalisés. Commençons!

Création d’un exemple de page

Supposons que vous ayez une page qui traite les paiements, où vous souhaitez implémenter l’utilisation de modaux contextuels ou de fenêtres, que vous pouvez reproduire en suivant ces étapes:

Créer un nouveau projet en utilisant le .NET MAUI App modèle sans sélectionner le Inclure un échantillon de contenu option.
Suivez les étapes 1 à 4 du Guide d’installation officiel Pour configurer les contrôles Telerik, nous utiliserons sur l’exemple de page. Nous utilisons les progrès Telerik UI pour .net Maui les contrôles car ils fournissent un look plus professionnel à l’application et incluent des contrôles comme RadTextMaskedEntryqui permet de masquer les champs d’entrée, idéaux pour des données comme les numéros de carte, les dates d’expiration, etc.
Dans le MainPage.xaml Fichier, remplacez le contenu contenu par ce qui suit:

<ContentPage.Background>
    <RadialGradientBrush Center="0.5,0.5" Radius="1.0">
        <GradientStop Offset="0.0" Color="#512BD4" />
        <GradientStop Offset="1.0" Color="#D600AA" />
    </RadialGradientBrush>
</ContentPage.Background>

<ScrollView>
    <Grid Padding="20">
        <VerticalStackLayout Spacing="25" VerticalOptions="CenterAndExpand">
            <Label
                FontAttributes="Bold"
                FontSize="32"
                HorizontalOptions="Center"
                Text="Pay with Card"
                TextColor="White" />

            <telerik:RadBorder
                Padding="20"
                BackgroundColor="#2E2E2E"
                BorderColor="White"
                BorderThickness="2"
                CornerRadius="20">
                <VerticalStackLayout Spacing="20">
                    <telerik:RadBorder
                        Padding="15"
                        BackgroundColor="White"
                        BorderColor="#E0E0E0"
                        BorderThickness="1"
                        CornerRadius="15">
                        <telerik:RadBorder.Shadow>
                            <Shadow
                                Brush="Black"
                                Opacity="0.1"
                                Radius="2"
                                Offset="0,10" />
                        </telerik:RadBorder.Shadow>
                        <Grid
                            ColumnDefinitions="Auto, *"
                            ColumnSpacing="10"
                            RowDefinitions="Auto, Auto">
                            <Label
                                Grid.RowSpan="2"
                                FontSize="36"
                                HorizontalOptions="Center"
                                Text="💳"
                                VerticalOptions="Center" />
                            <VerticalStackLayout Grid.Column="1" Spacing="5">
                                <Label
                                    FontAttributes="Bold"
                                    FontSize="18"
                                    Text="Credit"
                                    TextColor="#34495E" />
                                <Label Text="XXXX - XXXX - XXXX - XXXX" TextColor="#757575" />
                            </VerticalStackLayout>
                        </Grid>
                    </telerik:RadBorder>
                    <telerik:RadBorder
                        Padding="20"
                        BackgroundColor="White"
                        BorderColor="#E0E0E0"
                        BorderThickness="1"
                        CornerRadius="15">
                        <VerticalStackLayout Spacing="15">
                            <telerik:RadTextMaskedEntry
                                x:Name="CardNumberEntry"
                                Keyboard="Numeric"
                                Mask="####-####-####-####"
                                Placeholder="Card Number"
                                TextColor="#333" />
                            <telerik:RadTextMaskedEntry
                                x:Name="ExpDateEntry"
                                Keyboard="Numeric"
                                Mask="##/##"
                                Placeholder="MM/YY"
                                TextColor="#333" />
                            <telerik:RadTextMaskedEntry
                                x:Name="CvvEntry"
                                Keyboard="Numeric"
                                Mask="###"
                                Placeholder="CVV"
                                TextColor="#333" />
                            <telerik:RadEntry
                                x:Name="CardHolderEntry"
                                Placeholder="Cardholder Name"
                                TextColor="#333" />
                        </VerticalStackLayout>
                    </telerik:RadBorder>
                </VerticalStackLayout>
            </telerik:RadBorder>

            <telerik:RadButton
                x:Name="PayButton"
                BackgroundColor="#E74C3C"
                Clicked="PayButton_Clicked"
                CornerRadius="25"
                FontAttributes="Bold"
                HorizontalOptions="FillAndExpand"
                Text="Make Payment"
                TextColor="White" />

            <Label
                x:Name="StatusLabel"
                FontAttributes="Italic"
                FontSize="16"
                HorizontalOptions="Center"
                Text=""
                TextColor="White" />
        </VerticalStackLayout>
    </Grid>
</ScrollView>

Enfin, remplacez le contenu du MainPage.xaml.cs fichier avec le code suivant:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void PayButton_Clicked(object sender, EventArgs e)
    {            
        PayButton.IsEnabled = false;            
        await Task.Delay(3000);
        PayButton.IsEnabled = true;            
        await DisplayAlert("Success", "Your payment was processed successfully.", "OK");
    }
}

Si vous exécutez l’application maintenant, vous verrez une belle interface graphique qui simule le traitement pendant 3 secondes avant d’afficher un affichage de dispositiont indiquant que la tâche a été exécutée avec succès:

Pendant ce temps, l’utilisateur pourrait penser que quelque chose s’est mal passé car il n’y a pas d’indicateur visuel que quelque chose se passe dans les coulisses. Amélilons ce comportement en ajoutant des fenêtres contextuelles à l’application.

La première solution que je veux vous montrer implique d’utiliser le Popup .net Maui Contrôle de Progress Telerik, qui présente plusieurs avantages:

Vous pouvez l’afficher dans n’importe quelle position dans votre application mobile ou de bureau.
Vous pouvez le montrer comme modal ou non modal.
Il comprend des animations que vous pouvez personnaliser pour afficher et cacher la fenêtre contextuelle.

Voyons comment créer des fenêtres contextuelles en utilisant ce contrôle étonnant.

Pour créer la fenêtre contextuelle, nous devons créer une instance de RadPopup avec le contenu souhaité. Personnellement, j’aime montrer des chargeurs dynamiques aux utilisateurs, donc j’ajouterai une animation Lottie à la fenêtre contextuelle. Pour ce faire, j’ai installé le SkiaSharp.Extended.UI.Maui package, ajoutant l’utilisation du UseSkiaSharp Méthode au constructeur à l’intérieur MauiProgram.cs:

...
builder
    .UseMauiApp<App>()
    .UseSkiaSharp()
    .UseTelerik()
...

Ensuite, j’ai personnalisé la fenêtre contextuelle avec une grille comme conteneur pour l’animation Lottie, démontrant la flexibilité du contrôle Radpopup:

<ContentPage
   ...
    xmlns:lottie="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI">
    ...
    <ScrollView>
        <Grid Padding="20">
                <telerik:RadPopup.Popup>
                    <telerik:RadPopup
                        x:Name="popup"
                        OutsideBackgroundColor="#E6000000"
                        Placement="Center"
                        VerticalOffset="8">
                        <Grid>
                            <lottie:SKLottieView
                                HeightRequest="300"
                                HorizontalOptions="Center"
                                RepeatCount="-1"
                                Source="animation.json"
                                WidthRequest="300" />
                        </Grid>
                    </telerik:RadPopup>
                </telerik:RadPopup.Popup>
            ...
    </ScrollView>
</ContentPage>

Dans le code ci-dessus, le OutsideBackgroundColor La propriété spécifie la couleur de la couche qui sépare la fenêtre contextuelle du contenu de la page, souvent utilisée pour bloquer l’interaction des utilisateurs avec les contrôles. De plus, le Placement La propriété vous permet de spécifier comment la fenêtre contextuelle s’aligne sur sa cible de placement, qui définit un élément par rapport à laquelle la fenêtre contextuelle est positionnée lorsqu’elle est ouverte.

Pour contrôler la visibilité de la fenêtre contextuelle, nous pouvons utiliser le IsOpen propriété, attribuant une valeur de true ou false:

private async void PayButton_Clicked(object sender, EventArgs e)
{
    popup.IsOpen = true;
    PayButton.IsEnabled = false;            
    await Task.Delay(3000);
    PayButton.IsEnabled = true;            
    popup.IsOpen = false;
    await DisplayAlert("Success", "Your payment was processed successfully.", "OK");
}

Avec les changements ci-dessus, la fenêtre contextuelle serait affichée comme suit:

Il est important de noter que le contenu contextuel apparaît centré car nous l’avons placé comme l’élément principal dans la grille principale. Si nous changeons l’emplacement de la fenêtre contextuelle en VerticalStackLayout contenant les informations sur la carte de crédit comme suit:

<VerticalStackLayout
    x:Name="cardContainer"
    Grid.Column="1"
    Spacing="5">
    <telerik:RadPopup.Popup>
        <telerik:RadPopup
            x:Name="popup"
            OutsideBackgroundColor="#E6000000"
            Placement="Center"
            PlacementTarget="{x:Reference cardContainer}"
            VerticalOffset="8">
            <Grid>
                <lottie:SKLottieView
                    HeightRequest="300"
                    HorizontalOptions="Center"
                    RepeatCount="-1"
                    Source="animation.json"
                    WidthRequest="300" />
            </Grid>
        </telerik:RadPopup>
    </telerik:RadPopup.Popup>
    <Label
        FontAttributes="Bold"
        FontSize="18"
        Text="Credit"
        TextColor="#34495E" />
    <Label Text="XXXX - XXXX - XXXX - XXXX" TextColor="#757575" />
</VerticalStackLayout>

La fenêtre contextuelle apparaît positionnée dans le VerticalStackLayout. Cela se produit car il détermine automatiquement que c’est son PlacementTarget:

Si vous ne voulez pas dépendre d’un emplacement dans le code XAML pour positionner votre fenêtre contextuelle, vous pouvez définir manuellement le PlacementTarget propriété avec une référence au contrôle auquel la fenêtre contextuelle sera alignée. Par exemple:

<telerik:RadPopup
    x:Name="popup"
    OutsideBackgroundColor="#E6000000"
    Placement="Center"
    PlacementTarget="{x:Reference cardContainer}"
    VerticalOffset="8">

Enfin, le contrôle popup Telerik propose le IsModal propriété. Si vous définissez cette propriété sur true, le contenu d’arrière-plan sera entièrement bloqué, empêchant l’utilisateur d’interagir avec lui, tandis que s’il est défini sur False, la fenêtre contextuelle peut être rejetée par l’utilisateur qui clique en dehors de celui-ci.

Si vous souhaitez utiliser la boîte à outils communautaire .net Maui pour créer des fenêtres contextuelles, installez d’abord le CommunityToolkit.Maui Package NuGet. Ensuite, accédez à la MauiProgram.cs fichier et ajouter la ligne suivante au constructeur:

builder
    .UseMauiApp<App>()
    .UseMauiCommunityToolkit()
    ...

Avec cela, nous sommes prêts à créer la popup. Pour cette approche, vous pouvez créer un nouveau fichier dans le projet en utilisant le .NET MAUI ContentView (XAML) modèle. À l’intérieur de la nouvelle page, ajoutez la référence de l’espace de noms pour la boîte à outils et modifiez le type de page en Popup. Enfin, définissez le contenu comme indiqué dans l’exemple suivant:

<toolkit:Popup
    x:Class="MauiPopupsDemo.Popups.PaymentLoader"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:lottie="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <Grid>
        <lottie:SKLottieView
            HeightRequest="300"
            HorizontalOptions="Center"
            RepeatCount="-1"
            Source="animation.json"
            WidthRequest="300" />
    </Grid>
</toolkit:Popup>

Puisque nous avons modifié le type de page dans le fichier XAML, nous devons également modifier le type qu’il hérite dans le code-bind:

public partial class PaymentLoader : Popup
{
    public PaymentLoader()
    {
        InitializeComponent();
    }
}

Une fois que nous avons construit la fenêtre contextuelle, nous pouvons utiliser les méthodes d’extension disponibles pour l’afficher et le masquer. Dans notre cas, nous le ferons dans le mode d’achèvement des paiements comme suit:

private async void PayButton_Clicked(object sender, EventArgs e)
{            
    var popup = new PaymentLoader();
    this.ShowPopup(popup);
    PayButton.IsEnabled = false;
    await Task.Delay(3000);
    PayButton.IsEnabled = true;
    popup.Close();
    await DisplayAlert("Success", "Your payment was processed successfully.", "OK");
}

Lorsque vous exécutez l’application, vous pouvez voir que la fenêtre contextuelle apparaît et disparaît correctement lorsque la tâche est terminée:

Ici, une implémentation personnalisée est nécessaire pour ajouter une superposition qui assombrit le contenu d’arrière-plan pendant que la fenêtre contextuelle est affichée. Cela sert de comportement modal et complète le CanBeDismissedByTappingOutsideOfPopup propriété, ce qui empêche l’utilisateur de rejeter la fenêtre contextuelle en tapotant à l’extérieur.

Le Tabots La bibliothèque est un projet open-source qui a évolué considérablement depuis sa première version. Pour l’installer, ajoutez le Mopups Package NuGet sur votre projet .net Maui, puis accédez à la MauiProgram.cs fichier et ajouter le ConfigureMopups méthode:

builder
    .UseMauiApp<App>()
    ...             
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    })
    .ConfigureMopups();

Ce plugin comprend une série de méthodes dans le PreBakedMopupService classe que vous pouvez utiliser pour afficher rapidement les fenêtres contextuelles. Par exemple, pour afficher un chargeur, vous pouvez utiliser le WrapTaskInLoader Méthode comme suit:

private async void PayButton_Clicked(object sender, EventArgs e)
{
    await PreBakedMopupService.GetInstance().WrapTaskInLoader(Process(), Colors.Blue, Colors.White, new List<string> { "Processing..." }, Colors.Black);                        
    await DisplayAlert("Success", "Your payment was processed successfully.", "OK");
}

private async Task Process()
{
    PayButton.IsEnabled = false;
    await Task.Delay(3000);
    PayButton.IsEnabled = true;
}

Avec l’implémentation ci-dessus, nous obtenons une fenêtre contextuelle comme indiqué ci-dessous:

Si vous souhaitez utiliser votre propre conception popup, vous devez créer une nouvelle page (dans mon exemple, il est nommé PaymentLoaderMopups.xaml) qui hérite de PopupPagecomme indiqué dans l’exemple suivant:

<popups:PopupPage
    x:Class="MauiPopupsDemo.Popups.PaymentLoaderMopups"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:lottie="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
    xmlns:popups="clr-namespace:Mopups.Pages;assembly=Mopups">
    <Grid>
        <lottie:SKLottieView
            HeightRequest="300"
            HorizontalOptions="Center"
            RepeatCount="-1"
            Source="animation.json"
            WidthRequest="300" />
    </Grid>
</popups:PopupPage>

Entre-temps, PaymentLoaderMopups.xaml.cs ressemblerait à ceci:

public partial class PaymentLoaderMopups : PopupPage
{
    public PaymentLoaderMopups()
    {
        InitializeComponent();
    }
}

Pour utiliser la nouvelle fenêtre contextuelle, nous pouvons utiliser MopupService.Instancequi contient un ensemble de méthodes pour effectuer des opérations avec la fenêtre contextuelle, comme la montrer et la cacher. Dans l’exemple suivant, nous montrons la fenêtre contextuelle pendant 3 secondes et la masquons une fois le traitement terminé:

private async void PayButton_Clicked(object sender, EventArgs e)
{
    await MopupService.Instance.PushAsync(new PaymentLoaderMopups());
    await Task.Delay(3000);
    await MopupService.Instance.PopAsync();
    await DisplayAlert("Success", "Your payment was processed successfully.", "OK");
}

Encore une fois, vous devez gérer une superposition qui apparaît et disparaît pendant que la fenêtre contextuelle est active. De même, je recommande de vérifier approfondie la page du référentiel, car vous y trouverez plusieurs exemples pour travailler avec le plugin de manière plus avancée.

Conclusion

Tout au long de ce didacticiel, vous avez appris trois façons de créer des fenêtres popups dans .net Maui, en les personnalisant autant que vous en avez besoin. C’est à votre tour d’agir et de fournir une meilleure expérience utilisateur en mettant en œuvre des fenêtres contextuelles dans vos projets.

Si vous souhaitez essayer Telerik UI pour .net Maui, vous pouvez commencer avec l’essai gratuit aujourd’hui!

Commencer

Source link

Création d’un exemple de page

Conclusion

Partager :