Picker

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI), Picker kullanıcının öğe seçebileceği kısa bir öğe listesi görüntüler.

Picker aşağıdaki özellikleri tanımlar:

• CharacterSpacing, türünde double, tarafından görüntülenen Pickeröğenin karakterleri arasındaki aralıktır.
• FontAttributes türündedir FontAttributesve varsayılan olarak güncelleştirilir FontAtributes.None.
• FontAutoScalingEnabled, türündedir boolve metnin işletim sisteminde ayarlanan ölçeklendirme tercihlerine uygun olup olmadığını belirler. Bu özelliğin varsayılan değeridir true.
• FontFamily türündedir stringve varsayılan olarak güncelleştirilir null.
• FontSize türündedir doubleve varsayılan değer -1.0'dır.
• HorizontalTextAlignment, türünde TextAlignment, tarafından görüntülenen metnin yatay hizalamasıdır Picker.
• ItemsSource türünde IList, görüntülenecek öğelerin kaynak listesidir ve varsayılan olarak nullgösterilir.
• SelectedIndex türünde int, seçili öğenin dizinidir ve varsayılan olarak -1 olur.
• SelectedItem türündeki objectseçili öğedir ve varsayılan olarak nullgösterilir.
• ItemDisplayBindingtüründe BindingBase, öğe listesindeki her nesne için görüntülenecek özelliği (karmaşık bir nesneyse ItemSource ) seçer. Daha fazla bilgi için bkz . Veri bağlama kullanarak seçiciyi verilerle doldurma.
• TextColor türünde Color, metni görüntülemek için kullanılan renk.
• TextTransform, türündeki TextTransformmetin büyük/küçük harf dönüştürme işleminin yapılıp yapılmayacağını tanımlar.
• Title türündedir stringve varsayılan olarak güncelleştirilir null.
• TitleColor türünde Color, metni görüntülemek Title için kullanılan renk.
• VerticalTextAlignment, türündeki TextAlignment, tarafından görüntülenen metnin dikey hizalamasıdır Picker.

dışında ItemDisplayBindingtüm özellikler nesneler tarafından BindableProperty desteklenir; başka bir deyişle bunlar stillendirilebilir ve özellikler veri bağlamalarının hedefleri olabilir. SelectedIndex ve SelectedItem özellikleri varsayılan bağlama moduna BindingMode.TwoWaysahiptir. Bu, Model-View-ViewModel (MVVM) desenini kullanan bir uygulamada veri bağlamalarının hedefleri olabileceği anlamına gelir. Yazı tipi özelliklerini ayarlama hakkında bilgi için bkz . Yazı Tipleri.

A Picker , ilk görüntülendiğinde hiçbir veri göstermez. Bunun yerine, özelliğinin Title değeri aşağıdaki iOS ekran görüntüsünde gösterildiği gibi yer tutucu olarak gösterilir:

Picker Kazanç odağında verileri görüntülenir ve kullanıcı bir öğe seçebilir:

kullanıcı Picker bir SelectedIndexChanged öğe seçtiğinde bir olayı tetikler. Seçimin ardından, seçili öğe tarafından Pickergörüntülenir:

verilerle doldurmaya Picker yönelik iki teknik vardır:

• ItemsSource Özelliği görüntülenecek verilere ayarlama. Bu, bir öğesine veri eklemek için önerilen tekniktir Picker. Daha fazla bilgi için bkz . ItemsSource özelliğini ayarlama.
• Koleksiyona görüntülenecek Items verileri ekleme. Daha fazla bilgi için bkz . Items koleksiyonuna veri ekleme.

ItemsSource özelliğini ayarlama

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

öğesi, x:Array dizideki öğelerin türünü belirten bir Type öznitelik gerektirir.

Eşdeğer C# kodu:

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;

Öğ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 . iOS'ta Seçici öğesi seçimi.

