Festlegen der ItemsSource-Eigenschaft einer Auswahl

Die Auswahlansicht ist ein Steuerelement zum Auswählen eines Textelements aus einer Datenliste. In diesem Artikel wird erläutert, wie Sie eine Auswahl mit Daten auffüllen, indem Sie die ItemsSource-Eigenschaft festlegen und wie Sie auf die Elementauswahl durch den Benutzer reagieren.

Xamarin.Forms 2.3.4 hat die Picker Ansicht verbessert, indem die Möglichkeit hinzugefügt wird, sie mit Daten aufzufüllen, indem sie ihre ItemsSource Eigenschaft festlegen und das ausgewählte Element aus der SelectedItem Eigenschaft abrufen. Darüber hinaus kann die Farbe des Texts für das ausgewählte Element geändert werden, indem die TextColor Eigenschaft auf eine Colorfestgelegt wird.

Auffüllen einer Auswahl mit Daten

Ein Picker kann mit Daten gefüllt werden, indem seine ItemsSource-Eigenschaft auf eine IList-Sammlung gesetzt wird. Jedes Element in der Sammlung muss vom Typ object sein oder davon abgeleitet werden. Elemente können in XAML hinzugefügt werden, indem die ItemsSource-Eigenschaft mit einem Array von Elementen initialisiert wird:

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

Hinweis

Bedenken Sie, dass Sie für das Element x:Array ein Type-Attribute benötigen, das die Elementtypen im Array angibt.

Der entsprechende C#-Code ist unten dargestellt:

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;

Reagieren auf die Elementauswahl

Ein Picker unterstützt die Auswahl von jeweils einem Element. Wenn ein/e Benutzer*in ein Element auswählt, wird das SelectedIndexChanged-Ereignis ausgelöst, die SelectedIndex-Eigenschaft wird auf eine Ganzzahl aktualisiert, die den Index des ausgewählten Elements in der Liste darstellt, und die SelectedItem-Eigenschaft wird auf die object-Eigenschaft aktualisiert, die das ausgewählte Element darstellt. Die Eigenschaft SelectedIndex ist eine auf Null basierende Zahl, die das vom Benutzer ausgewählte Element angibt. Wenn kein Element ausgewählt ist, was bei der ersten Erstellung und Initialisierung von Picker der Fall ist, ist SelectedIndex -1.

Hinweis

Elementauswahlverhalten in einer Picker kann auf iOS plattformspezifisch angepasst werden. Weitere Informationen finden Sie unter Steuern der Auswahlelementauswahl.

Das folgende Codebeispiel zeigt, wie der SelectedItem Eigenschaftswert aus dem Picker XAML-Code abgerufen wird:

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

Der entsprechende C#-Code ist unten dargestellt:

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

Außerdem kann ein Ereignis-Handler ausgeführt werden, wenn das Ereignis SelectedIndexChanged ausgelöst wird:

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

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

Diese Methode erhält den SelectedIndex-Eigenschaftswert und verwendet den Wert, um das ausgewählte Element aus der ItemsSource-Sammlung abzurufen. Dies ist funktionell gleichbedeutend mit dem Abrufen des ausgewählten Elements aus der Eigenschaft SelectedItem. Beachten Sie, dass jedes Element in der ItemsSource Auflistung vom Typ objectist und daher in eine string Anzeige umwandeln muss.

Hinweis

Ein Picker kann durch Einstellen der Eigenschaften SelectedIndex oder SelectedItem zur Anzeige eines bestimmten Elements initialisiert werden. Diese Eigenschaften müssen jedoch nach der Initialisierung der ItemsSource-Sammlung festgelegt werden.

Auffüllen einer Auswahl mit Daten mithilfe der Datenbindung

Ein Picker kann auch mit Daten gefüllt werden, indem seine ItemsSource-Eigenschaft mittels Datenbindung an eine IList-Sammlung gebunden wird. In XAML wird dies mit der Markup-Erweiterung Binding erreicht:

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

Der entsprechende C#-Code ist unten dargestellt:

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

Die ItemsSource Eigenschaftendaten werden an die Monkeys Eigenschaft des verbundenen Ansichtsmodells gebunden, die eine IList<Monkey> Auflistung zurückgibt. Das folgende Codebeispiel zeigt die Klasse Monkey, die vier Eigenschaften enthält:

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

Beim Binden an eine Liste von Objekten muss dem Picker mitgeteilt werden, welche Eigenschaft von jedem Objekt angezeigt werden soll. Dies wird erreicht, indem die ItemDisplayBinding-Eigenschaft auf die gewünschte Eigenschaft des jeweiligen Objekts gesetzt wird. In den obigen Codebeispielen wird Picker so eingestellt, dass jeder Monkey.Name-Eigenschaftswert angezeigt wird.

Reagieren auf die Elementauswahl

Die Datenbindung kann verwendet werden, um ein Objekt auf den SelectedItem-Eigenschaftswert zu setzen, wenn er sich ändert:

<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}" ... />

Der entsprechende C#-Code ist unten dargestellt:

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

Die SelectedItem-Eigenschaftsdaten werden an die SelectedMonkey-Eigenschaft des verbundenen Ansichtsmodells vom Typ Monkey gebunden. Wenn der/die Benutzer*in also ein Element im Picker auswählt, wird die Eigenschaft SelectedMonkey auf das ausgewählte Monkey-Objekt gesetzt. Die SelectedMonkey Objektdaten werden auf der Benutzeroberfläche durch Label und Image Ansichten angezeigt:

Hinweis

Beachten Sie, dass die SelectedItem beiden SelectedIndex Eigenschaften standardmäßig bidirektionale Bindungen unterstützen.

Verwandte Links

• Auswahl-API