Picker

Uživatelské rozhraní .NET Multi-Platform App UI (.NET MAUI) Picker zobrazuje krátký seznam položek, ze kterých může uživatel vybrat položku.

Picker definuje následující vlastnosti:

• CharacterSpacing, typu double, je mezery mezi znaky položky zobrazené znakem Picker.
• FontAttributes typu FontAttributes, který má výchozí hodnotu FontAtributes.None.
• FontAutoScalingEnabled, typu bool, který určuje, zda text respektuje předvolby škálování nastavené v operačním systému. Výchozí hodnota této vlastnosti je true.
• FontFamily typu string, který má výchozí hodnotu null.
• FontSizedoubletypu , který má výchozí hodnotu -1.0.
• HorizontalTextAlignment, typu TextAlignment, je vodorovné zarovnání textu zobrazeného pomocí Picker.
• ItemsSource typu IList, zdrojový seznam položek, které se mají zobrazit, což je výchozí nullhodnota .
• SelectedIndex typ int, index vybrané položky, která je výchozí hodnota -1.
• SelectedItemobjecttypu , vybraná položka, která je ve výchozím nastavení null.
• ItemDisplayBinding, typu BindingBase, vybere vlastnost, která se zobrazí pro každý objekt v seznamu položek, pokud ItemSource je komplexní objekt. Další informace najdete v tématu Naplnění nástroje pro výběr dat dat pomocí datové vazby.
• TextColor typu Color, barva použitá k zobrazení textu.
• TextTransform, typu TextTransform, který definuje, zda se má transformovat velikost písmen textu.
• Title typu string, který má výchozí hodnotu null.
• TitleColor typu Color, barva použitá k zobrazení Title textu.
• VerticalTextAlignment, typu TextAlignment, je svislé zarovnání textu zobrazeného sadou Picker.

Všechny vlastnosti, s výjimkou ItemDisplayBinding, jsou podporovány BindableProperty objekty, což znamená, že mohou být stylovány a vlastnosti mohou být cílem datových vazeb. SelectedItem Vlastnosti SelectedIndex mají výchozí režim BindingMode.TwoWayvazby , což znamená, že mohou být cílem datových vazeb v aplikaci, která používá model-View-ViewModel (MVVM). Informace o nastavení vlastností písma naleznete v tématu Písma.

Při Picker prvním zobrazení se nezobrazují žádná data. Místo toho se hodnota jeho Title vlastnosti zobrazí jako zástupný symbol, jak je znázorněno na následujícím snímku obrazovky s iOSem:

Když získá fokus Picker , zobrazí se její data a uživatel může vybrat položku:

SelectedIndexChanged Aktivuje Picker událost, když uživatel vybere položku. Vybraná položka se zobrazí Pickerv následujícím výběru:

Existují dvě techniky pro naplnění Picker daty:

• ItemsSource Nastavení vlastnosti na data, která se mají zobrazit. Toto je doporučená technika pro přidání dat do Picker. Další informace naleznete v tématu Nastavení ItemsSource vlastnost.
• Přidání dat, která se mají zobrazit do Items kolekce. Další informace naleznete v tématu Přidání dat do kolekce Položky.

Nastavení vlastnosti ItemsSource

Hodnotu A Picker lze naplnit daty nastavením jeho ItemsSource vlastnosti na kolekci IList . Každá položka v kolekci musí být typu nebo odvozena od object. Položky lze přidat v XAML inicializací ItemsSource vlastnosti z pole položek:

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

Poznámka:

Element x:Array vyžaduje Type atribut označující typ položek v poli.

Ekvivalentní kód jazyka C# je:

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;

Reakce na výběr položek

A Picker podporuje výběr jedné položky najednou. Když uživatel vybere položku, SelectedIndexChanged událost se aktivuje, SelectedIndex vlastnost se aktualizuje na celé číslo představující index vybrané položky v seznamu a SelectedItem vlastnost se aktualizuje na reprezentaci object vybrané položky. Vlastnost SelectedIndex je číslo založené na nule označující položku, kterou uživatel vybral. Pokud není vybrána žádná položka, což je případ prvního Picker vytvoření a inicializace, SelectedIndex bude -1.

