Picker

UI Aplikasi Multi-platform .NET (.NET MAUI) Picker menampilkan daftar pendek item, tempat pengguna dapat memilih item.

Picker menentukan properti berikut:

• CharacterSpacing, dari jenis double, adalah penspasian antara karakter item yang ditampilkan oleh Picker.
• FontAttributes jenis FontAttributes, yang default ke FontAtributes.None.
• FontAutoScalingEnabled, dari jenis bool, yang menentukan apakah teks menghormati preferensi penskalaan yang diatur dalam sistem operasi. Nilai default properti ini adalah true.
• FontFamily jenis string, yang default ke null.
• FontSize jenis double, yang default ke -1.0.
• HorizontalTextAlignment, dari jenis TextAlignment, adalah perataan horizontal teks yang ditampilkan oleh Picker.
• ItemsSource jenis IList, daftar sumber item yang akan ditampilkan, yang default ke null.
• SelectedIndex jenis int, indeks item yang dipilih, yang default ke -1.
• SelectedItem jenis object, item yang dipilih, yang default ke null.
• ItemDisplayBinding, dari jenis BindingBase, memilih properti yang akan ditampilkan untuk setiap objek dalam daftar item, jika ItemSource adalah objek kompleks. Untuk informasi selengkapnya, lihat Mengisi Pemilih dengan data menggunakan pengikatan data.
• TextColor jenis Color, warna yang digunakan untuk menampilkan teks.
• TextTransform, dari jenis TextTransform, yang menentukan apakah akan mengubah casing teks.
• Title jenis string, yang default ke null.
• TitleColor jenis Color, warna yang digunakan untuk menampilkan Title teks.
• VerticalTextAlignment, dari jenis TextAlignment, adalah perataan vertikal teks yang ditampilkan oleh Picker.

Semua properti, dengan pengecualian ItemDisplayBinding, didukung oleh BindableProperty objek, yang berarti bahwa properti dapat ditata, dan properti dapat menjadi target pengikatan data. Properti SelectedIndex dan SelectedItem memiliki mode BindingMode.TwoWaypengikatan default , yang berarti bahwa mereka dapat menjadi target pengikatan data dalam aplikasi yang menggunakan pola Model-View-ViewModel (MVVM). Untuk informasi tentang mengatur properti font, lihat Font.

Picker tidak menampilkan data apa pun saat pertama kali ditampilkan. Sebagai gantinya, nilai propertinya Title ditampilkan sebagai tempat penampung, seperti yang ditunjukkan pada cuplikan layar iOS berikut:

Picker Saat mendapatkan fokus, datanya ditampilkan dan pengguna dapat memilih item:

Peristiwa Picker diaktifkan SelectedIndexChanged saat pengguna memilih item. Setelah pilihan, item yang dipilih ditampilkan oleh Picker:

Ada dua teknik untuk mengisi Picker dengan data:

• ItemsSource Mengatur properti ke data yang akan ditampilkan. Ini adalah teknik yang direkomendasikan untuk menambahkan data ke Picker. Untuk informasi selengkapnya, lihat Mengatur properti ItemsSource.
• Menambahkan data yang akan ditampilkan ke Items koleksi. Untuk informasi selengkapnya, lihat Menambahkan data ke koleksi Item.

Mengatur properti ItemsSource

Picker dapat diisi dengan data dengan mengatur propertinya ItemsSource ke IList koleksi. Setiap item dalam koleksi harus dari, atau berasal dari, ketik object. Item dapat ditambahkan di XAML dengan menginisialisasi ItemsSource properti dari array item:

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

Catatan

Elemen x:Array memerlukan atribut yang Type menunjukkan jenis item dalam array.

Kode C# yang setara adalah:

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;

Merespons pilihan item

Picker Mendukung pilihan satu item pada satu waktu. Saat pengguna memilih item, SelectedIndexChanged peristiwa diaktifkan, SelectedIndex properti diperbarui ke bilangan bulat yang mewakili indeks item yang dipilih dalam daftar, dan SelectedItem properti diperbarui ke object yang mewakili item yang dipilih. Properti SelectedIndex adalah angka berbasis nol yang menunjukkan item yang dipilih pengguna. Jika tidak ada item yang dipilih, yang merupakan kasus ketika Picker pertama kali dibuat dan diinisialisasi, SelectedIndex akan menjadi -1.

Catatan

Perilaku pemilihan item Picker dalam dapat disesuaikan di iOS dengan platform khusus. Untuk informasi selengkapnya, lihat Pilihan item pemilih di iOS.

