Onay kutuları

Eylem öğelerini seçmek veya seçimini kaldırmak için onay kutusu kullanılır. Tek bir öğe için veya kullanıcının seçebileceği birden çok öğe listesi için kullanılabilir. Denetimin üç seçim durumu vardır: seçilmemiş, seçili ve belirsiz. Bir alt seçim koleksiyonunun hem seçilmemiş hem de seçili durumları olduğunda belirsiz durumu kullanın.

Doğru kontrol bu mu?

İkili evet/hayır seçimi için tek bir onay kutusu kullanın; örneğin, "Beni anımsa?" oturum açma senaryosu veya hizmet şartları anlaşması.

için kullanılan tek bir onay kutusu

İkili seçim için, onay kutusu ile anahtar arasındaki temel fark, onay kutusunun durum için, anahtarın ise eylem için olmasıdır. Bir onay kutusu etkileşimini (örneğin, bir form gönderiminin parçası olarak) geciktirebilirsiniz, ancak bir geçiş anahtarı etkileşimini hemen uygulamanız gerekir. Ayrıca, yalnızca onay kutuları çoklu seçime izin verir.

Kullanıcının birbirini dışlamayan bir seçenek grubundan bir veya daha fazla öğe seçtiği çoklu seçim senaryoları için birden çok onay kutusunu kullanın.

Kullanıcılar herhangi bir seçenek bileşimini seçebildiğinde bir onay kutusu grubu oluşturun.

Seçenekler gruplandırılabildiğinde, tüm grubu temsil etmek için belirsiz bir onay kutusu kullanabilirsiniz. Bir kullanıcı gruptaki alt öğelerin tümünü değil bazılarını seçtiğinde onay kutusunun belirsiz durumunu kullanın.

göstermek için kullanılan onay kutuları

Hem onay kutusu hem de radyo düğmesi denetimleri kullanıcının seçenekler listesinden seçim yapmasına olanak tanır. Onay kutuları kullanıcının seçeneklerin bir bileşimini seçmesine olanak tanır. Buna karşılık, radyo düğmeleri kullanıcının birbirini dışlayan seçeneklerden tek bir seçim yapmasını sağlar. Birden fazla seçenek varsa ancak yalnızca bir seçenek seçilebilirse, bunun yerine bir radyo düğmesi kullanın.

Recommendations

• Onay kutusunun amacının ve geçerli durumunun net ve anlaşılır olduğunu doğrulayın.

• Onay kutusu metin içeriğini en fazla iki satırla sınırlayın.

• Onay kutusu etiketini, işaretin varlığının doğru, yokluğunun yanlış olduğu bir ifade olarak yazın.

• Marka yönergeleriniz başka bir yazı tipi kullanmanızı söylemiyorsa varsayılan yazı tipini kullanın.

• Metin içeriği dinamikse denetimin nasıl yeniden boyutlandırılacağını ve çevresindeki görsellere ne olacağını göz önünde bulundurun.

• Aralarından seçim yapabileceğiniz iki veya daha fazla birbirini dışlayan seçenek varsa, radyo düğmelerini kullanmayı göz önünde bulundurun.

• Yan yana iki onay kutusu grubu koymayın. Grupları ayırmak için grup etiketlerini kullanın.

• Onay kutusunu açma/kapatma veya komut yürütme amacıyla kullanmayın; bunun yerine bir geçiş düğmesi kullanın.

• İletişim kutusu gibi diğer denetimleri görüntülemek için onay kutusu kullanmayın.

• Bazı alt seçenekler için bir seçeneğin ayarlandığını ancak tümünün ayarlanmadığını belirtmek için belirsiz durumu kullanın.

• Belirsiz durumu kullanırken, hangi seçeneklerin seçili olduğunu ve hangilerinin seçilmediğini göstermek için alt onay kutularını kullanın. Kullanıcının alt seçenekleri görebilmesi için kullanıcı arabirimini tasarla.

• Üçüncü bir durumu temsil etmek için belirsiz durumu kullanmayın. Belirsiz durum, bazı alt seçenekler için bir seçeneğin ayarlandığını ancak tümü için ayarlanmadığını belirtmek için kullanılır. Bu nedenle, kullanıcıların doğrudan belirsiz bir durum ayarlamasına izin verme. Ne yapılmaması gerektiğine ilişkin bir örnek için, bu onay kutusu orta düzeyde baharatlılığı göstermek için belirsiz durumu kullanır.

  

  Bunun yerine, üç seçeneği olan bir radyo düğmesi grubu kullanın.

  

Onay kutusu oluştur

• Önemli API'ler: CheckBox sınıfı, Checked olayı, IsChecked özelliği, Content özelliği

