Radyo düğmeleri

Seçenek düğmeleri olarak da adlandırılan radyo düğmeleri, kullanıcıların birbirini dışlayan ancak birbiriyle ilgili olan iki veya daha fazla seçenekten oluşan bir koleksiyondan bir seçenek seçmesine olanak verir. Radyo düğmeleri her zaman gruplar halinde kullanılır ve her seçenek gruptaki bir radyo düğmesiyle gösterilir.

Varsayılan durumda, RadioButtons grubundaki hiçbir radyo düğmesi seçilmez. Yani, tüm radyo düğmeleri temizlenir. Ancak, kullanıcı bir radyo düğmesini seçtikten sonra, grubu ilk temizlenen durumuna geri yüklemek için düğmenin seçimini kaldıramaz.

RadioButtons grubunun tekil davranışı, çoklu seçenek seçimi ve seçimlerin kaldırılmasını veya temizlenmesini desteklemesiyle onay kutularındanayırt edilir.

Doğru kontrol bu mu?

Kullanıcıların birbirini dışlayan iki veya daha fazla seçenek arasından seçim yapmasına izin vermek için radyo düğmelerini kullanın.

Kullanıcıların seçim yapmadan önce tüm seçenekleri görmesi gerektiğinde radyo düğmelerini kullanın. Radyo düğmeleri tüm seçenekleri eşit olarak vurgular, bu da bazı seçeneklerin gerekli veya istenenden daha fazla dikkat çekebileceği anlamına gelir.

Tüm seçenekler eşit dikkati hak etmediği sürece diğer denetimleri kullanmayı göz önünde bulundurun. Örneğin, çoğu kullanıcı ve durum için en iyi tek seçeneği önermek amacıyla, birleşik giriş kutusunu kullanarak en iyi seçeneği varsayılan olarak görüntüleyin.

İki olası seçenek yalnızca açık/kapalı veya evet/hayır gibi tek bir ikili seçim olarak net bir şekilde ifade edilebiliyorsa, bunları tek bir onay kutusu veya anahtar geçiş denetiminde birleştirin. Örneğin, "Kabul ediyorum" ve "Katılmıyorum" için iki radyo düğmesi yerine "Kabul ediyorum" için tek bir onay kutusu kullanın.

Tek bir ikili seçim için iki radyo düğmesi kullanmayın:

sunan iki radyo düğmesi

Bunun yerine onay kutusunu kullanın:

sunmak için onay kutusu iyi bir alternatiftir

Kullanıcılar birden çok seçenek belirleyebildiğinde, onay kutularını kullanın.

destekler

Kullanıcıların seçenekleri bir değer aralığında olduğunda (örneğin, 10, 20, 30, ... 100), kaydırıcı denetimini kullanın.

Sekizden fazla seçenek varsa, birleşik giriş kutusu kullanın.

Kullanılabilir seçenekler bir uygulamanın geçerli bağlamını temel alıyorsa veya dinamik olarak farklılık gösterebiliyorsa, liste denetimi kullanın.

Recommendations

• Radyo düğmeleri kümesinin amacının ve geçerli durumunun açık olduğundan emin olun.
• Radyo düğmesinin metin etiketini tek bir satırla sınırlayın.
• Metin etiketi dinamikse düğmenin otomatik olarak nasıl yeniden boyutlandırılacağını ve çevresindeki görsellere ne olacağını göz önünde bulundurun.
• Marka yönergeleriniz aksini belirtmediği sürece varsayılan yazı tipini kullanın.
• İki RadioButtons grubunu yan yana koymayın. İki RadioButtons grubu yan yana olduğunda, kullanıcıların hangi düğmelerin hangi gruba ait olduğunu belirlemesi zor olabilir.

RadioButtons'a genel bakış

RadioButtons ve RadioButton karşılaştırması

Radyo düğmesi grupları oluşturmanın iki yolu vardır: RadioButtons ve RadioButton.

• RadioButtons denetimini öneririz. Bu denetim düzeni basitleştirir, klavye gezintisini ve erişilebilirliği işler ve veri kaynağına bağlamayı destekler.
• Tek tek RadioButton denetim gruplarını kullanabilirsiniz.

