Fermer

février 4, 2020

Premiers pas avec List Picker dans Telerik UI pour XamarinUne minute de lecture

XamarinT2 Light_1200x303


Besoin d'un contrôle Sélecteur qui vous permet de sélectionner un seul élément dans une liste d'éléments? – Découvrez le contrôle Telerik UI pour Xamarin List Picker fraîchement publié.

Pour les développeurs Xamarin, le nouveau List Picker dans Telerik UI pour Xamarin peut être utilisé dans divers scénarios. Par exemple, vous pouvez choisir une couleur dans une liste de couleurs, créer une liste de tailles et en choisir une, etc.

Nous avons ajouté des fonctionnalités fantaisistes au contrôle du sélecteur de liste, ainsi que la possibilité de personnaliser entièrement son apparence et apparence grâce à l'API de style flexible.

 sélecteur de liste pour xamarin "title =" sélecteur de liste pour xamarin "/></p data-recalc-dims=

Dans cet article de blog, je vais vous familiariser avec le nouveau contrôle List Picker et les fonctionnalités qu'il propose.

Caractéristiques:

  • Boucle – une fonctionnalité très utile si vous souhaitez boucler une liste d'éléments et les faire défiler à l'infini
  • Modèles définissez un modèle pour les éléments de liste, ainsi que celui sélectionné
  • UI Vrtualization les éléments visuels sont réutilisés lors du défilement pour améliorer les performances
  • Afficher le format de chaîne – choisir le texte à afficher lorsqu'un élément de la liste est sélectionné
  • API de style flexible – style 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

Boucle

Le sélecteur de liste pour Xamarin fournit une fonctionnalité de bouclage qui vous permet de boucler la liste des éléments après rea ching le dernier élément. Il est très facile d'activer cette fonction, il suffit de définir la propriété List Picker IsLooping sur true et votre liste d'éléments pourra défiler à l'infini.

< telerikInput: RadListPicker Placeholder = "Sélectionnez la couleur:"

ItemsSource = "{{ Couleurs contraignantes} "

IsLooping = " Vrai "> [19659002] < telerikInput: RadListPicker.ItemTemplate >

] < DataTemplate >

</ DataTemplate >

</ telerikInput: RadListPicker.ItemTemplate >

</ telerikInput: RadListPicker >

 sélecteur de liste de boucles pour xamarin "title =" looping list sélecteur pour xamarin "/></p data-recalc-dims=

Modèles

Vous pouvez entièrement personnaliser l'apparence des éléments du sélecteur de liste via la propriété ItemTemplate et personnaliser l'apparence de l'élément sélectionné via la SelectedItemTemplate propriété. La liste elle-même est visualisée dans une fenêtre contextuelle, nous vous offrons donc également la possibilité de personnaliser son en-tête et son pied de page via les propriétés HeaderTemplate et FooterTemplate . Le sélecteur de liste pour Xamarin offre les fonctionnalités utiles du 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électionner 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 .

Exemple de définition ItemTemplate

< DataTemplate x: Key = "itemTemplate" >

< Étiquette Texte = [19659025] "{Population contraignante}"

BackgroundColor = "LightYellow" [19659002] HorizontalTextAlignment = "Centre"

[1945903030] ] VerticalTextAlignment = "Center" />

</ DataTemplate >

SelectedItemTemplate

< [1 9659022] DataTemplate x: Key = "selectedItemTemplate" >

< Étiquette [19659023] Texte = "{Binding Name}"

BackgroundColor = "LightBlue "

HorizontalTextAlignment = " Centre "

] VerticalTextAlignment = "Centre" />

</ DataTemplate >

PlaceholderTemplate

< ControlTemplate x: Key = "footerTemplate" >

< StackLayout Orientation = [19659025] "Horizontal"

Espacement = "0"

Options horizontales = "FillAndExpand"

BackgroundColor = "# B73562" >

< Bouton Texte Texte ] = "Annuler"

TextColor = "Blanc" [19659002] BackgroundColor = "Transparent"

Commande = "{TemplateBinding C ancelCommand} " />

< Bouton Texte = " OK "

TextColor = " Blanc ""

] BackgroundColor = "Transparent"

Commande = "{TemplateBinding AcceptCommand}" />

