Les popups peuvent aider les applications de commerce électronique pour alerter l’utilisateur à des informations importantes.
Dans une application, il existe de nombreuses façons de capter l’attention de l’utilisateur et d’afficher les informations pertinentes. L’une des méthodes les plus efficaces est l’utilisation popups—Codes d’informatique qui apparaissent au-dessus du contenu de l’écran actuel, vous permettant de communiquer des messages clés ou d’inviter l’utilisateur à prendre des décisions importantes.
Par exemple, vous pouvez montrer un message comme:
«Êtes-vous sûr de vouloir supprimer ce disque?»
Ainsi que des boutons «oui» et «non». Ce type de popup est couramment utilisé pour confirmer des actions sensibles ou irréversibles. Mais il peut également servir un objectif purement informatif, comme:
« Enregistrer à jour avec succès! »
Maintenant, imaginez que vous avez une application de vente au détail et que vous souhaitez informer les utilisateurs d’une nouvelle promotion. Vous pouvez montrer une fenêtre contextuelle la première fois que l’utilisateur ouvre l’application, avec un message accrocheur et un bouton d’appel à l’action comme «Offre de réclamation.» Cela aide non seulement l’utilisateur à voir la promotion, mais aide également à stimuler plus de ventes dans l’application.
Les popups sont également idéaux pour tenir les utilisateurs informés des événements en temps réel, comme les mises à jour de commande, les erreurs de validation ou les confirmations de réussite.
En résumé, les popups sont un composant super utile, polyvalent et facile à mettre en œuvre– surtout lorsque vous travaillez avec . où vous pouvez profiter de la progression de l’interface utilisateur de Telerik pour Contrôle popup .net Maui pour les intégrer rapidement et magnifiquement dans votre application.
Le contrôle popup .net Maui vous permet d’afficher des fenêtres contextuelles personnalisées dans votre application – parfaite pour afficher des alertes, des messages importants ou obtenir une confirmation et une entrée utilisateur.
Ce contrôle fait partie de l’interface utilisateur de Telerik pour Bibliothèque .net Mauiqui propose plus de 60 composants d’interface utilisateur conçus par des professionnels. Il est idéal pour construire des applications modernes et multiplateforme avec une expérience utilisateur poli.
Configuration initiale
Configurons la configuration de base afin que vous puissiez utiliser le contrôle directement dans votre fichier XAML.
Pour l’instant, nous nous concentrerons uniquement sur cette configuration initiale. À mesure que nous avançons, vous verrez comment les autres détails sont implémentés étape par étape.
Tout d’abord, assurez-vous d’avoir les conditions préalables suivantes prêtes:
Une fois que toutes les conditions préalables sont définies, vous êtes prêt à commencer! 😎
Étape 1: Ajouter l’espace de noms Telerik
Accédez à votre fichier XAML et ajoutez l’espace de noms suivant:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
Étape 2: Enregistrez Telerik dans Mauiprogram.cs
Dirigez-vous vers votre Mauprogram.cs fichier et, à l’intérieur du CreateMauiApp Méthode, ajouter .UseTelerik()Pour permettre les commandes de Telerik. Placez-le juste au-dessus .UseMauiApp<App>()comme ça:
using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
Explorer les modaux pris en charge
Maintenant que vous avez l’implémentation dont vous avez besoin pour commencer, explorons les différents types de fenêtres contextuelles que vous pouvez utiliser. Avec le contrôle popup Telerik .net Maui, vous pouvez facilement le configurer pour vous comporter comme l’un ou l’autre modal ou non modal, Selon l’interaction que vous souhaitez créer.
Mais qu’est-ce que cela signifie? 🤔 Permettez-moi d’expliquer les caractéristiques de chacun:
Ce type de fenêtre contextuelle apparaît au-dessus du contenu et bloque tout l’écran. L’utilisateur ne peut pas interagir avec rien d’autre avant de répondre à la fenêtre contextuelle.
Par exemple, si un message apparaît comme, « Êtes-vous sûr de vouloir mettre à jour l’enregistrement? » l’utilisateur doit appuyer Accepter ou Annuler Avant de continuer à utiliser l’application.
📝 Ceci est idéal pour des actions importantes ou sensibles.
Cela apparaît également au-dessus du contenu mais ne bloque pas l’écran. L’utilisateur peut taper en dehors de la fenêtre contextuelle pour le rejeter ou simplement l’ignorer et continuer à utiliser l’application. Il est utile pour afficher des messages rapides ou des suggestions informatives.
⚠️ Si le message est critique ou nécessite une confirmation, il est préférable d’utiliser un popup modal Pour s’assurer que l’utilisateur le voit et répond en conséquence.
Comment l’implémenter dans le code?
Pour spécifier si la fenêtre contextuelle doit être modale ou non modale, vous définissez simplement le IsModal propriété True ou Falseselon le comportement que vous souhaitez.
Ci-dessous, vous pouvez voir un exemple complet de la façon de définir la fenêtre contextuelle dans XAML et de définir le IsModal propriété.
<telerik:RadPopup.Popup>
<telerik:RadPopup x:Name="popup"
IsModal="True"
OutsideBackgroundColor="#66000000"
Placement="Center">
<telerik:RadBorder BackgroundColor="#F9F9F9"
BorderColor="#DFDFDF"
BorderThickness="1"
CornerRadius="8"
WidthRequest="300">
<VerticalStackLayout Padding="12"
Spacing="12">
<Label TextColor="Black"
Text="With Telerik Popup for .NET MAUI you can easily add modal popups to your application in order to draw attention to important information or receive user input."
LineBreakMode="WordWrap" />
<telerik:RadTemplatedButton HorizontalOptions="Center"
Content="Close"
Clicked="ClosePopup" />
</VerticalStackLayout>
</telerik:RadBorder>
</telerik:RadPopup>
</telerik:RadPopup.Popup>
C # code-bind
Voici comment vous gérez l’ouverture et la fermeture de la popup:
private void ClosePopup(object sender, EventArgs e) => popup.IsOpen = false;
private void ShowPopup(object sender, EventArgs e) => popup.IsOpen = true;
Voici une image qui montre le résultat:
Animations disponibles
La popup .net Maui prend en charge les animations intégrées qui jouent lorsque la fenêtre contextuelle est affichée ou masquée. Vous avez également un contrôle total sur le Type d’animation, c’est durée et le assouplissement (Le rythme auquel l’animation fonctionne).
🔧 Définition du type d’animation
Vous pouvez configurer l’animation à l’aide du AnimationType propriété, qui accepte les options suivantes:
Fade(défaut): Le popup s’estompe en douceur.None: Désactive complètement les animations. La fenêtre contextuelle apparaîtra ou disparaîtra instantanément, sans effet visuel.Zoom: La fenêtre contextuelle apparaît avec un effet de zoom, comme s’il se dilatait ou se contracte du centre.
Durée de l’animation
Vous pouvez également définir, en millisecondes, combien de temps vous voulez que l’animation dure en utilisant le AnimationDuration propriété. La valeur par défaut est de 300 ms.
🌀 Assouplement de l’animation
Celui-ci vous permet de contrôler le rythme de l’animation – comment il accélère et décélère au fil du temps.
Vous pouvez choisir parmi plusieurs options de soulagement, telles que:
Easing.Linear(défaut): L’animation fonctionne à une vitesse constante du début à la fin.Easing.CubicIn: L’animation commence lentement puis accélère.Easing.BounceOut: L’animation se termine par un effet de rebond ludique.
N’hésitez pas à explorer d’autres options de soulagement disponibles dans la classe Microsoft.Maui.ason pour correspondre au style de votre application.
Vous avez également la possibilité de configurer des propriétés qui contrôlent la façon dont la fenêtre contextuelle est positionnée à l’écran. Les principales options incluent:
🔹 PlacementTarget: L’élément de référence par rapport à lequel la fenêtre contextuelle sera affichée lors de son ouverture.
🔹 Placement: Spécifie comment la fenêtre contextuelle sera alignée par rapport PlacementTarget. Cette propriété accepte une valeur de type PlacementMode et prend en charge les options suivantes:
- Le Haut, Droite, Gauche et Bas Les options définissent de quel côté de l’élément de référence, la fenêtre contextuelle apparaîtra. Par exemple, si Haut est sélectionné, la fenêtre contextuelle sera affichée juste au-dessus de l’élément; si Droite est choisi, il apparaîtra à sa droite, et ainsi de suite.
- Centre Posera la fenêtre contextuelle directement au centre de la cible de placement.
- Relatif Aligne le coin supérieur gauche de la popup avec le coin supérieur gauche de la cible de placement.
🔹 HorizontalOffset et VerticalOffset Laissez-vous affiner la position de la fenêtre contextuelle en le déplaçant horizontalement ou verticalement par rapport à son élément d’ancrage.
En d’autres termes, ils contrôlent la quantité d’espace entre la fenêtre contextuelle et l’élément auquel il est attaché.
Voici un exemple de la façon dont il peut être mis en œuvre:
<telerik:RadTemplatedButton HorizontalOptions="Center"
VerticalOptions="Start"
Content="Show popup"
Clicked="ShowPopup">
<telerik:RadPopup.Popup>
<telerik:RadPopup x:Name="popup"
Placement="Bottom"
HorizontalOffset="-50"
VerticalOffset="8">
<telerik:RadBorder WidthRequest="200"
CornerRadius="8"
BackgroundColor="#F9F9F9"
BorderColor="#DFDFDF"
BorderThickness="1"
Padding="12">
<Label TextColor="Black"
Text="The .NET MAUI Popup supports useful properties, which enable you to position it depending on your requirements." />
</telerik:RadBorder>
</telerik:RadPopup>
</telerik:RadPopup.Popup>
</telerik:RadTemplatedButton>
Vous pouvez également personnaliser le style de cet élément!
En utilisant le OutsideBackgroundColor Propriété, vous pouvez définir la couleur de l’arrière-plan extérieur de la fenêtre contextuelle. Par défaut, il est défini sur Color.Transparent.
⚠️ Important: Si vous utilisez une valeur hexadécimale, assurez-vous de suivre le #Aarrggbb format.
Voici un exemple de la façon de l’appliquer:
<telerik:RadTemplatedButton HorizontalOptions="{OnPlatform Default=Center, MacCatalyst=Start, WinUI=Start}"
VerticalOptions="{OnPlatform Default=Center, MacCatalyst=Start, WinUI=Start}"
Content="Show customized popup"
Clicked="ShowPopup">
<telerik:RadPopup.Popup>
<telerik:RadPopup x:Name="popup"
VerticalOffset="8"
Placement="{OnPlatform Android=Center, iOS=Center}"
OutsideBackgroundColor="#267A7BBA">
<telerik:RadBorder BackgroundColor="#F9F9F9"
BorderColor="#7A7BBA"
BorderThickness="1"
CornerRadius="8"
WidthRequest="300"
Padding="12">
<Label TextColor="Black"
Text="Telerik offers a wide range of .NET MAUI controls to enable your cross-platform development of native Windows, macOS, Android and iOS applications."
LineBreakMode="WordWrap" />
</telerik:RadBorder>
</telerik:RadPopup>
</telerik:RadPopup.Popup>
</telerik:RadTemplatedButton>
Conclusion
Vous êtes prêt! Vous êtes maintenant prêt à implémenter la popup .net Maui dans vos applications. J’espère que vous profitez pleinement de ce contrôle puissant pour offrir une expérience utilisateur incroyable! 💚💕
Si vous avez des questions, n’hésitez pas à les laisser tomber dans les commentaires.
Rendez-vous la prochaine fois! 🙋♀️
Références
Prêt à commencer?
Telerik UI pour .net Maui est livré avec un essai gratuit de 30 jours, alors essayez le popup plus 65+ autres composants .net Maui natifs pour vous-même.
Source link