RadioButtons denetiminde klavye erişimi ve gezinti davranışı iyileştirilmiştir. Bu geliştirmeler, hem erişilebilirlik hem de klavye gücü kullanıcılarının seçenek listesinde daha hızlı ve kolay bir şekilde ilerlemesine yardımcı olur.

Bu iyileştirmelere ek olarak, RadioButtons grubundaki tek tek radyo düğmelerinin varsayılan görsel düzeni otomatik yönlendirme, aralık ve kenar boşluğu ayarları aracılığıyla iyileştirilmiştir. Bu iyileştirme, StackPanel veyaGridgibi daha temel bir gruplandırma denetimi kullandığınızda yapmanız gerekebileceği için bu özellikleri belirtme gereksinimini ortadan kaldırır.

RadioButtons grubunda gezinme

RadioButtons denetimi, klavye kullanıcılarının listede daha hızlı ve daha kolay gezinmesine yardımcı olan özel gezinti davranışına sahiptir.

Klavye odağı

RadioButtons denetimi iki durumu destekler:

• Radyo düğmesi seçilmedi
• Bir radyo düğmesi seçili

Sonraki bölümlerde her durumda denetimin odak davranışı açıklanmaktadır.

Radyo düğmesi seçilmedi

Hiçbir radyo düğmesi seçilmediğinde, listedeki ilk radyo düğmesi odağı alır.

Uyarı

İlk sekme gezintisinden sekme odağı alan öğe seçili değil.

Sekme odağı olmadan liste, seçim yok

Sekme odağı olmayan ve seçili öğe içermeyen listeList without tab focus and no selected item

Başlangıç sekmesi odağıyla liste, seçim yapılmadı

İlk sekme odağı olan ve seçili öğe olmayan

Bir radyo düğmesi seçili

Bir kullanıcı, radyo düğmesinin zaten seçili olduğu listeye geldiğinde, seçili radyo düğmesi odağı alır.

Sekme odağı olmayan Listesi

Sekme odağı ve seçili öğe içermeyen

İlk sekme odağıolanListesi

Başlangıç sekme odağı ve seçili öğeyi içeren

Klavye gezintisi

Genel klavye gezinti davranışları hakkında daha fazla bilgi için bkz. Klavye etkileşimleri - Gezinti.

RadioButtons grubundaki bir öğenin odağı zaten olduğunda, kullanıcı grup içindeki öğeler arasında "iç gezinti" için ok tuşlarını kullanabilir. Yukarı ve Aşağı ok tuşları, XAML işaretlemenizde tanımlandığı gibi "sonraki" veya "önceki" mantıksal öğeye taşınır. Sol ve Sağ ok tuşları uzamsal olarak hareket eder.

Tek sütunlu veya tek satırlı düzenlerde gezinti

Tek sütunlu veya tek satırlı düzende klavye gezintisi aşağıdaki davranışa neden olur:

Tek sütunlu

klavye gezintisi örneği

Yukarı ok ve Aşağı ok tuşları öğeler arasında hareket eder.
Sol ok ve Sağ ok tuşları hiçbir şey yapmaz.

tek satır

Sol ve Yukarı ok tuşları önceki öğeye, Sağ ve Aşağı ok tuşları ise sonraki öğeye taşınır.

Çok sütunlu, çok satırlı düzenlerde gezinti

Çok sütunlu, çok satırlı kılavuz düzeninde klavye gezintisi şu davranışa neden olur:

Sol/Sağ ok tuşlarını

yatay klavye gezintisi örneği

Sol ve Sağ ok tuşları odağı bir satırdaki öğeler arasında yatay olarak taşır.

Odak bir sütundaki son öğedeyse ve Sağ veya Sol ok tuşuna basıldığında, odak sonraki veya önceki sütundaki (varsa) son öğeye taşınır.

Yukarı/Aşağı ok tuşlarını

dikey klavye gezintisi örneği

Yukarı ve Aşağı ok tuşları odağı bir sütundaki öğeler arasında dikey olarak taşır.

