Rádiová tlačítka

Přepínače, označované také jako volitelné tlačítka, umožňují uživatelům vybrat jednu možnost ze sady dvou nebo více vzájemně se vylučujících, ale souvisejících možností. Přepínače se vždy používají ve skupinách a každá možnost je reprezentována jedním přepínačem ve skupině.

Ve výchozím stavu není vybrán žádný přepínač ve skupině RadioButtons. To znamená, že všechna přepínače jsou vymazána. Jakmile ale uživatel zvolí rádiové tlačítko, nemůže zrušit jeho výběr, aby skupinu vrátil do původního nezaškrtnutého stavu.

Jednotné chování skupiny radiových tlačítek ji odlišuje od zaškrtávacích políček, které podporují vícenásobný výběr a zrušení výběru.

Je to správná kontrola?

Pomocí přepínačů můžete uživatelům umožnit výběr ze dvou nebo více vzájemně se vylučujících možností.

Přepínače používejte, když uživatelé potřebují zobrazit všechny možnosti, než vyberou. Přepínače zvýrazňují všechny možnosti stejně, což znamená, že některé možnosti můžou upoutat větší pozornost, než je nutné nebo žádoucí.

Pokud si všechny možnosti nezaslouží stejnou pozornost, zvažte použití jiných ovládacích prvků. Pokud chcete například doporučit jednu nejlepší možnost pro většinu uživatelů a ve většině situací, použijte pole se seznamem k zobrazení této nejlepší možnosti jako výchozí možnosti.

Pokud existují pouze dvě možné možnosti, které lze jasně vyjádřit jako jednu binární volbu, například zapnuto/vypnuto nebo ano/ne, zkombinujte je do jednoho zaškrtávacího políčka nebo přepínače ovládacího prvku. Použijte například jedno zaškrtávací políčko pro "Souhlasím" místo dvou přepínačů pro "Souhlasím" a "Nesouhlasím".

Nepoužívejte dvě přepínače pro jedinou binární volbu:

Místo toho použijte zaškrtávací políčko:

Když uživatelé můžou vybrat více možností, použijte zaškrtávací políčka.

Když možnosti uživatelů leží v rozsahu hodnot (například 10, 20, 30, ... 100), použijte ovládací prvek posuvníku .

Pokud existuje více než osm možností, použijte rozbalovací seznam .

Pokud jsou dostupné možnosti založené na aktuálním kontextu aplikace nebo se můžou dynamicky lišit, použijte ovládací prvek seznamu.

Recommendations

• Ujistěte se, že účel a aktuální stav sady přepínačů je zřejmý.
• Omezte textový popisek přepínače na jeden řádek.
• Pokud je textový popisek dynamický, zvažte, jak se tlačítko automaticky změní a co se stane s libovolnými vizuály kolem něj.
• Výchozí písmo použijte, pokud vám pokyny pro značku neřeknou jinak.
• Nevkládejte dvě skupiny RadioButtonů vedle sebe. Pokud jsou dvě skupiny rádiových tlačítek těsně vedle sebe, může být pro uživatele obtížné určit, které tlačítko patří do které skupiny.

Přehled radiobuttonů

Porovnání: RadioButtons vs RadioButton

Existují dva způsoby, jak vytvořit skupiny přepínačů: RadioButtony a RadioButton.

• Doporučujeme ovládací prvek RadioButtons . Tento ovládací prvek zjednodušuje rozložení, zpracovává navigaci pomocí klávesnice a přístupnost a podporuje vazbu ke zdroji dat.
• Můžete použít skupiny jednotlivých ovládacích prvků RadioButton .

V ovládacím prvku RadioButtons byly optimalizovány access klávesnice a chování navigace. Tato vylepšení pomáhají uživatelům s přístupností a klávesnicí procházet seznamem možností rychleji a snadněji.

Kromě těchto vylepšení je výchozí vizuální rozložení jednotlivých přepínačů ve skupině Přepínačů optimalizované prostřednictvím automatizované orientace, mezer a nastavení okrajů. Tato optimalizace eliminuje nutnost zadávat tyto vlastnosti, jak byste museli při použití primitivnějšího ovládacího prvku pro seskupení, jako je například StackPanel nebo Grid.

Navigace ve skupině RadioButtons

Ovládací RadioButtons prvek má speciální navigační chování, které pomáhá uživatelům klávesnice procházet seznam rychleji a snadněji.

Fokus klávesnice

Ovládací RadioButtons prvek podporuje dva stavy:

