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.