Odak bir sütundaki son öğedeyse ve Aşağı ok tuşuna basıldığında, odak bir sonraki sütundaki ilk öğeye taşınır (varsa). Odak bir sütundaki ilk öğeye geldiğinde ve Yukarı ok tuşuna basıldığında, odak önceki sütundaki son öğeye taşınır (varsa)

Daha fazla bilgi için bkz. Klavye etkileşimleri.

Kaydırma

RadioButtons grubu odağı ilk satırdan veya sütundan son satıra veya sütundan birinciye kaydırmaz. Bunun nedeni, kullanıcıların ekran okuyucu kullandığında sınır duygusunun ve başlangıç ve bitişin net bir göstergesinin kaybolmasıdır ve bu da görme bozukluğu olan kullanıcıların listede gezinmesini zorlaştırır.

RadioButtons denetimi, makul sayıda öğe içermesi amaçlandığından numaralandırmayı da desteklemez (bkz. Bu doğru denetim mi?).

Seçim odağı izler

RadioButtons grubundaki öğeler arasında gezinmek için klavyeyi kullandığınızda, odak bir öğeden diğerine taşınırken yeni odaklanılan öğe seçilir ve daha önce odaklanılan öğe temizlenir.

klavye gezinti önce

Klavye gezintisi öncesinde odak ve seçim.

Klavye gezintisinden sonra

Klavyeyle gezinme sonrasında odak ve seçim; burada Aşağı ok tuşu, odağı radyo düğmesi 3'e taşır, onu seçer ve radyo düğmesi 2'yi kaldırır.

Gezinmek için Ctrl+ok tuşlarını kullanarak seçimi değiştirmeden odağı taşıyabilirsiniz. Odak taşındıktan sonra, ara çubuğunu kullanarak o anda odağı olan öğeyi seçebilirsiniz.

Oyun kumandası ve uzaktan kumanda ile gezinme

Radyo düğmeleri arasında hareket etmek için oyun paneli veya uzaktan kumanda kullanıyorsanız, "seçim odağı izler" davranışı devre dışı bırakılır ve kullanıcının şu anda odağı olan radyo düğmesini seçmek için "A" düğmesine basması gerekir.

Erişilebilirlik davranışı

Aşağıdaki tabloda Anlatıcı'nın bir RadioButtons grubunu nasıl ele aldığı ve ne duyurulduğu açıklanmaktadır. Bu davranış, kullanıcının Ekran Okuyucusu ayrıntı tercihlerini nasıl ayarladığına bağlıdır.

Eylem	Anlatıcı duyurusu
Odak seçili öğeye taşınır	"ad, RadioButton, seçildi, x of N"
Odak, seçilmemiş bir öğeye taşınır (Ctrl-ok tuşları veya Xbox gamepad ile geziniyorsa, bu, seçimin odağı takip etmediğini gösterir.)	"ad, RadioButton, seçili değil, xN"

Uyarı

Ekran Okuyucusu'nun her öğe için duyurduadı, öğe için kullanılabiliyorsa ekli AutomationProperties.Name özelliğinin değeridir; aksi takdirde, öğenin ToString yöntemi tarafından döndürülen değerdir.

x geçerli öğenin numarasıdır. N, gruptaki toplam öğe sayısıdır.

WinUI RadioButtons grubu oluşturma

• Önemli API'ler: RadioButtons sınıfı, SelectedItem özelliği, SelectedIndex özelliği, SelectionChanged olay, RadioButton sınıfı, IsChecked özelliği, İşaretli olay

WinUI 3 Galeri uygulamasını açın ve RadioButton'ın nasıl çalıştığını 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

RadioButtons denetimi, ItemsControlbenzer bir içerik modeli kullanır. Bu, şunu yapabileceğiniz anlamına gelir:

• Öğeleri doğrudan Items koleksiyonuna ekleyerek veya verileri ItemsSource özelliğine bağlayarak doldurun.
• Seçili olan seçeneği almak ve ayarlamak için SelectedIndex veya SelectedItem özelliklerini kullanın.
• Bir seçenek seçildiğinde harekete geçmek için SelectionChanged olayını işleyin.

