Birleşik giriş kutusu ve liste kutusu

Kullanıcının seçebileceği öğelerin listesini sunmak için birleşik giriş kutusu (açılan liste olarak da bilinir) kullanın. Birleşik giriş kutusu sıkıştırılmış durumda başlar ve seçilebilir öğelerin listesini gösterecek şekilde genişler. Liste kutusu, açılır listeye benzer, ancak çökertilebilir değildir/sıkıştırılmış bir görünüme sahip değildir. Bu makalenin sonunda liste kutuları hakkında daha fazla bilgi edinebilirsiniz.

Birleşik giriş kutusu kapatıldığında, geçerli seçimi görüntüler veya seçili öğe yoksa boş olur. Kullanıcı birleşik giriş kutusunu genişlettiğinde seçilebilir öğelerin listesini görüntüler.

Açılan listenin sıkıştırılmış durumundaki görüntüsü.

Doğru kontrol bu mu?

Kullanıcıların tek satırlı metinlerle yeterince temsil edilebilen bir öğe kümesinden tek bir değer seçmesine izin vermek için bir açılan liste kullanın.
Birden çok metin satırı veya resim içeren öğeleri görüntülemek için açılır kutu yerine liste veya kılavuz görünümü kullanın.
Beşten az öğe olduğunda , radyo düğmelerini (yalnızca bir öğe seçilebilirse) veya onay kutularını (birden çok öğe seçilebilirse) kullanmayı göz önünde bulundurun.
Seçim öğeleri uygulamanızın akışında ikincil öneme sahip olduğunda açılır kutu kullanın. Çoğu durumda kullanıcıların çoğu için varsayılan seçenek önerilirse, tüm öğelerin liste görünümü kullanılarak gösterilmesi seçeneklere gerekenden daha fazla dikkat çekebilir. Bir kombinasyon kutusu kullanarak alandan tasarruf edebilir ve dikkat dağıtmayı en aza indirebilirsiniz.

Örnekler

Kompakt haldeki birleşik giriş kutusu bir başlık gösterebilir.

Açılan listeyi sıkıştırılmış durumda gösteren ekran görüntüsü.

Birleşik giriş kutuları daha uzun dizeleri destekleyecek şekilde genişlese de, okunması zor olabilecek aşırı uzun dizelerden kaçının.

Uzun metin dizesi içeren açılan liste örneği

Birleşik giriş kutusundaki koleksiyon yeterince uzunsa, buna uyum sağlamak için bir kaydırma çubuğu görünür. Öğeleri listede mantıksal olarak gruplandırın.

Açılan listede kaydırma çubuğu örneği

Recommendations

Açılır kutu öğelerinin metin içeriğini tek satırda sınırlandırın.
Kombobox'taki öğeleri en mantıklı düzende sıralayın. İlgili seçenekleri birlikte gruplandırın ve en yaygın seçenekleri en üste yerleştirin. Adları alfabetik düzende, sayıları sayısal düzende ve tarihleri kronolojik düzende sıralayın.

Liste kutuları

Liste kutusu, kullanıcının koleksiyondan tek bir öğeyi veya birden çok öğeyi seçmesini sağlar. Liste kutuları, açılan listelere benzer, ancak liste kutuları her zaman açıktır—liste kutusu için sıkıştırılmış (genişletilmemiş) bir durum yoktur. Listedeki öğeler, her şeyi gösterecek alan yoksa kaydırılabilir.

Liste kutusu doğru denetim mi?

Liste kutusu, listedeki öğeler göze çarpacak kadar önemli olduğunda ve tam listeyi göstermek için yeterli ekran alanı olduğunda yararlı olabilir.
Liste kutusu, önemli bir seçimde kullanıcının dikkatini tüm alternatiflere çekmelidir. Buna karşılık, açılan liste başlangıçta kullanıcının dikkatini seçili öğeye çeker.
Liste kutusu kullanmaktan kaçının:
- Liste için çok az sayıda öğe var. Her zaman aynı 2 seçeneğe sahip tek seçimli bir liste kutusu , radyo düğmeleri olarak daha iyi sunulabilir. Listede 3 veya 4 statik öğe olduğunda da radyo düğmelerini kullanmayı göz önünde bulundurun.
- Liste kutusu tek seçimdir ve her zaman biri diğerinin değil gibi ima edilebileceği "açık" ve "kapalı" gibi aynı 2 seçeneğe sahiptir. Tek bir onay kutusu veya iki durumlu düğme kullanın.
- Çok fazla sayıda öğe vardır. Kılavuz görünümü ve liste görünümü, uzun listeler için daha iyi bir seçenektir. Çok uzun gruplandırılmış veri listeleri için anlamsal yakınlaştırma tercih edilir.
- Öğeler bitişik sayısal değerlerdir. Böyle bir durumda kaydırıcı kullanmayı düşünün.
- Seçim öğeleri uygulamanızın akışında ikincil öneme sahiptir veya çoğu durumda çoğu kullanıcı için varsayılan seçenek önerilir. Bunun yerine bir açılan liste kullanın.

