Définition de la propriété ItemsSource d’un sélecteur

La vue Sélecteur est un contrôle permettant de sélectionner un élément de texte dans une liste de données. Cet article explique comment remplir un sélecteur avec des données en définissant la propriété ItemsSource et comment répondre à la sélection d’éléments par l’utilisateur.

Xamarin.Forms 2.3.4 a amélioré la Picker vue en ajoutant la possibilité de la remplir avec des données en définissant sa ItemsSource propriété et en récupérant l’élément sélectionné à partir de la SelectedItem propriété. En outre, la couleur du texte de l’élément sélectionné peut être modifiée en définissant la TextColor propriété sur un Color.

Remplissage d’un sélecteur avec des données

Un Picker peut être rempli avec des données en définissant sa propriété ItemsSource sur une collection IList. Chaque élément de la collection doit être de type object, ou en dériver. Les éléments peuvent être ajoutés en XAML en initialisant la propriété ItemsSource à partir d’un tableau d’éléments :

<Picker x:Name="picker"
        Title="Select a monkey"
        TitleColor="Red">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>Squirrel Monkey</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japanese Macaque</x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

Remarque

Notez que l’élément x:Array nécessite un attribut Type qui indique le type des éléments du tableau.

Le code C# équivalent est illustré ci-dessous :

var monkeyList = new List<string>();
monkeyList.Add("Baboon");
monkeyList.Add("Capuchin Monkey");
monkeyList.Add("Blue Monkey");
monkeyList.Add("Squirrel Monkey");
monkeyList.Add("Golden Lion Tamarin");
monkeyList.Add("Howler Monkey");
monkeyList.Add("Japanese Macaque");

var picker = new Picker { Title = "Select a monkey", TitleColor = Color.Red };
picker.ItemsSource = monkeyList;

Réponse à la sélection d’éléments

Un Picker prend en charge la sélection d’un élément à la fois. Lorsqu’un utilisateur sélectionne un élément, l’événement SelectedIndexChanged se déclenche, la propriété SelectedIndex est mise à jour vers un entier représentant l’index de l’élément sélectionné dans la liste, et la propriété SelectedItem est mise à jour vers l’object représentant l’élément sélectionné. La propriété SelectedIndex est un nombre de base zéro indiquant l’élément sélectionné par l’utilisateur. Si aucun élément n’est sélectionné, ce qui est le cas lorsque le Picker est initialement créé et initialisé, SelectedIndex est égal à -1.

Remarque

Le comportement de sélection d’élément dans un Picker peut être personnalisé sur iOS avec un Picker propre à la plateforme. Pour plus d’informations, consultez Contrôle de la sélection d’éléments du sélecteur.

L’exemple de code suivant montre comment récupérer la SelectedItem valeur de propriété à partir du Picker code XAML :

<Label Text="{Binding Source={x:Reference picker}, Path=SelectedItem}" />

Le code C# équivalent est illustré ci-dessous :

var monkeyNameLabel = new Label();
monkeyNameLabel.SetBinding(Label.TextProperty, new Binding("SelectedItem", source: picker));

En outre, un gestionnaire d’événements peut être exécuté lorsque l’événement SelectedIndexChanged se déclenche :

void OnPickerSelectedIndexChanged(object sender, EventArgs e)
{
  var picker = (Picker)sender;
  int selectedIndex = picker.SelectedIndex;

  if (selectedIndex != -1)
  {
    monkeyNameLabel.Text = (string)picker.ItemsSource[selectedIndex];
  }
}

Cette méthode obtient la valeur de la propriété SelectedIndex, et utilise cette valeur pour récupérer l’élément sélectionné à partir de la collection ItemsSource. Cela équivaut fonctionnellement à récupérer l’élément sélectionné à partir de la propriété SelectedItem. Notez que chaque élément de la ItemsSource collection est de type object, et doit donc être casté en vue string de l’affichage.

Remarque

Un Picker peut être initialisé pour afficher un élément spécifique en définissant la propriété SelectedIndex ou SelectedItem. Toutefois, ces propriétés doivent être définies après l’initialisation de la collection ItemsSource.

Remplissage d’un sélecteur avec des données à l’aide de la liaison de données

Un Picker peut également être rempli avec des données en utilisant une liaison de données pour lier sa propriété ItemsSource à une collection IList. En XAML, ceci est accompli avec l’extension de balisage Binding :

<Picker Title="Select a monkey"
        TitleColor="Red"
        ItemsSource="{Binding Monkeys}"
        ItemDisplayBinding="{Binding Name}" />

Le code C# équivalent est illustré ci-dessous :

var picker = new Picker { Title = "Select a monkey", TitleColor = Color.Red };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.ItemDisplayBinding = new Binding("Name");

Les ItemsSource données de propriété sont liées à la Monkeys propriété du modèle de vue connecté, qui retourne une IList<Monkey> collection. L’exemple de code suivant montre la classe Monkey, qui contient quatre propriétés :

public class Monkey
{
  public string Name { get; set; }
  public string Location { get; set; }
  public string Details { get; set; }
  public string ImageUrl { get; set; }
}

Lors de la liaison à une liste d’objets, il faut indiquer au Picker quelle propriété afficher à partir de chaque objet. Vous devez pour cela définir la propriété ItemDisplayBinding sur la propriété requise à partir de chaque objet. Dans les exemples de code ci-dessus, le Picker est défini pour afficher chaque valeur de propriété Monkey.Name.

Réponse à la sélection d’éléments

La liaison de données peut être utilisée pour définir un objet sur la valeur de propriété SelectedItem lorsqu’elle change :

<Picker Title="Select a monkey"
        TitleColor="Red"
        ItemsSource="{Binding Monkeys}"
        ItemDisplayBinding="{Binding Name}"
        SelectedItem="{Binding SelectedMonkey}" />
<Label Text="{Binding SelectedMonkey.Name}" ... />
<Label Text="{Binding SelectedMonkey.Location}" ... />
<Image Source="{Binding SelectedMonkey.ImageUrl}" ... />
<Label Text="{Binding SelectedMonkey.Details}" ... />

Le code C# équivalent est illustré ci-dessous :

var picker = new Picker { Title = "Select a monkey", TitleColor = Color.Red };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.SetBinding(Picker.SelectedItemProperty, "SelectedMonkey");
picker.ItemDisplayBinding = new Binding("Name");

var nameLabel = new Label { ... };
nameLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Name");

var locationLabel = new Label { ... };
locationLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Location");

var image = new Image { ... };
image.SetBinding(Image.SourceProperty, "SelectedMonkey.ImageUrl");

var detailsLabel = new Label();
detailsLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Details");

Les SelectedItem données de propriété sont liées à la SelectedMonkey propriété du modèle d’affichage connecté, qui est de type Monkey. Par conséquent, lorsque l’utilisateur sélectionne un élément dans le Picker, la propriété SelectedMonkey est définie sur l’objet Monkey sélectionné. Les SelectedMonkey données d’objet sont affichées dans l’interface utilisateur par Label et Image vues :

Remarque

Notez que les propriétés et SelectedIndex les SelectedItem propriétés prennent en charge les liaisons bidirectionnelle par défaut.

Liens connexes

• API sélecteur