Burada, üç seçenekle basit bir RadioButtons denetimi bildirirsiniz. Üst Bilgi özelliği gruba bir etiket verecek şekilde ayarlanır ve SelectedIndex özelliği varsayılan bir seçenek sağlayacak şekilde ayarlanır.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged">
    <x:String>Red</x:String>
    <x:String>Green</x:String>
    <x:String>Blue</x:String>
</RadioButtons>

Sonuç şöyle görünür:

Kullanıcı bir seçenek seçtiğinde işlem yapmak için SelectionChanged olayını işleyin. Burada, "ExampleBorder" () adlı bir <Border x:Name="ExampleBorder" Width="100" Height="100"/> öğesinin arka plan rengini değiştirirsiniz.

private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ExampleBorder != null && sender is RadioButtons rb)
    {
        string colorName = rb.SelectedItem as string;
        switch (colorName)
        {
            case "Red":
                ExampleBorder.Background = new SolidColorBrush(Colors.Red);
                break;
            case "Green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "Blue":
                ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
                break;
        }
    }
}

İpucu

Seçili öğeyi SelectionChangedEventArgs.AddedItems özelliğinden de alabilirsiniz. Dizin 0'da yalnızca bir seçili öğe bulunacağı için, seçili öğeyi şu şekilde alabilirsiniz: string colorName = e.AddedItems[0] as string;.

Seçim durumları

Radyo düğmesinin iki durumu vardır: seçili veya temizlenmiş. bir RadioButtons grubunda bir seçenek belirlendiğinde, değerini SelectedItem özelliğinden ve koleksiyondaki konumunu SelectedIndex özelliğinden alabilirsiniz. Bir kullanıcı aynı gruptaki başka bir radyo düğmesini seçerse radyo düğmesi temizlenebilir, ancak kullanıcı yeniden seçerse temizlenemez. Ancak, radyo düğmesi grubunu SelectedItem = nullveya SelectedIndex = -1ayarlayarak program aracılığıyla temizleyebilirsiniz. (SelectedIndex'ın Items koleksiyonunun aralığı dışındaki bir değere ayarlanması durumunda, herhangi bir seçim yapılmaz.)

RadioButtons içeriği

Önceki örnekte, RadioButtons denetimini basit dizelerle doldurdun. Denetim radyo düğmelerini sağladı ve her biri için etiket olarak dizeleri kullandı.

Ancak, RadioButtons denetimini herhangi bir nesneyle doldurabilirsiniz. Genellikle, nesnenin metin etiketi olarak kullanılabilecek bir dize gösterimi sağlamasını istersiniz. Bazı durumlarda, metin yerine bir resim uygun olabilir.

Burada SymbolIcon öğeleri denetimi doldurmak için kullanılır.

<RadioButtons Header="Select an icon option:">
    <SymbolIcon Symbol="Back"/>
    <SymbolIcon Symbol="Attach"/>
    <SymbolIcon Symbol="HangUp"/>
    <SymbolIcon Symbol="FullScreen"/>
</RadioButtons>

RadioButton denetimlerini tek tek kullanarak RadioButtons öğelerini de doldurabilirsiniz. Bu, daha sonra tartışacağımız özel bir durumdur. Bkz. RadioButtons grubundaki RadioButton denetimlerini.

Herhangi bir nesneyi kullanabilmenin bir avantajı, RadioButtons denetimini veri modelinizdeki özel bir türe bağlayabilmenizdir. Sonraki bölümde bu gösterilmektedir.

Veri bağlama

RadioButtons denetimi, ItemsSource özelliğine veri bağlamayı destekler. Bu örnek, denetimi özel bir veri kaynağına nasıl bağlayabileceğinizi gösterir. Bu örneğin görünümü ve işlevselliği önceki arka plan rengi örneğiyle aynıdır, ancak burada renk fırçaları SelectionChanged olay işleyicisinde oluşturulmak yerine veri modelinde depolanır.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged"
              ItemsSource="{x:Bind colorOptionItems}"/>

public sealed partial class MainPage : Page
{
    // Custom data item.
    public class ColorOptionDataModel
    {
        public string Label { get; set; }
        public SolidColorBrush ColorBrush { get; set; }

        public override string ToString()
        {
            return Label;
        }
    }

    List<ColorOptionDataModel> colorOptionItems;

    public MainPage1()
    {
        this.InitializeComponent();

        colorOptionItems = new List<ColorOptionDataModel>();
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
    }

    private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var option = e.AddedItems[0] as ColorOptionDataModel;
        ExampleBorder.Background = option?.ColorBrush;
    }
}