• Není vybrán žádný přepínač.
• Je vybráno jedno rádiové tlačítko.

Následující části popisují, jak se ovládací prvek zaměřuje v různých stavech.

Není vybrán žádný přepínač.

Pokud není vybrán žádný z přepínačů, první přepínač v seznamu získá zaostření.

Poznámka:

Položka, která přijme fokus tabulátoru při první navigaci, není zvolena.

Seznam bez fokusu tabulátoru, bez výběru

Seznam zaměřený na první kartu, bez výběru

Je vybráno jedno rádiové tlačítko.

Když uživatel přejde do seznamu, ve kterém je vybraný přepínač, tento přepínač získá fokus.

Seznam bez fokusu tabulátoru

Seznam s počátečním zaměřením na záložku

Navigace pomocí klávesnice

Další informace o obecném chování navigace pomocí klávesnice naleznete v tématu Interakce pomocí klávesnice – navigace.

Jestliže má nějaká položka ve skupině RadioButtons již fokus, může uživatel použít šipkové klávesy pro vnitřní navigaci mezi položkami ve skupině. Klávesy Šipka nahoru a Šipka dolů se přesunou na další nebo předchozí logickou položku, jak je definováno v XAML kódu. Klávesy se šipkami doleva a doprava se pohybují prostorově.

Navigace v rozloženích s jedním sloupcem nebo jedním řádkem

V rozložení s jedním sloupcem nebo jedním řádkem vede navigace pomocí klávesnice k následujícímu chování:

Jeden sloupec

Mezi položkami se pohybuje šipka nahoru a šipka dolů.
Šipka vlevo a šipka vpravo nic nedělá.

Jeden řádek

Klávesy Šipka vlevo a Šipka nahoru se přesunou na předchozí položku a klávesy Šipka vpravo a Šipka dolů se přesunou na další položku.

Navigace v rámci vícesloupcových a víceřádkových rozvržení

Ve vícesloupkovém rozložení mřížky s více řádky vede navigace pomocí klávesnice k tomuto chování:

Klávesy se šipkami doleva/doprava

Klávesy se šipkou vlevo a vpravo přesunou fokus vodorovně mezi položkami v řádku.

Pokud je fokus na poslední položce ve sloupci a stisknete klávesu Šipka vpravo nebo Šipka vlevo, přesune se fokus na poslední položku v dalším nebo předchozím sloupci (pokud existuje).

Šipka nahoru/Šipka dolů

Klávesy Šipka nahoru a Šipka dolů přesunují fokus svisle mezi položkami ve sloupci.

Když je fokus na poslední položce ve sloupci a stisknete klávesu Šipka dolů, přesune se fokus na první položku v dalším sloupci (pokud existuje). Když je fokus na první položce ve sloupci a stisknete klávesu Šipka nahoru, přesune se fokus na poslední položku v předchozím sloupci (pokud existuje).

Další informace najdete v tématu Interakce pomocí klávesnice.

Balení

Skupina RadioButtons nezabalí fokus z prvního řádku nebo sloupce na poslední nebo z posledního řádku nebo sloupce na první. Je to proto, že když uživatelé používají čtečku obrazovky, ztratí smysl pro hranice a jasné označení začátku a konce, což uživatelům s vadou zraku znesnadňuje navigaci v seznamu.

Ovládací RadioButtons prvek také nepodporuje výčet, protože ovládací prvek má obsahovat přiměřený počet položek (viz Je to správný ovládací prvek?).

Výběr sleduje zaostření

Když k navigaci mezi položkami ve RadioButtons skupině používáte klávesnici, když se fokus přesune z jedné položky na další, vybere se nově prioritní položka a dříve vybraná položka se vymaže.

Před ovládáním pomocí klávesnice

Fokus a výběr před navigaci pomocí klávesnice

Po navigaci pomocí klávesnice

Fokus a výběr po navigaci pomocí klávesnice, kde šipka dolů přesune fokus na přepínač 3, vybere ho a vymaže přepínač 2.

Fokus můžete přesunout beze změny výběru pomocí ctrl+šipkových kláves k navigaci. Po přesunutí zaměření můžete pomocí mezerníku vybrat položku, která je aktuálně v zaměření.

Navigace pomocí herního panelu a dálkového ovládání

Pokud k pohybu mezi přepínači používáte herní ovladač nebo dálkové ovládání, chování „výběr sleduje fokus" je zakázáno a uživatel musí stisknout tlačítko „A“, aby vybral přepínač, který má aktuálně fokus.