Poznámka:

Chování výběru položek v systému Picker iOS lze přizpůsobit pomocí specifické platformy. Další informace najdete v tématu Výběr položky v iOSu.

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

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

Ekvivalentní kód jazyka C# je:

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

V tomto příkladu obslužná rutina události získá SelectedIndex hodnotu vlastnosti a použije hodnotu k načtení vybrané položky z ItemsSource kolekce. Toto je funkčně ekvivalentní načtení vybrané položky z SelectedItem vlastnosti. Každá položka v kolekci ItemsSource je typu object, a proto musí být přetypována na string zobrazení.

Poznámka:

Hodnotu A Picker lze inicializovat tak, aby zobrazovala konkrétní položku nastavením SelectedIndex nebo SelectedItem vlastností. Tyto vlastnosti však musí být nastaveny po inicializaci ItemsSource kolekce.

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

A Picker lze také naplnit daty pomocí datové vazby k vytvoření vazby jeho ItemsSource vlastnosti na kolekci IList . V XAML se toho dosahuje s rozšířením Binding značek:

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

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

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

V tomto příkladu ItemsSource jsou data vlastnosti svázaná s Monkeys vlastností kontextu vazby, která vrací kolekci IList<Monkey> . Následující příklad kódu ukazuje Monkey třídu, 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 vazbě na seznam objektů musí být uvedena Picker vlastnost, která se má zobrazit z každého objektu. Toho dosáhnete nastavením ItemDisplayBinding vlastnosti na požadovanou vlastnost z každého objektu. V příkladech kódu výše je nastavena tak, Picker aby zobrazovala každou Monkey.Name hodnotu vlastnosti.

Reakce na výběr položek

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

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

Ekvivalentní kód jazyka C# je:

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

Data SelectedItem vlastnosti se váže na SelectedMonkey vlastnost kontextu vazby, který je typu Monkey. Proto když uživatel vybere položku v objektu Picker, SelectedMonkey vlastnost bude nastavena na vybraný Monkey objekt. Data SelectedMonkey objektu se zobrazí v uživatelském rozhraní podle Label zobrazení a Image zobrazení.

Poznámka:

SelectedIndex Obě vlastnosti SelectedItem ve výchozím nastavení podporují obousměrné vazby.

Přidání dat do kolekce Položek

Alternativním procesem Picker naplnění dat je přidání dat, která se mají zobrazit do kolekce jen Items pro čtení, což je typ IList<string>. Každá položka v kolekci musí být typu string. Položky lze přidat v XAML inicializací Items vlastnosti se seznamem x:String položek:

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

Ekvivalentní kód jazyka C# je:

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

Kromě přidání dat pomocí Items.Add metody lze data také vložit do kolekce pomocí Items.Insert metody.

Reakce na výběr položek

A Picker podporuje výběr jedné položky najednou. Když uživatel vybere položku, SelectedIndexChanged událost se aktivuje a SelectedIndex vlastnost se aktualizuje na celé číslo představující index vybrané položky v seznamu. Vlastnost SelectedIndex je číslo založené na nule označující položku, kterou uživatel vybral. Pokud není vybrána žádná položka, což je případ prvního Picker vytvoření a inicializace, SelectedIndex bude -1.

Poznámka:

Chování výběru položek v systému Picker iOS lze přizpůsobit pomocí specifické platformy. Další informace najdete v tématu Výběr položky v iOSu.

Následující příklad kódu ukazuje metodu OnPickerSelectedIndexChanged obslužné rutiny události, která se spustí 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 = picker.Items[selectedIndex];
  }
}

Tato metoda získá SelectedIndex hodnotu vlastnosti a použije hodnotu k načtení vybrané položky z Items kolekce. Vzhledem k tomu, že každá položka v kolekci Items je , stringmohou být zobrazeny bez Label nutnosti přetypování.

Poznámka:

Hodnotu A Picker lze inicializovat tak, aby zobrazovala konkrétní položku nastavením SelectedIndex vlastnosti. SelectedIndex Vlastnost však musí být nastavena po inicializaci Items kolekce.