Liste kutuları için öneriler

Liste kutusundaki ideal öğe aralığı 3 ile 9 arasındadır.
Liste kutusu, öğeleri dinamik olarak farklılık gösterdiğinde düzgün çalışır.
Mümkünse, liste kutusunun boyutunu, öğe listesinin kaydırılması veya sürüklenmesi gerekmeyecek şekilde ayarlayın.
Liste kutusunun amacının ve hangi öğelerin şu anda seçili olduğunun açık olduğunu doğrulayın.
Dokunmatik geri bildirim ve öğelerin seçili durumu için görsel efektleri ve animasyonları ayırın.
Liste kutusu öğesinin metin içeriğini tek bir satırla sınırlayın. Öğeler görselse boyutu özelleştirebilirsiniz. Bir öğe birden çok metin veya resim satırı içeriyorsa, bunun yerine kılavuz görünümü veya liste görünümü kullanın.
Marka yönergeleriniz başka bir yazı tipi kullanılacağını belirtmediği sürece varsayılan yazı tipini kullanın.
Komutları gerçekleştirmek veya diğer denetimleri dinamik olarak göstermek veya gizlemek için liste kutusu kullanmayın.

Birleşik giriş kutusu oluştur

Önemli API'ler: ComboBox sınıfı, IsEditable özelliği, Text özelliği, TextSubmitted olayı, ListBox sınıfı

WinUI 3 Galeri uygulamasını açın ve ComboBox'ı çalışır durumda görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Nesneleri doğrudan Items koleksiyonuna ekleyerek veya ItemsSource özelliğini bir veri kaynağına bağlayarak birleşik giriş kutusunu doldurursunuz. ComboBox'a eklenen öğeler ComboBoxItem kapsayıcılarında sarmalanmıştır.

XAML'de öğeler eklenmiş basit bir açılır kutu işte burada.

<ComboBox Header="Colors" PlaceholderText="Pick a color" Width="200">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>

Aşağıdaki örnek, bir açılır liste kutusunun FontFamily nesneleri koleksiyonuna nasıl bağlandığını gösterir.

<ComboBox x:Name="FontsCombo" Header="Fonts" Height="44" Width="296"
          ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source"/>

ObservableCollection<FontFamily> fonts = new ObservableCollection<FontFamily>()
{
    fonts.Add(new FontFamily("Arial"));
    fonts.Add(new FontFamily("Courier New"));
    fonts.Add(new FontFamily("Times New Roman"));
};

Öğe seçimi

ListView ve GridView gibi ComboBox da Seçici'den türetilir, böylece kullanıcının seçimini aynı standart şekilde alabilirsiniz.

SelectedItem özelliğini kullanarak birleşik giriş kutusunun seçili öğesini alabilir veya ayarlayabilir ve SelectedIndex özelliğini kullanarak seçili öğenin dizinini alabilir veya ayarlayabilirsiniz.

Seçili veri öğesindeki belirli bir özelliğin değerini almak için SelectedValue özelliğini kullanabilirsiniz. Bu durumda, selectedValuePath değerinin seçili öğede hangi özellikten alınacağını belirtmek için ayarlayın.

İpucu

SelectedItem veya SelectedIndex'i varsayılan seçimi gösterecek şekilde ayarlarsanız, özellik açılır kutu Items koleksiyonu doldurulmadan önce ayarlanırsa bir istisna meydana gelir. XAML'de öğelerinizi tanımlamıyorsanız, kombobox'ın Loaded olayını işlemek ve bu olaydaki işleyicide SelectedItem veya SelectedIndex'i ayarlamak en iyi yaklaşımdır.

