Picker

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) Picker visualizza un breve elenco di elementi, da cui l'utente può selezionare un elemento.

Picker definisce le proprietà seguenti:

• CharacterSpacing, di tipo double, è la spaziatura tra i caratteri dell'elemento visualizzato da Picker.
• FontAttributes di tipo FontAttributes, che per impostazione predefinita è FontAtributes.None.
• FontAutoScalingEnabled, di tipo bool, che determina se il testo rispetta le preferenze di ridimensionamento impostate nel sistema operativo. Il valore predefinito di questa proprietà è true.
• FontFamily di tipo string, che per impostazione predefinita è null.
• FontSize di tipo double, che per impostazione predefinita è -1.0.
• HorizontalTextAlignment, di tipo TextAlignment, è l'allineamento orizzontale del testo visualizzato da Picker.
• ItemsSource di tipo IList, l'elenco di origine di elementi da visualizzare, che per impostazione predefinita è null.
• SelectedIndex di tipo int, l'indice dell'elemento selezionato, che per impostazione predefinita è -1.
• SelectedItem di tipo object, l'elemento selezionato, che per impostazione predefinita è null.
• ItemDisplayBinding, di tipo BindingBase, seleziona la proprietà che verrà visualizzata per ogni oggetto nell'elenco di elementi, se è ItemSource un oggetto complesso. Per altre informazioni, vedere Popolare una selezione con i dati usando il data binding.
• TextColor di tipo Color, il colore utilizzato per visualizzare il testo.
• TextTransform, di tipo TextTransform, che definisce se trasformare la combinazione di maiuscole e minuscole di testo.
• Title di tipo string, che per impostazione predefinita è null.
• TitleColor di tipo Color, il colore utilizzato per visualizzare il Title testo.
• VerticalTextAlignment, di tipo TextAlignment, è l'allineamento verticale del testo visualizzato da Picker.

Tutte le proprietà, ad eccezione di ItemDisplayBinding, sono supportate da BindableProperty oggetti , il che significa che possono essere stilizzati e che le proprietà possono essere destinazioni di data binding. Le SelectedIndex proprietà e SelectedItem hanno una modalità di associazione predefinita di BindingMode.TwoWay, il che significa che possono essere destinazioni di data binding in un'applicazione che usa il modello Model-View-ViewModel (MVVM). Per informazioni sull'impostazione delle proprietà dei tipi di carattere, vedere Tipi di carattere.

Un Picker oggetto non mostra dati quando viene visualizzato per la prima volta. Il valore della proprietà Title viene invece visualizzato come segnaposto, come illustrato nello screenshot iOS seguente:

Quando si ottiene lo Picker stato attivo, vengono visualizzati i dati e l'utente può selezionare un elemento:

Genera Picker un SelectedIndexChanged evento quando l'utente seleziona un elemento. Dopo la selezione, l'elemento selezionato viene visualizzato da Picker:

Esistono due tecniche per popolare un oggetto Picker con i dati:

• Impostazione della ItemsSource proprietà sui dati da visualizzare. Questa è la tecnica consigliata per l'aggiunta di dati a un oggetto Picker. Per altre informazioni, vedere Impostare la proprietà ItemsSource.
• Aggiunta dei dati da visualizzare alla Items raccolta. Per altre informazioni, vedere Aggiungere dati all'insieme Items.

Impostare la proprietà ItemsSource

Un Picker oggetto può essere popolato con i dati impostandone la ItemsSource proprietà su una IList raccolta. Ogni elemento della raccolta deve essere di o derivato da , digitare object. Gli elementi possono essere aggiunti in XAML inizializzando la ItemsSource proprietà da una matrice di elementi:

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

Nota

L'elemento x:Array richiede un Type attributo che indica il tipo degli elementi nella matrice.

Il codice C# equivalente è il seguente:

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;

Rispondere alla selezione di elementi

Un Picker oggetto supporta la selezione di un elemento alla volta. Quando un utente seleziona un elemento, viene generato l'evento SelectedIndexChanged , la SelectedIndex proprietà viene aggiornata a un numero intero che rappresenta l'indice dell'elemento selezionato nell'elenco e la SelectedItem proprietà viene aggiornata all'oggetto che rappresenta l'elemento object selezionato. La SelectedIndex proprietà è un numero in base zero che indica l'elemento selezionato dall'utente. Se non viene selezionato alcun elemento, ovvero quando viene creato e inizializzato per la Picker prima volta, SelectedIndex sarà -1.

Nota

Il comportamento di selezione degli elementi in un Picker può essere personalizzato in iOS con una piattaforma specifica della piattaforma. Per altre informazioni, vedere Selezione degli elementi in iOS.