RadioButtons grubundaki RadioButton denetimleri

RadioButton denetimlerinin her birini RadioButtons öğelerini doldurmak için kullanabilirsiniz. Bunu, AutomationProperties.Namegibi belirli özelliklere erişmek için yapabilirsiniz; veya mevcut RadioButton kodunuz olabilir, ancak RadioButtonsdüzeninden ve gezintiden yararlanmak isteyebilirsiniz.

<RadioButtons Header="Background color">
    <RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
    <RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
    <RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>

RadioButton denetimlerini bir RadioButtons grubunda kullandığınızda, RadioButtons denetimi RadioButton'ü nasıl sunacağını bilir, bu nedenle iki seçim dairesiyle karşılaşmazsınız.

Ancak, bilmeniz gereken bazı davranışlar vardır. Çakışmaları önlemek için durumu ve olayları tek tek denetimlerde veya RadioButtonsüzerinde yönetmenizi öneririz, ancak ikisini birden işlememenizi.

Bu tablo, her iki denetimdeki ilgili olayları ve özellikleri gösterir.

RadioButton	Radyo Düğmeleri
İşaretli, İşaretsiz, 'e tıklayın	SeçimDeğişti
işaretlendi	SelectedItem, SelectedIndex

Eğer RadioButton veya Checkedgibi tek bir Uncheckedolayını işlerseniz ve RadioButtons.SelectionChanged olayını işlerseniz, her iki olay da tetiklenir. RadioButton olayı önce gerçekleşir ve ardından RadioButtons.SelectionChanged olayı gerçekleşir ve bu da çakışmalara neden olabilir.

IsChecked, SelectedItemve SelectedIndex özellikleri eşitlenmiş kalır. Bir özelliğin değişimi diğer ikisini günceller.

RadioButton.GroupName özelliği yoksayılır. Grup, RadioButtons denetim birimi tarafından oluşturulur.

Birden çok sütun tanımlama

Varsayılan olarak, RadioButtons denetimi radyo düğmelerini tek bir sütunda dikey olarak düzenler. Denetimin radyo düğmelerini birden çok sütunda düzenlemesini sağlamak için MaxColumns özelliğini ayarlayabilirsiniz. (Bunu yaptığınızda, öğeler önce yukarıdan aşağıya, sonra ise soldan sağa doğru doldurularak sütun ağırlıklı bir sıra ile düzenlenir.)

<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
    <x:String>Item 6</x:String>
</RadioButtons>

Üç sütunlu iki gruptaki radyo düğmeleri

İpucu

Öğelerin tek bir yatay satırda düzenlenmesini sağlamak için, MaxColumns gruptaki öğe sayısına eşit olarak ayarlayın.

Kendi RadioButton grubunuzu oluşturma

Önemli

RadioButtons öğelerini gruplandırmak için RadioButton denetimini kullanmanızı öneririz.

Radyo düğmeleri gruplar halinde çalışır. Tek tek RadioButton denetimlerini iki şekilde gruplandırabilirsiniz:

• Bunları aynı üst kapsayıcıya yerleştirin.
• Her radyo düğmesindeki GroupName özelliğini aynı değere ayarlayın.

Bu örnekte ilk radyo düğmeleri grubu, aynı yığın panelinde yer alarak örtük olarak gruplandırılır. İkinci grup iki yığın paneli arasında bölünür, bu nedenle GroupName bunları açıkça tek bir grupta gruplandırmak için kullanılır.