Aşağıdaki XAML örneğinde, özelliğin değerinden SelectedItem nasıl alınacakları gösterilmektedir Picker:

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

Eşdeğer C# kodu:

Label monkeyNameLabel = new Label();
monkeyNameLabel.SetBinding(Label.TextProperty, Binding.Create(static (Picker picker) => picker.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 örnekte, olay işleyicisi ö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 öğe türündedir objectve bu nedenle görüntüleme için öğesine string atanmalıdır.

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"
        ItemsSource="{Binding Monkeys}"
        ItemDisplayBinding="{Binding Name}" />

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

Picker picker = new Picker { Title = "Select a monkey" };
picker.SetBinding(Picker.ItemsSourceProperty, static (MonkeysViewModel vm) => vm.Monkeys);
picker.ItemDisplayBinding = Binding.Create(static (Monkey monkey) => monkey.Name);

Bu örnekte, ItemsSource özellik verileri bağlama bağlamının Monkeys özelliğine bağlanır ve bu da bir IList<Monkey> koleksiyon döndürür. 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"
        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:

Picker picker = new Picker { Title = "Select a monkey" };
picker.SetBinding(Picker.ItemsSourceProperty, static (MonkeysViewModel vm) => vm.Monkeys);
picker.SetBinding(Picker.SelectedItemProperty, static (MonkeysViewModel vm) => vm.SelectedMonkey);
picker.ItemDisplayBinding = Binding.Create(static (Monkey monkey) => monkey.Name);

Label nameLabel = new Label { ... };
nameLabel.SetBinding(Label.TextProperty, static (MonkeysViewModel vm) => vm.SelectedMonkey.Name);

Label locationLabel = new Label { ... };
locationLabel.SetBinding(Label.TextProperty, static (MonkeysViewModel vm) => vm.SelectedMonkey.Location);

Image image = new Image { ... };
image.SetBinding(Image.SourceProperty, static (MonkeysViewModel vm) => vm.SelectedMonkey.ImageUrl);

Label detailsLabel = new Label();
detailsLabel.SetBinding(Label.TextProperty, static (MonkeysViewModel vm) => vm.SelectedMonkey.Details);

Özellik SelectedItem verileri bağlama bağlamının SelectedMonkey türünde Monkeyolan ö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 ve Image görünümlerine göre Label kullanıcı arabiriminde görüntülenir.

Not

SelectedItem ve SelectedIndex özelliklerinin her ikisi de varsayılan olarak iki yönlü bağlamaları destekler.

Items koleksiyonuna veri ekleme

verilerle doldurmaya yönelik alternatif bir Picker işlem, görüntülenecek verileri türündeki IList<string>salt Items okunur koleksiyona eklemektir. Koleksiyondaki her öğe türünde stringolmalıdır. Öğe listesiyle özelliği başlatılarak Items XAML'ye x:String öğeler eklenebilir:

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

Eşdeğer C# kodu:

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

yöntemini kullanarak veri eklemeye Items.Add ek olarak, yöntemi kullanılarak veriler de koleksiyona Items.Insert eklenebilir.

Öğ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 ve SelectedIndex özellik listedeki seçili öğenin dizinini temsil eden bir tamsayıya 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 . iOS'ta Seçici öğesi seçimi.

Aşağıdaki kod örneği, olay tetiklendiğinde SelectedIndexChanged yürütülen olay işleyici yöntemini gösterirOnPickerSelectedIndexChanged:

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

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

Bu yöntem özellik değerini alır SelectedIndex ve seçili öğeyi koleksiyondan Items almak için değerini kullanır. Koleksiyondaki Items her öğe bir stringolduğundan, atama gerektirmeden tarafından Label görüntülenebilir.

Not

Picker özelliği ayarlanarak SelectedIndex belirli bir öğeyi görüntülemek için başlatılabilir. Ancak, SelectedIndex özelliği koleksiyonun başlatılmasından Items sonra ayarlanmalıdır.