Chování přístupnosti

Následující tabulka popisuje, jak Předčítatel zpracovává skupinu RadioButtons a co je předčítáno. Toto chování závisí na tom, jak uživatel nastavil detaily Předčítání.

Činnost	Oznámení vypravěče
Fokus se přesune na vybranou položku.	name, Radio tlačítko, vybráno, x z N
Fokus se přesune na nevybranou položku. (Pokud používáte klávesy se šipkami Ctrl nebo Xbox gamepad, který označuje, že výběr nenásleduje fokus.)	name, rádiové tlačítko, nevybrané, x z N

Poznámka:

Název, který Narrátor oznámí pro každou položku, je hodnota připojené vlastnosti AutomationProperties.Name, pokud je k dispozici pro položku; v opačném případě se jedná o hodnotu vrácenou metodou ToString dané položky.

x je číslo aktuální položky. N je celkový počet položek ve skupině.

Vytvořte skupinu rádiových tlačítek WinUI 3

• Důležitá rozhraní API: RadioButtons – třída, SelectedItem – vlastnost, SelectedIndex – vlastnost, SelectionChanged – událost, RadioButton – třída, IsChecked – vlastnost, Checked – událost

Otevřete aplikaci Galerie WinUI 3 a podívejte se na rádiové tlačítko v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Ovládací RadioButtons prvek používá model obsahu podobný ItemsControl. To znamená, že můžete:

• Naplňte ho přidáním položek přímo do kolekce Items nebo vazbou dat do vlastnosti ItemsSource .
• K získání a nastavení vybrané možnosti použijte vlastnosti SelectedIndex nebo SelectedItem .
• Zpracujte událost SelectionChanged tak, aby provedla akci při výběru možnosti.

Tady deklarujete jednoduchý RadioButtons ovládací prvek se třemi možnostmi. Vlastnost Header je nastavena tak, aby skupina měla popisek, a vlastnost SelectedIndex je nastavena tak, aby poskytovala výchozí možnost.

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

Výsledek vypadá takto:

Pokud chcete provést akci, když uživatel vybere nějakou možnost, zpracujte událost SelectionChanged . Tady změníte barvu pozadí prvku Border s názvem ExampleBorder (<Border x:Name="ExampleBorder" Width="100" Height="100"/>).

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

Návod

Můžete také získat vybranou položku z SelectionChangedEventArgs.AddedItems vlastnost. V indexu 0 bude jenom jedna vybraná položka, takže vybranou položku můžete získat takto: string colorName = e.AddedItems[0] as string;.

Stavy výběru

Přepínač má dva stavy: vybrané nebo nezaškrtané. Pokud je vybrána možnost ve RadioButtons skupině, můžete získat její hodnotu z SelectedItem vlastnost a jeho umístění v kolekci z SelectedIndex vlastnost. Přepínač lze vymazat, pokud uživatel vybere jiné přepínač ve stejné skupině, ale pokud ho uživatel znovu vybere, nepůjde ho vymazat. Skupinu přepínačů můžete však programově vyčistit nastavením SelectedItem = nullnebo SelectedIndex = -1. (Nastavení SelectedIndex na libovolnou hodnotu mimo rozsah kolekce Items nevede k žádnému výběru.)

Obsah přepínačů

V předchozím příkladu RadioButtons jste ovládací prvek naplnili jednoduchými řetězci. Ovládací prvek poskytl přepínače a použil texty jako popisek každého z nich.

Ovládací prvek však můžete naplnit RadioButtons libovolným objektem. Obvykle chcete, aby objekt poskytoval řetězcovou reprezentaci, kterou lze použít jako textový popisek. V některých případech může být obrázek vhodný místo textu.

Tady se k naplnění ovládacího prvku používají elementy SymbolIcon .

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

K naplnění položek můžete použít také jednotlivé ovládací prvky RadioButtons. Jedná se o zvláštní případ, který probereme později. Viz Ovládací prvky RadioButton ve skupině RadioButtons.

Výhodou použití libovolného objektu je, že ovládací prvek můžete svázat RadioButtons s vlastním typem v datovém modelu. Následující část to demonstruje.

Datová vazba

Ovládací RadioButtons prvek podporuje datovou vazbu na vlastnost ItemsSource . Tento příklad ukazuje, jak můžete svázat ovládací prvek s vlastním zdrojem dat. Vzhled a funkce tohoto příkladu jsou stejné jako v předchozím příkladu barvy pozadí, ale tady jsou barevné štětce uloženy v datovém modelu místo vytvoření v SelectionChanged obslužné rutině události.

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

