Premiers pas avec List Picker dans Telerik UI pour Xamarin

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.

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 > 

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é.

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:

  

  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. ?

  ---