XAML'de bu özelliklere bağlanabilir veya seçim değişikliklerine yanıt vermek için SelectionChanged olayını işleyebilirsiniz.

Olay işleyici kodunda, seçili öğeyi SelectionChangedEventArgs.AddedItems özelliğinden alabilirsiniz. Daha önce seçilen öğeyi (varsa) SelectionChangedEventArgs.RemovedItems özelliğinden alabilirsiniz. AddedItems ve RemovedItems koleksiyonlarının her birinde yalnızca 1 öğe vardır çünkü açılır kutu birden çok seçimi desteklemez.

Bu örnekte SelectionChanged olayının nasıl işleneceğini ve ayrıca seçili öğeye nasıl bağlanacağınız gösterilmektedir.

<StackPanel>
    <ComboBox x:Name="colorComboBox" Width="200"
              Header="Colors" PlaceholderText="Pick a color"
              SelectionChanged="ColorComboBox_SelectionChanged">
        <x:String>Blue</x:String>
        <x:String>Green</x:String>
        <x:String>Red</x:String>
        <x:String>Yellow</x:String>
    </ComboBox>

    <Rectangle x:Name="colorRectangle" Height="30" Width="100"
               Margin="0,8,0,0" HorizontalAlignment="Left"/>

    <TextBlock Text="{x:Bind colorComboBox.SelectedIndex, Mode=OneWay}"/>
    <TextBlock Text="{x:Bind colorComboBox.SelectedItem, Mode=OneWay}"/>
</StackPanel>

private void ColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string colorName = e.AddedItems[0].ToString();
    Color color;
    switch (colorName)
    {
        case "Yellow":
            color = Colors.Yellow;
            break;
        case "Green":
            color = Colors.Green;
            break;
        case "Blue":
            color = Colors.Blue;
            break;
        case "Red":
            color = Colors.Red;
            break;
    }
    colorRectangle.Fill = new SolidColorBrush(color);
}

Varsayılan olarak SelectionChanged olayı, bir kullanıcı seçimlerini işlemek için listedeki bir öğeye tıkladığında, dokunduğunda veya Enter tuşuna bastığında gerçekleşir ve birleşik giriş kutusu kapatılır. Kullanıcı klavye ok tuşlarıyla açık açılır listede gezindiğinde seçim değişmez.

Kullanıcı açık listede ok tuşlarıyla (Yazı tipi seçimi açılan menüsü gibi) gezinirken "canlı olarak güncelleştirilen" bir birleşik giriş kutusu oluşturmak için SelectionChangedTrigger Alwaysolarak ayarlayın. Bu, odak açık listedeki başka bir öğeye değiştiğinde SelectionChanged olayının oluşmasına neden olur.

Metin Arama

Birleşik giriş kutuları, koleksiyonları içinde aramayı otomatik olarak destekler. Kullanıcılar, açık veya kapalı bir açılır kapanır kutuya odaklanıldığında fiziksel klavyede karakterler yazarken, kullanıcının dizesiyle eşleşen adaylar görüntülenir. Bu işlev özellikle uzun bir listede gezinirken yararlıdır. Örneğin, durum listesini içeren bir açılan listeyle etkileşim kurarken, kullanıcılar hızlı seçim için "Washington"u görünüme getirmek için "w" tuşuna basabilir. Metin araması büyük/küçük harfe duyarlı değildir.

Bu işlevi devre dışı bırakmak için IsTextSearchEnabled özelliğini false olarak ayarlayabilirsiniz.

Birleşik giriş kutusunu düzenlenebilir hale getirme

Varsayılan olarak, açılır kutu kullanıcının önceden tanımlanmış seçenekler listesinden seçim yapmasına olanak tanır. Ancak, listede yalnızca geçerli değerlerin bir alt kümesinin bulunduğu durumlar vardır ve kullanıcının listelenmeyen diğer değerleri girebilmesi gerekir. Bunu desteklemek için açılır kutuyu düzenlenebilir hale getirebilirsiniz.

Birleşik giriş kutusunu düzenlenebilir hale getirmek için IsEditable özelliğini trueolarak ayarlayın. Ardından, kullanıcı tarafından girilen değerle çalışmak için TextSubmitted olayını işleyin.

