Fermer

mars 20, 2020

Interface utilisateur Telerik pour Xamarin Custom (Templated) Picker control


Dans le cadre de la version Telerik R1 2020 nous avons publié une série de sélecteurs pour Xamarin.Forms. Dans les articles de blog précédents, nous avons examiné les commandes Sélecteur de date / heure et Sélecteur de liste et les fonctionnalités qu'elles fournissent. Il est temps de vous familiariser avec notre contrôle Sélecteur personnalisé (modèle).

Le sélecteur modèle dans L'interface utilisateur Telerik pour Xamarin est un contrôle qui vous permet d'adapter une sélection d'élément avec un modèle personnalisé, couvrant ainsi tout scénario potentiel dont vous pourriez avoir besoin pour votre initiative de développement mobile.

 Sélecteur personnalisé pour Xamarin

Comme dans les sélecteurs List et DateTime, ses éléments sont affichés dans une fenêtre contextuelle. Le sélecteur de modèles possède un certain nombre de fonctionnalités qui vous permettent de définir le texte qui sera affiché lorsqu'un élément du sélecteur est sélectionné, de personnaliser entièrement ce qui sera visualisé dans la fenêtre contextuelle du sélecteur et de personnaliser l'en-tête et le pied de page de la fenêtre contextuelle.

Dans ce billet de blog, je vais vous familiariser avec le nouveau contrôle Sélecteur de modèles (personnalisé) et les fonctionnalités qu'il propose.

Sélecteur de modèles dans l'interface utilisateur Telerik pour Xamarin – Caractéristiques principales:

  • Modèle de sélecteur : définir un modèle pour les éléments, ainsi que celui sélectionné.
  • Format DisplayString : choisissez le texte à afficher lorsqu'un élément de la liste est sélectionné.
  • API de style flexible : stylisez les éléments , popup, en-tête et pied de page du sélecteur.
  • Prise en charge des commandes : commandes pour effacer un élément sélectionné, ouvrir et fermer la boîte de dialogue. De plus, la fenêtre contextuelle expose une commande Accepter qui est déclenchée lorsque vous cliquez sur le bouton OK et une commande Annuler qui est déclenchée lorsque vous cliquez sur le bouton Annuler.

Modèle de sélecteur

Vous pouvez entièrement personnaliser l'apparence du sélecteur de modèles. La propriété de modèle de sélecteur vous permet de choisir les éléments à afficher dans la fenêtre contextuelle après avoir ouvert le sélecteur de modèles. Nous vous offrons également la possibilité de personnaliser l'en-tête et le pied de page via les propriétés HeaderTemplate et FooterTemplate .

Notre sélecteur de modèles pour Xamarin offre les fonctionnalités utiles d'un texte d'espace réservé. Les développeurs peuvent définir le texte à afficher lorsqu'aucun élément n'est sélectionné, indiquant ainsi à l'utilisateur final les données qu'il doit saisir, par ex. "Sélectionnez la couleur." Vous pouvez définir un texte à l'aide de la propriété Placeholder ou personnaliser l'apparence par défaut via la propriété PlaceholderTemplate .

 Modèle de sélecteur Sélecteur personnalisé Xamarin

Vous pouvez en savoir plus sur le modèle de sélecteur dans l'interface utilisateur de Telerik pour les échantillons Xamarin TemplatedPicker / FirstLook .

Format DisplayString

La propriété DisplayStringFormat définit le texte qui sera affiché lorsqu'un élément est sélectionné, et vous pouvez également appliquer une mise en forme à une chaîne lorsque un élément est sélectionné.

API de style flexible

Vous pouvez styliser n'importe quelle partie du contrôle du sélecteur de liste. Voici une liste des API de style que nous avons exposées:

  • PlaceholderLabelStyle
  • DisplayLabelStyle

Pour styliser la fenêtre contextuelle, vous devez utiliser la propriété TemplatedPicker.SelectorSetting . La propriété fournit les options suivantes pour styliser les boutons:

  • PopupViewStyle
  • HeaderStyle
  • HeaderLabelStyle
  • FooterStyle
  • boutons à l'intérieur du pied de page – AcceptButtonStyle et CancelButtonStyle

, vous avez la possibilité de définir une couleur d'arrière-plan en dehors de la fenêtre contextuelle à l'aide de PopupOutsideBackgroundColor .

Modifiez le texte de l'en-tête Popup à l'aide de HeaderLabelText et définissez une icône ou un texte différent vers AcceptButtonText et CancelButtonText.

Dites-nous ce que vous pensez

Nous aimerions savoir ce que vous pensez du contrôle du sélecteur personnalisé et comment nous pouvons continuer pour l'améliorer. Si vous avez des idées de fonctionnalités à ajouter, n'hésitez pas à partager ces informations avec nous sur notre interface utilisateur Telerik pour Xamarin Feedback Portal .

N'oubliez pas de consulter les différentes démos du contrôle dans notre SDK Sample Browser et l'interface utilisateur Telerik pour Xamarin Démos .

Si vous n'avez pas encore essayé la suite Telerik UI pour Xamarin prenez-la faites un tour avec un essai gratuit de 30 jours, offrant toutes les fonctionnalités et les commandes à votre disposition à un coût nul.

Commencez votre essai

Bon codage avec nos commandes! Si vous êtes curieux de connaître les sélecteurs de date et d'heure, n'oubliez pas de consulter notre article – Premiers pas avec le sélecteur de date et d'heure pour Xamarin . Ou si vous avez besoin d'un ListPicker dans votre application mobile et la fonctionnalité de boucle, consultez le sélecteur de liste pour le blog Xamarin .





Source link