Contoh XAML berikut menunjukkan cara mengambil SelectedItem nilai properti dari Picker:

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

Kode C# yang setara adalah:

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

Selain itu, penanganan aktivitas dapat dijalankan saat SelectedIndexChanged peristiwa diaktifkan:

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

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

Dalam contoh ini, penanganan aktivitas mendapatkan SelectedIndex nilai properti, dan menggunakan nilai untuk mengambil item yang dipilih dari ItemsSource koleksi. Ini secara fungsional setara dengan mengambil item yang dipilih dari SelectedItem properti . Setiap item dalam ItemsSource koleksi berjenis object, dan harus dilemparkan ke string untuk ditampilkan.

Catatan

Picker Dapat diinisialisasi untuk menampilkan item tertentu dengan mengatur SelectedIndex properti atau SelectedItem . Namun, properti ini harus diatur setelah menginisialisasi ItemsSource koleksi.

Mengisi Pemilih dengan data menggunakan pengikatan data

A Picker juga dapat diisi dengan data dengan menggunakan pengikatan data untuk mengikat propertinya ItemsSource ke IList koleksi. Di XAML ini dicapai dengan Binding ekstensi markup:

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

Kode C# yang setara ditunjukkan di bawah ini:

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

Dalam contoh ini, ItemsSource data properti mengikat ke Monkeys properti konteks pengikatan, yang mengembalikan IList<Monkey> koleksi. Contoh kode berikut menunjukkan Monkey kelas , yang berisi empat properti:

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

Saat mengikat ke daftar objek, Picker harus diberi tahu properti mana yang akan ditampilkan dari setiap objek. Ini dicapai dengan mengatur ItemDisplayBinding properti ke properti yang diperlukan dari setiap objek. Dalam contoh kode di atas, Picker diatur untuk menampilkan setiap Monkey.Name nilai properti.

Merespons pilihan item

Pengikatan data dapat digunakan untuk mengatur objek ke SelectedItem nilai properti saat berubah:

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

Kode C# yang setara adalah:

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 properti mengikat ke SelectedMonkey properti konteks pengikatan, yang berjenis Monkey. Oleh karena itu, ketika pengguna memilih item di Picker, SelectedMonkey properti akan diatur ke objek yang dipilih Monkey . Data SelectedMonkey objek ditampilkan di antarmuka pengguna menurut Label dan Image tampilan.

Catatan

Properti SelectedItem dan SelectedIndex keduanya mendukung pengikatan dua arah secara default.

Menambahkan data ke koleksi Item

Proses alternatif untuk mengisi Picker dengan data adalah menambahkan data yang akan ditampilkan ke koleksi baca-saja Items , yang berjenis IList<string>. Setiap item dalam koleksi harus berjenis string. Item dapat ditambahkan di XAML dengan menginisialisasi Items properti dengan daftar x:String item:

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

Kode C# yang setara adalah:

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

Selain menambahkan data menggunakan Items.Add metode , data juga dapat dimasukkan ke dalam koleksi dengan menggunakan Items.Insert metode .

Merespons pilihan item

Picker Mendukung pilihan satu item pada satu waktu. Saat pengguna memilih item, SelectedIndexChanged peristiwa diaktifkan, dan SelectedIndex properti diperbarui ke bilangan bulat yang mewakili indeks item yang dipilih dalam daftar. Properti SelectedIndex adalah angka berbasis nol yang menunjukkan item yang dipilih pengguna. Jika tidak ada item yang dipilih, yang merupakan kasus ketika Picker pertama kali dibuat dan diinisialisasi, SelectedIndex akan menjadi -1.

Catatan

Perilaku pemilihan item Picker dalam dapat disesuaikan di iOS dengan platform khusus. Untuk informasi selengkapnya, lihat Pilihan item pemilih di iOS.

Contoh kode berikut menunjukkan OnPickerSelectedIndexChanged metode penanganan aktivitas, yang dijalankan saat SelectedIndexChanged peristiwa diaktifkan:

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

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

Metode ini mendapatkan SelectedIndex nilai properti, dan menggunakan nilai untuk mengambil item yang dipilih dari Items koleksi. Karena setiap item dalam Items koleksi adalah string, item dapat ditampilkan oleh Label tanpa memerlukan pemeran.

Catatan

Picker Dapat diinisialisasi untuk menampilkan item tertentu dengan mengatur SelectedIndex properti . Namun, SelectedIndex properti harus diatur setelah menginisialisasi Items koleksi.