Varsayılan olarak, kullanıcı özel metin işlediğinde SelectedItem değeri güncelleştirilir. TextSubmitted olay birleştirmelerinde İşlenen ayarını true olarak ayarlayarak bu davranışı geçersiz kılabilirsiniz. Olay işlendi olarak işaretlendiğinde, açılır kutu, olaydan sonra başka bir işlem yapmaz ve düzenleme modunda kalır. SelectedItem güncelleştirilmeyecek.

Bu örnek, basit bir düzenlenebilir combo box göstermektedir. Liste basit dizeler içerir ve kullanıcı tarafından girilen tüm değerler girilmiş olarak kullanılır.

"Son kullanılan adlar" seçici, kullanıcının özel dizeler girmesini sağlar. 'RecentlyUsedNames' listesi, kullanıcının seçebileceği bazı değerler içerir, ancak kullanıcı yeni, özel bir değer de ekleyebilir. 'CurrentName' özelliği şu anda girilen adı temsil eder.

<ComboBox IsEditable="true"
          ItemsSource="{x:Bind RecentlyUsedNames}"
          SelectedItem="{x:Bind CurrentName, Mode=TwoWay}"/>

Gönderilen metin

Kullanıcı tarafından girilen değerle çalışmak için TextSubmitted olayını işleyebilirsiniz. Olay işleyicisinde, genellikle kullanıcı tarafından girilen değerin geçerli olduğunu doğrular ve ardından değeri uygulamanızda kullanırsınız. Duruma bağlı olarak, açılır listenin gelecekteki kullanım seçenekleri listesine değeri de ekleyebilirsiniz.

TextSubmitted olayı, bu koşullar karşılandığında gerçekleşir:

IsEditable özelliği true
Kullanıcı, açılır listedeki mevcut bir girişle eşleşmeyen bir metin girer
Kullanıcı Enter tuşuna basar veya odağı açılır kutudan başka bir yere kaydırır.

Kullanıcı metin girip listede yukarı veya aşağı giderse TextSubmitted olayı gerçekleşmez.

Örnek - Girişi doğrulama ve yerel olarak kullanma

Bu örnekte, yazı tipi boyutu seçicisi yazı tipi boyutu rampasına karşılık gelen bir değer kümesi içerir, ancak kullanıcı listede olmayan yazı tipi boyutlarını girebilir.

Kullanıcı listede olmayan bir değer eklediğinde yazı tipi boyutu güncelleştirilir, ancak değer yazı tipi boyutları listesine eklenmez.

Yeni girilen değer geçerli değilse, Text özelliğini bilinen son iyi değere geri döndürmek için SelectedValue değerini kullanırsınız.

<ComboBox x:Name="fontSizeComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfFontSizes}"
          TextSubmitted="FontSizeComboBox_TextSubmitted"/>

private void FontSizeComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (byte.TryParse(e.Text, out double newValue))
    {
        // Update the app's font size.
        _fontSize = newValue;
    }
    else
    {
        // If the item is invalid, reject it and revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        sender.Text = sender.SelectedValue.ToString();
        e.Handled = true;
    }
}

Örnek - Girişi doğrulama ve listeye ekleme

Burada, "sık kullanılan renk seçici" en sık kullanılan renkleri (Kırmızı, Mavi, Yeşil, Turuncu) içerir, ancak kullanıcı listede olmayan bir sık kullanılan rengi girebilir. Kullanıcı geçerli bir renk (Pembe gibi) eklediğinde, yeni girilen renk listeye eklenir ve etkin "sık kullanılan renk" olarak ayarlanır.

<ComboBox x:Name="favoriteColorComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfColors}"
          TextSubmitted="FavoriteColorComboBox_TextSubmitted"/>

private void FavoriteColorComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (IsValid(e.Text))
    {
        FavoriteColor newColor = new FavoriteColor()
        {
            ColorName = e.Text,
            Color = ColorFromStringConverter(e.Text)
        }
        ListOfColors.Add(newColor);
    }
    else
    {
        // If the item is invalid, reject it but do not revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        e.Handled = true;
    }
}

bool IsValid(string Text)
{
    // Validate that the string is: not empty; a color.
}

Metin denetimleri
Yazım denetimi yönergeleri
TextBox sınıfı
PasswordBox sınıfı
String.Length özelliği

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-03-05