Partager via

Picker

  • Article

La classe Picker .NET MAUI (.NET Multi-platform App UI) affiche une courte liste d’éléments, à partir de laquelle l’utilisateur peut en sélectionner un.

Picker définit les propriétés suivantes :

  • CharacterSpacing, de type double, est l’espacement entre les caractères de l’élément affiché par le Picker.
  • FontAttributes de type FontAttributes, dont la valeur par défaut est FontAtributes.None.
  • FontAutoScalingEnabled, de type bool, qui détermine si le texte respecte les préférences de mise à l’échelle définies dans le système d’exploitation. La valeur par défaut de cette propriété est true.
  • FontFamily de type string, dont la valeur par défaut est null.
  • FontSize de type double, dont la valeur par défaut est -1.0.
  • HorizontalTextAlignment, de type TextAlignment, est l’alignement horizontal du texte affiché par le Picker.
  • ItemsSource de type IList, la liste source d’éléments à afficher, qui est par défaut null.
  • SelectedIndex de type int, l’index de l’élément sélectionné, qui a par défaut la valeur -1.
  • SelectedItem de type object, l’élément sélectionné, qui est par défaut null.
  • ItemDisplayBinding, de type BindingBase, sélectionne la propriété qui sera affichée pour chaque objet dans la liste des éléments, si ItemSource est un objet complexe. Pour plus d’informations, consultez Remplir un Picker avec des données à l’aide de la liaison de données.
  • TextColor de type Color, la couleur utilisée pour afficher le texte.
  • TextTransform, de type TextTransform, qui définit s’il faut transformer la casse du texte.
  • Title de type string, dont la valeur par défaut est null.
  • TitleColor de type Color, la couleur utilisée pour afficher le texte Title.
  • VerticalTextAlignment, de type TextAlignment, est l’alignement vertical du texte affiché par le Picker.

Toutes les propriétés, à l’exception de ItemDisplayBinding, s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être mises en forme et que les propriétés peuvent être des cibles de liaisons de données. Les propriétés SelectedIndex et SelectedItem ont un mode de liaison par défaut de BindingMode.TwoWay, ce qui signifie qu’elles peuvent être les cibles de liaisons de données dans une application qui utilise le modèle-vue-vue modèle (MVVM). Pour obtenir plus d’informations sur la définition des propriétés de police, consultez les Polices.

Un Picker n’affiche aucune donnée lors de son affichage initial. Au lieu de cela, la valeur de sa propriété Title est affichée en tant qu’espace réservé, comme illustré dans la capture d’écran iOS suivante :

Capture d’écran de l’affichage du sélecteur initial.

Lorsque le Picker reçoit le focus, ses données sont affichées et l’utilisateur peut sélectionner un élément :

Capture d’écran de la sélection d’un élément dans un sélecteur.

Le Picker déclenche un événement SelectedIndexChanged lorsque l’utilisateur sélectionne un élément. Après la sélection, l’élément sélectionné est affiché par le Picker :

Capture d’écran du sélecteur après la sélection.

Il existe deux techniques pour remplir un Picker avec des données :

Définir la propriété ItemsSource

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">
  <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

L’élément x:Array nécessite un attribut Type indiquant le type des éléments dans le tableau.

Le code C# équivalent est :

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");

Picker picker = new Picker { Title = "Select a monkey" };
picker.ItemsSource = monkeyList;

Répondre à la sélection d’un élément

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 Sélection d’élément de Picker sur iOS.

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

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

Le code C# équivalent est :

Label 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];
  }
}

Dans cet exemple, le gestionnaire d’événements 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. Chaque élément de la collection ItemsSource est de type object, et doit donc être casté en string pour 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.

Remplir un Picker 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"
        ItemsSource="{Binding Monkeys}"
        ItemDisplayBinding="{Binding Name}" />

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

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

Dans cet exemple, la propriété ItemsSource établit une liaison de données à la propriété Monkeys du contexte de liaison, qui retourne une collection IList<Monkey>. 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épondre à la sélection d’un élément

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"
        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 :

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

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

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

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

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

La propriété SelectedItem établit une liaison de données à la propriété SelectedMonkey du contexte de liaison, 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 données de l’objet SelectedMonkey sont affichées dans l’interface utilisateur par les vues Label et Image.

Remarque

Les propriétés SelectedItem et SelectedIndex prennent en charge les liaisons bidirectionnelles par défaut.

Ajouter des données à la collection Items

Une autre méthode pour remplir un Picker avec des données consiste à ajouter les données à afficher à la collection Items en lecture seule, qui est de type IList<string>. Chaque élément de la collection doit être de type string. Les éléments peuvent être ajoutés en XAML en initialisant la propriété Items avec une liste d’éléments x:String :

<Picker Title="Select a monkey">
  <Picker.Items>
    <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>
  </Picker.Items>
</Picker>

Le code C# équivalent est :

Picker picker = new Picker { Title = "Select a monkey" };
picker.Items.Add("Baboon");
picker.Items.Add("Capuchin Monkey");
picker.Items.Add("Blue Monkey");
picker.Items.Add("Squirrel Monkey");
picker.Items.Add("Golden Lion Tamarin");
picker.Items.Add("Howler Monkey");
picker.Items.Add("Japanese Macaque");

Outre l’ajout de données à l’aide de la méthode Items.Add, les données peuvent également être insérées dans la collection à l’aide de la méthode Items.Insert.

Répondre à la sélection d’un élément

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, et la propriété SelectedIndex est mise à jour vers un entier représentant l’index de l’élément sélectionné dans la liste. 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 Sélection d’élément de Picker sur iOS.

L’exemple de code suivant montre la méthode du gestionnaire d’événements OnPickerSelectedIndexChanged, qui est exécutée 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 = picker.Items[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 Items. Étant donné que chaque élément de la collection Items est un string, il peut être affiché par un Label sans nécessiter de cast.

Remarque

Un Picker peut être initialisé pour afficher un élément spécifique en définissant la propriété SelectedIndex. Toutefois, la propriété SelectedIndex doit être définie après l’initialisation de la collection Items.