L'esempio XAML seguente illustra come recuperare il valore della SelectedItem proprietà da Picker:

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

Il codice C# equivalente è il seguente:

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

Inoltre, un gestore eventi può essere eseguito quando viene generato l'evento SelectedIndexChanged :

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

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

In questo esempio, il gestore eventi ottiene il valore della SelectedIndex proprietà e usa il valore per recuperare l'elemento selezionato dall'insieme ItemsSource . Ciò equivale dal punto di vista funzionale al recupero dell'elemento selezionato dalla SelectedItem proprietà . Ogni elemento della ItemsSource raccolta è di tipo objecte deve quindi essere eseguito il cast a un string oggetto per la visualizzazione.

Nota

Un Picker oggetto può essere inizializzato per visualizzare un elemento specifico impostando le SelectedIndex proprietà o SelectedItem . Tuttavia, queste proprietà devono essere impostate dopo l'inizializzazione della ItemsSource raccolta.

Popolare una selezione con i dati usando il data binding

Un Picker oggetto può anche essere popolato con i dati utilizzando il data binding per associarne la ItemsSource proprietà a una IList raccolta. In XAML questo risultato si ottiene con l'estensione di Binding markup:

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

Il codice C# equivalente è illustrato di seguito:

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

In questo esempio, i dati della ItemsSource proprietà vengono associati alla Monkeys proprietà del contesto di associazione, che restituisce una IList<Monkey> raccolta. L'esempio di codice seguente illustra la Monkey classe , che contiene quattro proprietà:

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

Quando si esegue l'associazione a un elenco di oggetti, è Picker necessario specificare la proprietà da visualizzare da ogni oggetto. Questa operazione viene ottenuta impostando la ItemDisplayBinding proprietà sulla proprietà richiesta da ogni oggetto. Negli esempi di codice precedenti, Picker è impostato per visualizzare ogni Monkey.Name valore della proprietà.

Rispondere alla selezione di elementi

Il data binding può essere usato per impostare un oggetto sul valore della SelectedItem proprietà quando viene modificato:

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

Il codice C# equivalente è il seguente:

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

I dati della SelectedItem proprietà vengono associati alla SelectedMonkey proprietà del contesto di associazione, ovvero di tipo Monkey. Pertanto, quando l'utente seleziona un elemento in Picker, la SelectedMonkey proprietà verrà impostata sull'oggetto selezionato Monkey . I dati dell'oggetto SelectedMonkey vengono visualizzati nell'interfaccia utente in Label base alle visualizzazioni e Image .

Nota

Le SelectedItem proprietà e SelectedIndex supportano entrambe le associazioni bidirezionali per impostazione predefinita.

Aggiungere dati alla raccolta Items

Un processo alternativo per popolare un Picker oggetto con i dati consiste nell'aggiungere i dati da visualizzare alla raccolta di sola Items lettura, che è di tipo IList<string>. Ogni elemento della raccolta deve essere di tipo string. Gli elementi possono essere aggiunti in XAML inizializzando la Items proprietà con un elenco di x:String elementi:

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

Il codice C# equivalente è il seguente:

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

Oltre ad aggiungere dati usando il Items.Add metodo , i dati possono anche essere inseriti nella raccolta usando il Items.Insert metodo .

Rispondere alla selezione di elementi

Un Picker oggetto supporta la selezione di un elemento alla volta. Quando un utente seleziona un elemento, viene generato l'evento SelectedIndexChanged e la SelectedIndex proprietà viene aggiornata a un numero intero che rappresenta l'indice dell'elemento selezionato nell'elenco. La SelectedIndex proprietà è un numero in base zero che indica l'elemento selezionato dall'utente. Se non viene selezionato alcun elemento, ovvero quando viene creato e inizializzato per la Picker prima volta, SelectedIndex sarà -1.

Nota

Il comportamento di selezione degli elementi in un Picker può essere personalizzato in iOS con una piattaforma specifica della piattaforma. Per altre informazioni, vedere Selezione degli elementi in iOS.

Nell'esempio di codice seguente viene illustrato il OnPickerSelectedIndexChanged metodo del gestore eventi, che viene eseguito quando viene generato l'evento SelectedIndexChanged :

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

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

Questo metodo ottiene il valore della SelectedIndex proprietà e usa il valore per recuperare l'elemento selezionato dall'insieme Items . Poiché ogni elemento della Items raccolta è un stringoggetto , può essere visualizzato da un oggetto Label senza richiedere un cast.

Nota

Un Picker oggetto può essere inizializzato per visualizzare un elemento specifico impostando la SelectedIndex proprietà . Tuttavia, la SelectedIndex proprietà deve essere impostata dopo l'inizializzazione della Items raccolta.