Aracılığıyla paylaş

Bir Seçicinin ItemsSource Özelliğini Ayarlama

Seçici görünümü, veri listesinden metin öğesi seçme denetimidir. Bu makalede ItemsSource özelliğini ayarlayarak seçiciyi verilerle doldurma ve kullanıcı tarafından öğe seçimine yanıt verme açıklanmaktadır.

Xamarin.Forms2.3.4, özelliğini ayarlayarak ItemsSource verilerle doldurma ve seçili öğeyi özelliğinden SelectedItem alma özelliğini ekleyerek görünümü geliştirdiPicker. Ayrıca, özelliği olarak Colorayarlanarak seçili öğenin metninin TextColor rengi değiştirilebilir.

Seçiciyi verilerle doldurma

özelliği Picker bir IList koleksiyon olarak ayarlanarak ItemsSource verilerle doldurulabilir. Koleksiyondaki her öğe türünde olmalıdır veya türünden objecttüretilmelidir. Bir öğe dizisinden özelliği başlatılarak ItemsSource XAML'de öğeler eklenebilir:

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

Not

öğesinin dizideki x:Array öğelerin türünü belirten bir Type öznitelik gerektirdiğini unutmayın.

Eşdeğer C# kodu aşağıda gösterilmiştir:

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;

Öğe seçimine yanıt verme

A Picker , bir kerede bir öğenin seçilmesini destekler. Kullanıcı bir öğeyi seçtiğinde SelectedIndexChanged , olay tetiklenir, SelectedIndex özellik listedeki seçili öğenin dizinini temsil eden bir tamsayıya güncelleştirilir ve SelectedItem özellik seçili öğeyi object temsil edene güncelleştirilir. SelectedIndex özelliği, kullanıcının seçtiği öğeyi gösteren sıfır tabanlı bir sayıdır. Hiçbir öğe seçilmezse ( ilk oluşturulduğu ve başlatıldığı Picker SelectedIndex durum) -1 olur.

Not

içindeki öğe Picker seçimi davranışı, platforma özgü bir iOS ile özelleştirilebilir. Daha fazla bilgi için bkz . Seçici Öğe Seçimini Denetleme.

Aşağıdaki kod örneği, XAML'de SelectedItem özellik değerinin nasıl alınacaklarını Picker gösterir:

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

Eşdeğer C# kodu aşağıda gösterilmiştir:

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

Ayrıca, olay tetiklendiğinde SelectedIndexChanged bir olay işleyicisi yürütülebilir:

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

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

Bu yöntem özellik değerini alır SelectedIndex ve seçili öğeyi koleksiyondan ItemsSource almak için değerini kullanır. Bu işlev, seçili öğeyi özelliğinden SelectedItem almaya eşdeğerdir. Koleksiyondaki ItemsSource her öğenin türünde objectolduğunu ve bu nedenle görüntüleme için öğesine string atanması gerektiğini unutmayın.

Not

Picker veya SelectedItem özellikleri ayarlanarak SelectedIndex belirli bir öğeyi görüntülemek için başlatılabilir. Ancak, koleksiyonun başlatılmasından sonra bu özelliklerin ItemsSource ayarlanması gerekir.

Veri bağlama kullanarak seçiciyi verilerle doldurma

ayrıca Picker özelliğini bir IList koleksiyona bağlamak ItemsSource için veri bağlama kullanılarak verilerle doldurulabilir. XAML'de bu, işaretleme uzantısıyla Binding elde edilir:

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

Eşdeğer C# kodu aşağıda gösterilmiştir:

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

Özellik ItemsSource verileri, bir IList<Monkey> koleksiyon döndüren bağlı görünüm modelinin özelliğine bağlanırMonkeys. Aşağıdaki kod örneği, dört özellik içeren sınıfını gösterir Monkey :

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

Bir nesne listesine bağlanırken, Picker her nesneden hangi özelliğin görüntüleneceği söylenmelidir. Bu, özelliği her nesneden gerekli özelliğe ayarlanarak ItemDisplayBinding elde edilir. Yukarıdaki kod örneklerinde, Picker her Monkey.Name özellik değerini görüntüleyecek şekilde ayarlanmıştır.

Öğe seçimine yanıt verme

Veri bağlama, nesne değiştiğinde SelectedItem özellik değerine ayarlamak için kullanılabilir:

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

Eşdeğer C# kodu aşağıda gösterilmiştir:

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

Özellik SelectedItem verileri, türündeki SelectedMonkey Monkeybağlı görünüm modelinin özelliğine bağlanır. Bu nedenle, kullanıcı içinde bir öğe seçtiğinde PickerSelectedMonkey özelliği seçili Monkey nesneye ayarlanır. Nesne SelectedMonkey verileri kullanıcı arabiriminde ve Image görünümlerine göre Label görüntülenir:

Seçici Öğe Seçimi

Not

SelectedItem ve SelectedIndex özelliklerinin her ikisinin de varsayılan olarak iki yönlü bağlamaları desteklediğini unutmayın.

  • Last updated on