<StackPanel>
    <StackPanel>
        <TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 1 - implicit grouping -->
        <StackPanel Orientation="Horizontal">
            <RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
                         IsChecked="True"/>
        </StackPanel>
    </StackPanel>

    <StackPanel>
        <TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 2 - grouped by GroupName -->
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked" IsChecked="True"/>
                <RadioButton Content="White" Tag="white"  GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
    <Border x:Name="ExampleBorder"
            BorderBrush="#FFFFD700" Background="#FFFFFFFF"
            BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>

private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.Background = new SolidColorBrush(Colors.Yellow);
                break;
            case "green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "white":
                ExampleBorder.Background = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
                break;
            case "green":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
                break;
            case "white":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

Bu iki RadioButton denetim grubu şöyle görünür:

Radyo düğmesi durumları

Radyo düğmesinin iki durumu vardır: seçili veya temizlenmiş. Radyo düğmesi seçildiğinde, IsChecked özelliği true. Radyo düğmesinin seçimi kaldırıldığında, IsChecked özelliği falseolur. Bir kullanıcı aynı gruptaki başka bir radyo düğmesini seçerse radyo düğmesi temizlenebilir, ancak kullanıcı yeniden seçerse temizlenemez. Ancak, IsChecked özelliğini falseolarak ayarlayarak bir radyo düğmesini program aracılığıyla temizleyebilirsiniz.

Dikkate alınacak görseller

Tek tek RadioButton denetimlerinin varsayılan aralığı, RadioButtons grubu tarafından sağlanan aralıktan farklıdır. Belirli RadioButtons denetimlerine RadioButton aralığını uygulamak için, burada gösterilen şekilde Margindeğerinde bir 0,0,7,3 kullanın.

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Margin" Value="0,0,7,3"/>
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="Background"/>
    <RadioButton Content="Item 1"/>
    <RadioButton Content="Item 2"/>
    <RadioButton Content="Item 3"/>
</StackPanel>

Aşağıdaki görüntüler, bir gruptaki radyo düğmelerinin tercih edilen aralığını gösterir.

için aralık yönergelerini gösteren resim

Uyarı

WinUI RadioButtons denetimi kullanıyorsanız aralıklar, kenar boşlukları ve yönlendirme zaten iyileştirilmiştir.

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.

UWP uygulamaları için RadioButtons denetimi WinUI 2'nin bir parçası olarak eklenir. Yükleme yönergeleri de dahil olmak üzere daha fazla bilgi için bkz. WinUI 2. Bu denetimlerin API'leri hem Windows.UI.Xaml.Controls hem de Microsoft.UI.Xaml.Controls ad alanında bulunur.

• UWP API'leri: RadioButton sınıfı, IsChecked özelliği, Denetlenen olay
• WinUI 2 API'ler: RadioButtons sınıfı, SelectedItem özelliği, SelectedIndex özelliği, SelectionChanged olayı
• WinUI 2 Gallery uygulamasını açın veRadioButton'ı çalışır durumda 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.

Radyo düğmesi grupları oluşturmanın iki yolu vardır.

• WinUI 2.3'ten itibaren RadioButtons denetimini öneriyoruz. Bu denetim düzeni basitleştirir, klavye gezintisini ve erişilebilirliği işler ve veri kaynağına bağlamayı destekler.
• Tek tek RadioButton denetim gruplarını kullanabilirsiniz. Uygulamanız WinUI 2.3 veya sonraki bir sürümü kullanmıyorsa tek seçenek budur.

Tüm denetimler için en güncel stilleri ve şablonları almak için en son WinUI 2'yi kullanmanızı öneririz.

Bu makaledeki kodu WinUI 2 ile kullanmak için, projenize dahil edilen Windows UI Kitaplığı API'lerini temsil etmek için XAML'de bir diğer ad kullanın (muxckullanıyoruz). Daha fazla bilgi için WinUI 2'yi kullanmaya başlama hakkında bölümüne bakın.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:RadioButtons />

İlgili konular

• Düğmeleri
• Geçiş anahtarları
• Onay kutuları
• Listeler ve kombinasyon kutuları
• Kaydırıcılar
• RadioButtons sınıfı
• RadioButton sınıfı