WinUI 3 Galeri uygulamasını açın ve onay kutusunu yapım aşamasında görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Basit onay kutusu oluşturma

Onay kutusuna etiket atamak için İçerik özelliğini ayarlayın. Etiket onay kutusunun yanında görüntülenir.

Bu XAML, form gönderilmeden önce hizmet koşullarını kabul etmek için kullanılan tek bir onay kutusu oluşturur.

<CheckBox x:Name="termsOfServiceCheckBox"
          Content="I agree to the terms of service."/>

Kodda oluşturulan onay kutusunun aynısı aşağıdadır.

CheckBox termsOfServiceCheckBox = new CheckBox();
termsOfServiceCheckBox.Content = "I agree to the terms of service.";

IsChecked'e Bağlama

Onay kutusunun işaretli mi yoksa temizlenmiş mi olduğunu belirlemek için IsChecked özelliğini kullanın. IsChecked özelliğinin değerini başka bir ikili değere bağlayabilirsiniz. Ancak, IsChecked null atanabilir boole değeri olduğundan, boole özelliğine bağlamak için bir atama veya değer dönüştürücü kullanmanız gerekir. Bu, kullandığınız gerçek bağlama türüne bağlıdır ve her olası tür için aşağıda örnekler bulabilirsiniz.

Bu örnekte, hizmet koşullarını kabul etmek için onay kutusunun IsChecked özelliği, Gönder düğmesinin IsEnabled özelliğine bağlıdır. Gönder düğmesi yalnızca hizmet koşulları kabul edilirse etkinleştirilir.

x:Bind kullanma

Uyarı

Burada yalnızca ilgili kodu gösteririz. Veri bağlama hakkında daha fazla bilgi için bkz. Veri bağlamaya genel bakış. {x:Bind} işaretleme uzantısında, belirli {x:Bind} bilgileri (tür oluşturma gibi)ayrıntılı olarak açıklanmıştır.

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay}"/>
</StackPanel>

Onay kutusu belirsiz durumunda da olabilirse, bu durumu temsil eden boole değerini belirtmek için bağlamanın FallbackValue özelliğini kullanırız. Bu durumda Gönder düğmesinin de etkinleştirilmesini istemeyiz:

<Button Content="Submit"
        IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay, FallbackValue=False}"/>

x:Bind veya Bağlama kullanma

Uyarı

Burada yalnızca {x:Bind} kullanarak ilgili kodu gösteriyoruz. {Binding} örneğinde {x:Bind} yerine {Binding} değerini koyacağız. Veri bağlama, değer dönüştürücüleri ve {x:Bind} ile {Binding} işaretleme uzantıları arasındaki farklar hakkında daha fazla bilgi için bkz. Veri bağlamaya genel bakış.

...
<Page.Resources>
    <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter"/>
</Page.Resources>

...

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind termsOfServiceCheckBox.IsChecked,
                        Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"/>
</StackPanel>

public class NullableBooleanToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool?)
        {
            return (bool)value;
        }
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is bool)
            return (bool)value;
        return false;
    }
}

Tıklama ve İşaretlenmiş olayları işleme

Onay kutusu durumu değiştiğinde bir eylem gerçekleştirmek için, Tıklama olayını veya Seçildi ve Seçilmedi olaylarını işleyebilirsiniz.

Click olayı, işaretli durum her değiştiğinde oluşur. Tıklama olayını işlerseniz, onay kutusunun durumunu belirlemek için IsChecked özelliğini kullanın.

Denetlenen ve İşaretsiz etkinlikleri bağımsız olarak meydana gelir. Bu olayları işlerseniz, onay kutusundaki durum değişikliklerine yanıt vermek için her ikisini de işlemeniz gerekir.

Aşağıdaki örneklerde Click olayını ve İşaretli ve İşaretsiz olayları işlemeyi gösteririz.

Birden çok onay kutusu aynı olay işleyicisini paylaşabilir. Bu örnek, pizza topping'lerini seçmek için dört onay kutusu oluşturur. Dört onay kutusu, seçili topping listesini güncelleştirmek için aynı olay işleyicisini kullanır.

<StackPanel Margin="40">
    <TextBlock Text="Pizza Toppings"/>
    <CheckBox Content="Pepperoni" x:Name="pepperoniCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Beef" x:Name="beefCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Mushrooms" x:Name="mushroomsCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Onions" x:Name="onionsCheckbox"
              Click="toppingsCheckbox_Click"/>

    <!-- Display the selected toppings. -->
    <TextBlock Text="Toppings selected:"/>
    <TextBlock x:Name="toppingsList"/>