</ StackLayout > ]

</ ControlTemplate >

Pour plus de détails sur les modèles de sélecteur de liste et un exemple de démonstration, consultez l'article Modèles de notre

DisplaySting

Le La propriété DisplayStringFormat définit le texte qui sera affiché lorsqu'un élément est sélectionné, et vous pouvez également l'appliquer lorsqu'un élément est sélectionné.

 Afficher le sélecteur de liste de format de chaîne xamarin

De plus, nous avons ajouté une propriété DisplayMemberPath qui vous permet de définir le chemin de la propriété qui doit être affichée en tant que DisplayString.

API de style flexible

Nous avons exposé une API de style flexible qui vous permet de styliser facilement le contrôle List Picker. Par exemple:

  • La propriété ItemStyle vous permet de styliser les éléments de la liste et le SelectedItemStyle l'élément sélectionné
  • SelectionHighlightStyle
  • PlaceholderLabelStyle permet pour styliser l'espace réservé du sélecteur de liste, et si l'espace réservé par défaut ne correspond pas à vos besoins, vous pouvez le personnaliser à l'aide de la propriété PlaceholderTemplate .
  • DisplayLabelStyle vous donne la possibilité de styliser le texte affiché lorsqu'un élément de la liste est sélectionné.

De plus, nous avons exposé une API de style pour la fenêtre contextuelle. Vous pouvez facilement styliser son en-tête, son pied de page, annuler et accepter les boutons. Il vous suffit de définir la propriété ListPicker.SelectorSettings . La propriété est de type PickerPopupSelectorSettings et fournit les options de style suivantes pour la fenêtre contextuelle et sa vue d'en-tête:

  • PopupHeaderView
  • HeaderStyle
  • HeaderLabelStyle [19659167] FooterStyle
  • Pour ajouter les boutons à l'intérieur du pied de page, utilisez AcceptButtonStyle et CancelButtonStyle
  • Définissez une couleur d'arrière-plan en dehors de la fenêtre contextuelle à l'aide de PopupOutsideBackgroundColor
  • Modifiez le texte l'en-tête Popup à l'aide des propriétés HeaderLabelText
  • Modifiez le texte à l'intérieur des boutons d'acceptation et d'annulation, ou par exemple, vous pouvez définir une icône, via les propriétés AcceptButtonText et CancelButtonText [19659170] Nous avons un article styling dans notre documentation qui décrit les capacités de style du contrôle.

    Demo

    Créons une démo qui vous permet de choisir un genre de musique fr

    Voici un exemple de modèle de genre:

    public classe Genre

    {

    public Genre ( chaîne musicGenre)

    [1945902828] {

    ceci .MusicGenre = musicGenre;

    }

    public string MusicGenre { get ]; set ; }

    }

    et le modèle Music:

    public classe Musique

    {

    public Musique ( chaîne artiste, chaîne chanson, Color iconColor)

    {

    ceci ] .Artist = artist;

    this .Song = song;

    ] ceci .IconColor = iconColor;

    }

    public chaîne Artiste { prenez ; set ; }

    public chaîne Chanson { get ; set ; }

    public Color IconColor { get ; set ; }

    }

    voici le ViewModel:

    public classe ViewModel: NotifyPropertyChangedBase

    ] {

    public ViewModel ()

    [1945903535] {

    ceci .Genres = nouveau ObservableItemCollection () [)

    {

    nouveau [19659137] Genre ( "Rock alternatif" ),

    nouveau Genre ( " Nouvelle vague "),

    nouveau Genre ( "Jazz" ),

    nouveau Genre ( "Pop Rock" ),

    nouveau Genre ( ] "Punk Rock" ),

    nouveau Genre ( "Progressive House" ),

    };

    this .RecentlyPlayed = new ObservableItemCollection ( )

    {

    nouvelle Musique ( "Nirvana" "Smells Like Teen Spirit" Color.FromH ex ( "# F3C163" )),

    nouveau Musique ( "Queen" "" Je veux me libérer "Color.FromHex (" # 007AFF ")),

    ] nouveau Musique ( "Depeche Mode" "Personal Jesus" Color.FromHex ( "# CE3A6D" [19659024])),

    nouveau Musique ( "The Police" " Personal Jesus "Color.FromHex (" # CE3A6D ")),

    nouveau [[19659137] Musique ( "Green Day" "Basket Case" Color.FromHex ( "# F3C163" )), [19659002] nouvelle Musique ( "David Guetta ft. Ne-Yo, Akon" "Play Hard" Color.FromHex ([1965902525)] "# CE3A6D" )),

    nouveau Musique ( "Louis Armstrong" ] "Quel monde merveilleux" Color.FromHex ( "# 007AFF" )),

    nouvelle Musique ( "Radiohead" "Creep" Color.FromHex ( "# F3C163" )),

    nouveau Musique ( "The Clash" "Dois-je rester ou devrais-je Aller "Color.FromHex (" # 007AFF ")),

    nouveau [19659137]La musique ( "Blondie" "Call Me" Color.FromHex ( "# CE3A6D" )),

    nouveau Musique ( "Calvin Harris" "Call Me" Color.FromHex ( "" # CE3A6D ")),

    nouveau Musique (" Ray Charles "[19659025] "J'ai une femme" Color.FromHex ( "# 007AFF" )),

    nouvelle Musique ( "Red Hot Chili Peppers" "Airplane" Color.FromHex ( "# F3C163" )),

    nouveau Musique ( "The Beatles" "Help" Color.FromHex ( "# 007AFF ")),

    };

    }

    public ObservableItemCollection Genres { get ; set ; }

    public ObservableItemCollection RecentPlayed { get ; set ; }

    }

    Voici comment le sélecteur de liste est défini dans XAML:

    < ContentPage.BindingContext > [19659002] < local: ViewModel />

    </ ContentPage. BindingContext >

    < ContentPage.Content >

    < Grille >

    < Grid.RowDefinitions > [19659002] < RowDefinition Hauteur = "60" />

    < RowDefinition Hauteur = "Auto" />

    < RowDefinition Hauteur = ] "" " />

    < RowDefinition Hauteur = " Auto " />

    </ Grid.RowDefinitions >> [19659002] < StackLayout Grid.Row = "0" BackgroundColor = " #EAEAEA " HeightRequest = " 60 ">

    < Image Source = "music.png" VerticalOptions = "End" HorizontalOptions [19659024] = "Fin" />

    </ StackLayout >

    < StackLayout Margin = "16, 40, 16, 0" Grid.Row = "1" >

    < Texte Texte = "Listen to Top Music Genres" TextColor = "# 007AFF" FontSize = "22" Margin = "0,0,0,24" />

    < Étiquette Texte = "Genre musical:" TextColor = "Noir" FontSize = "15" FontAttributes = [19659025] "Bold" [19659023] Marge = "0, 0, 0, 21" />

    <[19659022] telerikInput: RadListPicker x: Name = "genrePicker"

    Espace réservé = "Sélectionnez le genre de musique à écouter"

    ItemsSource = "{Binding Genres}"

    IsLooping = "Vrai"

    [1945902222] SelectionHighlightStyle = "{StaticResource SelectionHighlightStyle}"

    DisplayStringFormat = "Votre choix est: {0}"

    DisplayMemberPath = "MusicGenre"

    DisplayLabelStyle = "{StaticResource displayLabelStyle}"

    PlaceholderLabelStyle = "{StaticResource placeholderLabelStyle}" >

    < telerikInput: RadListPicker.ItemTemplate >

    < DataTemplate >

    < Label Text = "{Binding MusicGenre}"

    HorizontalTextAlignment = "Centre"

    ] VerticalTextAlignment = "Centre" />

    </ DataTemplate >

    </ telerikInput: RadListPicker.ItemTemplate > [19659002] < telerikInput: RadListPicker.SelectorSettings >

    < telerikInput: PickerPopupSelectorSettings HeaderLabelText = "Genre"

    HeaderStyle = "{StaticResource HeaderStyle}"

    HeaderLabelStyle [19659024] = "{StaticResource HeaderLabelStyle}" />

    </ telerikInput: RadListPicker.SelectorSettings >

    </ telerikInput: RadListPicker >>

    < telerikPrimitives: RadBorder BorderThickness = "0, 0, 0, 1" BorderColor = "# 919191" />

    < Label Texte = "Récemment Plaied: " TextColor = " # 919191 " FontAttributes = " Bold " FontSize = " 15 " Margin = "0, 25, 0, 0" />

    </ StackLayout >

    < telerikDataControls: RadListView Grid.Row = "2" ItemsSource = "{Binding RecentPlayed}" "[19659024]>

    < telerikDataControls: RadListView.ItemTemplate >

    ] < DataTemplate >

    < listView: ListViewTemplateCell >

    < listView: ListViewTemplateCell.View >

    < Grille >

    < StackLayout Orientation = "Horizontal" Marge = "10, 15, 10 , 15 " Options verticales = " Centre " Options horizontales = " Début ">

    < telerikPrimitives: RadBorder BorderColor = "{Binding IconColor}" BorderThickness = "3" BackgroundColor = "{Binding IconColor}" WidthRequest = "5" HeightRequest = " 5 " />

    < Étiquette Texte = " {Reliure Artiste} " FontSize = " 12 " FontAttributes = " Bold " TextColor = " Black " />

    < Étiquette Texte = "-" /> ]

    < Label Text = "{Binding Song}" FontSize ] = "12" TextColor = "# 919191" />

    </ StackLayout >

    [1945902222] </ Grille >

    </ listView: ListViewTemplateCell. Afficher >

    </ listView: ListViewTemplateCell >

    </ DataTemplate >

    < /[19659022[telerikDataControls:RadListViewItemTemplateréf1919909022>1945902219459006196590021945903219459033adListView>

    < StackLayout Grid.Row = "3" BackgroundColor = "# EAEAEA" HeightRequest [19659024] = "65" >

    < telerikPrimitives: RadBorder Options verticales = "CenterAndExpand"

    WidthRequest = "200" [19659002] HeightRequest = "40"

    ] HorizontalOptions = "CenterAndExpand" >

    < telerikInput: RadButton Text = "Play Music"

    CornerRadius = "20"

    Rembourrage = "10,5,10 , 5 "

    BorderColor = " # 007AFF "

    ] BorderWidth = "1"

    TextColor [19659024] = "# 007AFF"

    FontSize="15"

    Clicked="OnPlayButtonClicked"

    BackgroundColor="Transparent"/>

    </telerikPrimitives:RadBorder>

    </StackLayout>

    </Grid>

    </ContentPage.Content>

    You also need to add the needed styles to the page Resources:

    <ContentPage.Resources>

    <ResourceDictionary>

    <Style TargetType="Label" x:Key="placeholderLabelStyle">

    <Setter Property="TextColor" Value="#919191"/>

    </Style>

    <Style TargetType="Label" x:Key="displayLabelStyle">

    <Setter Property ="TextColor" Value="Black"/>

    <Setter Property="FontAttributes" Value="Bold"/>

    </Style>

    <Style TargetType="Label" x:Key="HeaderLabelStyle">

    <Setter Property="TextColor" Value="Black"/>

    <Setter Property="FontAttri butes" Value="Bold"/>

    <Setter Property="FontSize" Value="21"/>

    <Setter Property="HorizontalOptions" Value="Center"/>

    <Setter Property="VerticalOptions" Value="Center"/>

    </Style>

    <Style TargetType="telerikInput:PickerPopup HeaderView" x:Key="HeaderStyle">

    <Setter Property="BackgroundColor" Value="#F8F8F8"/>

    <Setter Property="HeightRequest" Value="64"/>

    </Style>

    <Style TargetType="telerikPrimitives:RadBorder" x:Key="SelectionHighlightStyle">

    <Setter Property[19659024]="BorderColor" Value="LightGray"/>

    <Setter Property="CornerRadius" Value="2"/>

    </Style>

    </ResourceDictionary>

    </ContentPage.Resources>

    This is the final result:

    list picker for xamarin

    Tell Us What You Think

    We would love to hear what you think about the List Picker control and how we can continue to improve it. If you have any ideas for features to add, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.

    Don’t forget to check out the various demos of the control in our SDK Sample Browser and the Telerik UI for Xamarin Demos application.

    If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trialoffering all the functionalities and controls at your disposal at zero cost.

    Start Your Trial

    Happy coding with our controls and stay with us! More blog posts with everything you need to know about our Date and Time Picker and Custom (Templated) Picker controls are on the way. 😊




Source link