Nastavení vlastnosti ItemsSource výběru

Download Sample Stažení ukázky

Zobrazení Výběr je ovládací prvek pro výběr textové položky ze seznamu dat. Tento článek vysvětluje, jak naplnit výběr daty nastavením vlastnosti ItemsSource a jak reagovat na výběr položky uživatelem.

Xamarin.Forms 2.3.4 vylepšuje zobrazení přidáním možnosti naplnit ho daty nastavením vlastnosti a načtením vybrané položky PickerItemsSource z vlastnosti SelectedItem . Kromě toho můžete změnit barvu textu vybrané položky nastavením TextColor vlastnosti na Color .

Naplnění výběru daty

Objekt Picker může být naplněn daty nastavením jeho vlastnosti na ItemsSourceIList kolekci. Každá položka v kolekci musí být typu nebo odvozená z object typu . Položky lze přidat v jazyce XAML inicializací ItemsSource vlastnosti z pole položek:

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

Poznámka

Všimněte x:Array si, že Type element vyžaduje atribut označující typ položek v poli.

Ekvivalentní kód jazyka C# je zobrazen níže:

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;

Reakce na výběr položky

Podporuje Picker výběr po jedné položce. Když uživatel vybere položku, událost se otevře, vlastnost se aktualizuje na celé číslo představující index vybrané položky v seznamu a vlastnost se aktualizuje na reprezentující SelectedIndexChangedSelectedIndexSelectedItemobject vybranou položku. Vlastnost SelectedIndex je číslo od nuly označující položku, kterou uživatel vybral. Pokud není vybraná žádná položka, což je případ, kdy se položka poprvé vytvoří a Picker inicializuje, SelectedIndex bude -1.

Poznámka

Chování při výběru položek v souboru se v iOSu může přizpůsobit Picker s konkrétní platformou. Další informace najdete v tématu Řízení výběru položek.

Následující příklad kódu ukazuje, jak načíst SelectedItem hodnotu vlastnosti z v Picker jazyce XAML:

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

Ekvivalentní kód jazyka C# je zobrazen níže:

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

Kromě toho lze obslužnou rutinu události spustit při SelectedIndexChanged spuštění události:

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

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

Tato metoda získá hodnotu vlastnosti a použije ji k načtení SelectedIndex vybrané položky z ItemsSource kolekce. To je funkčně ekvivalentní načtení vybrané položky z SelectedItem vlastnosti . Všimněte si, že každá ItemsSource položka v kolekci je typu , a proto musí být object přetypován na string pro zobrazení.

Poznámka

Objekt Picker může být inicializován pro zobrazení konkrétní položky nastavením SelectedIndex vlastností nebo SelectedItem . Tyto vlastnosti je však nutné nastavit po inicializaci ItemsSource kolekce.

Naplnění výběru dat pomocí datové vazby

Objekt může být také naplněn daty pomocí datové vazby pro vazbu Picker své ItemsSource vlastnosti na IList kolekci. V jazyce XAML se toho dosahuje pomocí Binding rozšíření značek:

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

Ekvivalentní kód jazyka C# je zobrazen níže:

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

Data ItemsSource vlastnosti se vážou Monkeys na vlastnost připojeného modelu zobrazení, který vrací IList<Monkey> kolekci. Následující příklad kódu ukazuje třídu Monkey , která obsahuje čtyři vlastnosti:

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

Při vytváření vazby na seznam objektů musí být u každého objektu nastavena vlastnost , Picker která se má zobrazit. Toho lze dosáhnout nastavením ItemDisplayBinding vlastnosti na požadovanou vlastnost z každého objektu. Ve výše uvedených příkladech kódu Picker je objekt nastavený tak, aby se každá Monkey.Name hodnota vlastnosti zobrazuje.

Reakce na výběr položky

Datovou vazbu lze použít k nastavení objektu na hodnotu SelectedItem vlastnosti při změně:

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

Ekvivalentní kód jazyka C# je zobrazen níže:

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

Data SelectedItem vlastnosti se vážou SelectedMonkey na vlastnost připojeného modelu zobrazení, která je typu Monkey . Proto když uživatel vybere položku v objektu , vlastnost se nastaví PickerSelectedMonkey na vybraný Monkey objekt. Data SelectedMonkey objektu se zobrazují v uživatelském rozhraní pomocí zobrazení a LabelImage :

Picker Item Selection

Poznámka

Všimněte SelectedItemSelectedIndex si, že obě vlastnosti a podporují ve výchozím nastavení dvousměnné vazby.