</StackPanel>

Click olayının olay işleyicisi aşağıdadır. Bir onay kutusuna her tıklandığında, hangilerinin işaretlendiğini görmek için onay kutularını inceler ve seçili topping listesini güncelleştirir.

private void toppingsCheckbox_Click(object sender, RoutedEventArgs e)
{
    string selectedToppingsText = string.Empty;
    CheckBox[] checkboxes = new CheckBox[] { pepperoniCheckbox, beefCheckbox,
                                             mushroomsCheckbox, onionsCheckbox };
    foreach (CheckBox c in checkboxes)
    {
        if (c.IsChecked == true)
        {
            if (selectedToppingsText.Length > 1)
            {
                selectedToppingsText += ", ";
            }
            selectedToppingsText += c.Content;
        }
    }
    toppingsList.Text = selectedToppingsText;
}

Belirsiz durumu kullanma

CheckBox denetimi ToggleButton devralır ve üç durum içerebilir:

Devlet	Mülkiyet	Değer
Kontrol edildi	İşaretliMi	doğru
işaretlenmemiş	İşaretliMi	false
Belirsiz	İşaretliMi	sıfır

Onay kutusunun belirsiz durumu raporlaması için IsThreeState özelliğini true olarak ayarlamanız gerekir.

Seçenekler gruplandırılabildiğinde, tüm grubu temsil etmek için belirsiz bir onay kutusu kullanabilirsiniz. Bir kullanıcı gruptaki alt öğelerin tümünü değil bazılarını seçtiğinde onay kutusunun belirsiz durumunu kullanın.

Aşağıdaki örnekte, "Tümünü seç" onay kutusunun IsThreeState özelliği true olarak ayarlanmıştır. Tüm alt öğeler işaretliyse "Tümünü seç" onay kutusu işaretlenir, tüm alt öğeler işaretlenmemişse işaretsizdir ve aksi takdirde belirsizdir.

<StackPanel>
    <CheckBox x:Name="OptionsAllCheckBox" Content="Select all" IsThreeState="True"
              Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked"
              Indeterminate="SelectAll_Indeterminate"/>
    <CheckBox x:Name="Option1CheckBox" Content="Option 1" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
    <CheckBox x:Name="Option2CheckBox" Content="Option 2" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" IsChecked="True"/>
    <CheckBox x:Name="Option3CheckBox" Content="Option 3" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
</StackPanel>

private void Option_Checked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void Option_Unchecked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void SelectAll_Checked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = true;
}

private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = false;
}

private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
{
    // If the SelectAll box is checked (all options are selected),
    // clicking the box will change it to its indeterminate state.
    // Instead, we want to uncheck all the boxes,
    // so we do this programmatically. The indeterminate state should
    // only be set programmatically, not by the user.

    if (Option1CheckBox.IsChecked == true &&
        Option2CheckBox.IsChecked == true &&
        Option3CheckBox.IsChecked == true)
    {
        // This will cause SelectAll_Unchecked to be executed, so
        // we don't need to uncheck the other boxes here.
        OptionsAllCheckBox.IsChecked = false;
    }
}

private void SetCheckedState()
{
    // Controls are null the first time this is called, so we just
    // need to perform a null check on any one of the controls.
    if (Option1CheckBox != null)
    {
        if (Option1CheckBox.IsChecked == true &&
            Option2CheckBox.IsChecked == true &&
            Option3CheckBox.IsChecked == true)
        {
            OptionsAllCheckBox.IsChecked = true;
        }
        else if (Option1CheckBox.IsChecked == false &&
            Option2CheckBox.IsChecked == false &&
            Option3CheckBox.IsChecked == false)
        {
            OptionsAllCheckBox.IsChecked = false;
        }
        else
        {
            // Set third state (indeterminate) by setting IsChecked to null.
            OptionsAllCheckBox.IsChecked = null;
        }
    }
}

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

Bu denetimin API'leri Windows.UI.Xaml.Controls ad alanında bulunur.

• UWP API'leri:CheckBox sınıfı, İşaretli olay, IsChecked özelliği, Content özelliği
• WinUI 2 Galeri uygulamasını açın veCheckBox'ı çalışır durumda olarak görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın.

Tüm denetimler için en güncel stilleri ve şablonları almak için en son WinUI 2'yi kullanmanızı öneririz. WinUI 2.2 veya üzeri, bu denetim için yuvarlatılmış köşeler kullanan yeni bir şablon içerir. Daha fazla bilgi için bkz . Köşe yarıçapı.

İlgili makaleler

• CheckBox sınıfı
• radyo düğmeleri
• Geçiş anahtarı