Ovládací prvky RadioButton ve skupině RadioButtons

Jednotlivé ovládací prvky RadioButton můžete použít k naplnění RadioButtons položek. Můžete to udělat, pokud chcete získat přístup k určitým vlastnostem, například AutomationProperties.Name; nebo máte existující RadioButton kód, ale chcete využít výhod rozložení a navigace RadioButtons.

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

Když používáte RadioButton ovládací prvky ve RadioButtons skupině, ovládací prvek RadioButtons ví, jak prezentovat RadioButton, takže nebudete mít dva kruhy pro výběr.

Existuje však několik chování, o nichž byste měli vědět. Doporučujeme zpracovat stav a události buď u jednotlivých ovládacích prvků, nebo na RadioButtons, ale ne na obou, abyste se vyhnuli konfliktům.

Tato tabulka zobrazuje související události a vlastnosti obou ovládacích prvků.

Rádiové tlačítko	Rádiová tlačítka
Zaškrtnuto, nezaškrtnuto, Kliknutí	VýběrZměněn
IsChecked	SelectedItem, SelectedIndex

Pokud zpracováváte události na úrovni jednotlivého RadioButton, například Checked nebo Unchecked, a zároveň zpracováváte událost RadioButtons.SelectionChanged, obě události se spustí. Událost RadioButton nastane nejprve a poté nastane událost RadioButtons.SelectionChanged, což může vést ke konfliktům.

Objekty IsChecked, SelectedItema SelectedIndex vlastnosti zůstanou synchronizované. Změna jedné vlastnosti aktualizuje druhou.

Vlastnost RadioButton.GroupName je ignorována. Skupinu vytvoří ovládací prvek RadioButtons.

Definování více sloupců

Ve výchozím nastavení ovládací prvek RadioButtons uspořádá přepínače svisle do jednoho sloupce. Vlastnost MaxColumns můžete nastavit tak, aby ovládací prvek uspořádal přepínače do více sloupců. (Když to uděláte, jsou uspořádány v pořadí hlavního sloupce, kde se položky vyplňují shora dolů a poté zleva doprava.)

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

Návod

Pokud chcete mít položky uspořádané do jednoho vodorovného řádku, nastavte MaxColumns rovna počtu položek ve skupině.

Vytvoření vlastní skupiny RadioButton

Důležité

K seskupení RadioButtons prvků doporučujeme použít RadioButton ovládací prvek.

Přepínače fungují ve skupinách. Jednotlivé ovládací prvky RadioButton můžete seskupit dvěma způsoby:

• Vložte je do stejného nadřazeného kontejneru.
• Nastavte vlastnost GroupName na každém přepínači na stejnou hodnotu.

V tomto příkladu je první skupina rádiových tlačítek implicitně seskupována na stejném zásobníkovém panelu. Druhá skupina je rozdělena mezi dva zásobníkové panely, takže GroupName slouží k jejich explicitnímu seskupení do jedné skupiny.

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

Tyto dvě skupiny ovládacích RadioButton prvků vypadají takto:

Stavy radiobuttonů

Přepínač má dva stavy: vybrané nebo nezaškrtané. Je-li vybrán přepínač, jeho vlastnost IsChecked je true. Když je přepínač odznačen, vlastnost IsChecked je false. Přepínač lze vymazat, pokud uživatel vybere jiné přepínač ve stejné skupině, ale pokud ho uživatel znovu vybere, nepůjde ho vymazat. Přepínač však můžete vymazat programově nastavením jeho vlastnosti IsChecked na false.

Vizuály, které je potřeba zvážit

Výchozí mezery jednotlivých RadioButton ovládacích prvků se liší od mezer RadioButtons poskytovaných skupinou. Pokud chcete použít RadioButtons mezery u jednotlivých ovládacích prvků RadioButton, použijte Margin hodnotu 0,0,7,3, jak je znázorněno zde.

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

Následující obrázky znázorňují preferované rozestupy přepínačů ve skupině.

Poznámka:

Pokud používáte ovládací prvek WinUI RadioButtons, jsou mezery, okraje a orientace už optimalizované.

Související témata

• Tlačítka
• Přepínání přepínačů
• Zaškrtávací políčka
• Seznamy a pole se seznamem
• posuvníky
• Třída RadioButtons
• třída RadioButton