L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Découvrez le contrôle RadPopUp pour les formulaires Xamarin
Jetons un coup d'œil au contrôle Telerik RadPopUp pour Xamarin Forms.
Parfois, nous devons présenter certaines informations importantes sur notre application afin de pouvoir alerter l'utilisateur de manière rapide, précise et concise d'exiger toute leur attention dans le but d'une réaction rapide et d'une compréhension efficace de l'information.
Cette information peut être présentée si l'utilisateur effectue une action spécifique. Examinons un exemple de scénario!
Imaginons que nous ayons une application de liste de courses de supermarché et que nous devions ajouter un produit, mais il s'avère que nous avons sélectionné le mauvais et que nous voulons le supprimer. Ce serait un bon scénario pour demander à l'utilisateur: Etes-vous sûr de vouloir supprimer ce produit? Avec ce simple message d'alerte, nous nous assurons que l'utilisateur ne supprime pas le mauvais produit par erreur. 💁♀
Pour ces types de scénarios, nous pouvons utiliser RadPopUp. Dans cet article, nous détaillerons le sujet en couvrant les points suivants:
✔ Ajouter des espaces de noms
✔ Apprendre la structure de RadPopup et connaître ses propriétés
✔ Donner vie à notre RadPopup
Tout d'abord… Quoi Dois-je besoin?
⚠ Important: Telerik propose un essai gratuit qui nous permet d'explorer tous les composants exceptionnels que nous pouvons utiliser dans nos applications.
Commençons !!!
Ajoutez le Espaces de noms suivants
Les premiers éléments que vous devez ajouter sont les espaces de noms qui contiennent le RadPopup:
➖ Telerik.XamarinForms.Primitives :
xmlns: telerikPrimitives = "clr-namespace: Telerik.XamarinForms .Primitives; assembly = Telerik.XamarinForms.Primitives "
➖ Telerik.XamarinForms.Input:
xmlns: telerikInput = "clr-namespace: Telerik.XamarinForms.Input; assembly = Telerik.XamarinForms.Input"
👩🏫 Apprentissage de la structure du RadPopup et de ses propriétés
Tout d'abord, comprenons la structure de ce contrôle!
- Nous devons ajouter un contrôle qui fonctionne comme un pont pour afficher le message lorsque nous Cliquez sur. Dans ce cas, nous ajouterons un bouton.
< Button HorizontalOptions = " Center "
VerticalOptions = " CenterAndExpand "
HeightRequest = " 60 "
WidthRequest = " 150 "[19659026] Texte = " Supprimer l'article "
Cliqué sur = " DisplayPopup " >
< / Button >
- Dans le champ déclaré ci-dessus, nous ajoutons les lignes suivantes:
< telerikPrimitives: RadPopup.Popup >
</ ] telerikPrimitives: RadPopup.Popup >
- Dans les étiquettes déclarées à l'étape précédente, faisons ceci!
< telerikPrimitives: RadPopup x: Nom = " PopUpSample "
OutsideBackgroundColor = " #FECDED "
IsModal = " False " > [19659061] </ telerikPrimitives: RadPopup >
Comme vous l'avez remarqué, nous avons ajouté deux propriétés intéressantes à l'étape précédente:
➖ IsModal : Accepte une valeur booléenne. Indique comment PopUp se comportera. Voyons:
▪ Si la valeur est True lorsque vous cliquez en dehors du PopUp, ce contrôle reste à l'écran.
▪ Si la valeur est False lorsque vous cliquez en dehors du PopUp, ce contrôle disparaîtra de l'écran.
➖ OutsideBackgroundColor : Indique la couleur de l'arrière-plan que le reste de l'écran prendra lorsque le PopUp sera affiché.
- Maintenant, nous ajoutons les fonctionnalités de la bordure PopUp.
< telerikPrimitives: RadBorder CornerRadius = " 10 "
BackgroundColor = " # CDE1FE " >
</ telerikPrimitives: RadBorder >
C'est fait! Il ne vous reste plus qu'à ajouter le design que vous souhaitez que le PopUp contienne. Dans ce cas, nous ajouterons le message de confirmation pour supprimer le produit sélectionné dans notre exemple de liste de courses de supermarché. Nous mettrons les boutons de: «Accepter» et «Annuler» .
Voyons l'exemple complet, selon les étapes indiquées: [19659003] XAML
< StackLayout Margin = " 0,40,0,0 " >
< Button HorizontalOptions = " Center "
VerticalOptions = " Début "
HeightRequest = " 60 "
WidthRequest = " 150 "
Texte = " Cliquez ici pour évaluer "
Clicked = " ShowPopup " >
< telerikPrimitives: RadPopup.Popup >
< telerikPrimitives: RadPopup x: Nom = " PopUpSample "
OutsideBackgroundColor = " #FECDED "
IsModal = ] " False " >
< telerikPrimitives: RadBorder CornerRadius = " 10 "
BackgroundColor = " # CDE1FE " >
< Grid Padding = " ] 25 " >
< Grid.RowDefinitions >
< RowDefinition Height = " * " />
< RowDefinition Height = " * " /> [19659155] </ Grid.RowDefinitions >
< Grid.ColumnDefinitions >
< ColumnDefinition Largeur = " 120 " />
< ColumnDefinition Width = " 120 " />
</ Grid.ColumnDefinitions >
< Label Grid.Column = " ] 0 " Grid.Row = " 0 " Grid.ColumnSpan = " 2 " TextColor = " Red " HorizontalTextAlignment = " Center " Texte = " ¿Está seguro de que desea éliminar este producto? " />
< Button Grid.Column = " 0 " Grid.Row = " 1 " Texte [19659021] = " Acept ar " />
< Button Grid.Column = " 1 " Grid .Row = " 1 " Texte = " Cancelar " Cliqué sur [19659021] = " ClosePopup " />
</ Grid >
</ telerikPrimitives: RadBorder [19659022]>
</ telerikPrimitives: RadPopup >
</ telerikPrimitives: RadPopup.Popup >
</ Button >
</ StackLayout >
Pour cet exemple, nous ajoutons dans notre CodeBehind les événements d'ouverture et de fermeture de RadPopup.
Pour le bouton d'annulation, nous ajoutons l'événement ClosePopUp :
private void ClosePopup (expéditeur de l'objet, EventArgs e)
{
PopUpSample.IsOpen = faux;
}
Pour notre bouton principal, qui est celui qui ouvre le RadPopUp, nous ajoutons l'événement ShowPopUp :
private void ShowPopup (expéditeur de l'objet, EventArgs e)
{
PopUpSample.IsOpen = vrai;
}
Et voilaaa !!! Notre RadPopup est implémenté! 😍
Merci d'avoir lu mon article! 💚💕
Références:
Source link