Festlegen der ItemsSource-Eigenschaft einer Auswahl
Das Beispiel herunterladenDie Auswahlansicht ist ein Steuerelement zum Auswählen eines Textelements aus einer Liste von Daten. In diesem Artikel wird erläutert, wie Sie eine Auswahl durch Festlegen der ItemsSource-Eigenschaft mit Daten auffüllen und wie Sie auf die Elementauswahl durch den Benutzer reagieren.
Xamarin.Forms 2.3.4 hat die Picker Ansicht erweitert, indem sie die Möglichkeit hinzugefügt hat, 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 Sie die TextColor -Eigenschaft auf festlegen Color.
Auffüllen einer Auswahl mit Daten
Ein Picker kann mit Daten aufgefüllt werden, indem seine ItemsSource Eigenschaft auf eine IList Auflistung festgelegt wird. Jedes Element in der Auflistung muss vom Typ objectsein oder davon abgeleitet sein. Elemente können in XAML hinzugefügt werden, indem die ItemsSource Eigenschaft aus 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 eines Elements gleichzeitig. Wenn ein Benutzer ein Element auswählt, wird das SelectedIndexChanged Ereignis ausgelöst, die SelectedIndex Eigenschaft wird auf eine ganze Zahl aktualisiert, die den Index des ausgewählten Elements in der Liste darstellt, und die SelectedItem Eigenschaft wird auf die aktualisiert, die das object ausgewählte Element darstellt. Die SelectedIndex -Eigenschaft ist eine nullbasierte Zahl, die das vom Benutzer ausgewählte Element angibt. Wenn kein Element ausgewählt ist, ist dies der Fall, wenn das Picker zum ersten Mal erstellt und initialisiert wird, SelectedIndex -1.
Hinweis
Das Verhalten der Elementauswahl in einem Picker kann unter iOS mit einer plattformspezifischen Angepasst werden. Weitere Informationen finden Sie unter Steuern der Auswahlelementauswahl.
Das folgende Codebeispiel zeigt, wie Sie den SelectedItem Eigenschaftswert aus dem Picker in XAML abrufen:
<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));
Darüber hinaus kann ein Ereignishandler ausgeführt werden, wenn das SelectedIndexChanged Ereignis 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 ruft den SelectedIndex Eigenschaftswert ab und verwendet den Wert, um das ausgewählte Element aus der ItemsSource Auflistung abzurufen. Dies entspricht funktional dem Abrufen des ausgewählten Elements aus der SelectedItem -Eigenschaft. Beachten Sie, dass jedes Element in der ItemsSource Auflistung vom Typ objectist und daher zur Anzeige in ein string umgewandelt werden muss.
Hinweis
Ein Picker kann initialisiert werden, um ein bestimmtes Element anzuzeigen, indem die - oder SelectedItem -SelectedIndexEigenschaften festgelegt werden. Diese Eigenschaften müssen jedoch nach dem Initialisieren der ItemsSource Auflistung festgelegt werden.
Auffüllen einer Auswahl mit Daten mithilfe der Datenbindung
Ein Picker kann auch mit Daten aufgefüllt werden, indem die Datenbindung verwendet wird, um seine ItemsSource Eigenschaft an eine IList Sammlung zu binden. In XAML wird dies mit der Binding Markuperweiterung 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 Eigenschaftsdaten werden an die Monkeys Eigenschaft des verbundenen Ansichtsmodells gebunden, das eine IList<Monkey> Auflistung zurückgibt. Das folgende Codebeispiel zeigt die Monkey Klasse, 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; }
}
Bei der Bindung an eine Liste von Objekten muss mitgeteilt Picker werden, welche Eigenschaft von jedem Objekt angezeigt werden soll. Dies wird erreicht, indem die ItemDisplayBinding -Eigenschaft auf die erforderliche Eigenschaft für jedes Objekt festgelegt wird. In den obigen Codebeispielen ist festgelegt, dass die Picker einzelnen Monkey.Name Eigenschaftenwerte angezeigt werden.
Reagieren auf die Elementauswahl
Die Datenbindung kann verwendet werden, um ein Objekt auf den SelectedItem Eigenschaftswert festzulegen, 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 Monkeygebunden. Wenn der Benutzer daher ein Element in Pickerauswählt, wird die SelectedMonkey -Eigenschaft auf das ausgewählte Monkey Objekt festgelegt. Die SelectedMonkey Objektdaten werden in der Benutzeroberfläche von Label und-Ansichten Image angezeigt:
Hinweis
Beachten Sie, dass die SelectedItem Eigenschaften und SelectedIndex beide standardmäßig bidirektionale Bindungen unterstützen.