Радиокнопки

Переключатели, также называемые кнопками выбора, позволяют пользователям выбирать один вариант из набора двух или более взаимоисключающих, но связанных параметров. Переключатели всегда используются в группах, и каждый параметр представлен одним переключателем в группе.

В состоянии по умолчанию ни одна из кнопок в группе RadioButtons не выбрана. То есть все переключатели очищаются. Однако после выбора переключателя пользователь не может отменить выбор, чтобы вернуть группу в исходное очищенное состояние.

Единственное поведение группы RadioButtons отличает её от флажков, которые поддерживают многократный выбор и снятие выбора или очистку.

Это правильный элемент управления?

Используйте переключатели, чтобы разрешить пользователям выбирать из двух или более взаимоисключающих вариантов.

Используйте переключатели, когда пользователям нужно просмотреть все параметры перед выбором. Радиокнопки подчеркивают все варианты одинаково, что означает, что некоторые варианты могут привлечь больше внимания, чем необходимо или желаемо.

Если все варианты не заслуживают равного внимания, рассмотрите возможность использования других элементов управления. Например, чтобы рекомендовать один лучший вариант для большинства пользователей и в большинстве случаев, используйте комбинированный список , чтобы отобразить лучший вариант в качестве варианта по умолчанию.

Если есть только два возможных варианта, которые могут быть четко выражены как выбор одного из двух вариантов, например, включено/выключено или да/нет, объедините их в один флажок или переключатель. Например, используйте один флажок для "Я согласен" вместо двух переключателей для "Я согласен" и "Я не согласен".

Не используйте два радиокнопки для одного выбора из двух вариантов.

Вместо этого используйте флажок:

Если пользователи могут выбрать несколько параметров, установите флажки .

флажки

Если параметры пользователей лежат в диапазоне значений (например, 10, 20, 30, ... 100), используйте ползунок.

Если есть более восьми вариантов, используйте комбинированное поле .

Если доступные параметры основаны на текущем контексте приложения или они могут динамически изменяться, используйте элемент управления списком.

Рекомендации

• Убедитесь, что назначение и текущее состояние набора радиокнопок выражены явно.
• Ограничьте текстовые метки радиокнопок одной строкой.
• Если метка текста динамическая, рассмотрите, как кнопка будет автоматически изменять размер и что произойдет с любыми визуальными элементами вокруг него.
• Используйте шрифт по умолчанию, если иное не предусмотрено рекомендациями вашего бренда.
• Не помещайте две группы RadioButtons рядом. Если две группы RadioButtons находятся рядом друг с другом, пользователям может быть трудно определить, какие кнопки относятся к какой группе.

Обзор RadioButtons

RadioButtons vs RadioButton

Существует два способа создания групп радиокнопок: RadioButtons и RadioButton.

• Мы рекомендуем элемент управления «RadioButtons» . Этот элемент управления упрощает расположение, обрабатывает навигацию по клавиатуре и доступность, а также поддерживает привязку к источнику данных.
• Вы можете использовать группы отдельных элементов управления RadioButton.

Оптимизировано поведение использования клавиатуры и навигации в элементе управления RadioButtons. Эти улучшения помогают как пользователям, использующим специальные возможности, так и опытным пользователям клавиатуры, быстрее и легче перемещаться по перечню параметров.

Помимо этих улучшений, визуальный макет отдельных переключателей по умолчанию в группе RadioButtons оптимизирован с помощью автоматической ориентации, интервалов и параметров полей. Эта оптимизация устраняет необходимость указывать эти свойства, что может понадобиться при использовании более простых элементов управления группировкой, таких как StackPanel или Grid.

Навигация по группе RadioButtons

Элемент управления RadioButtons имеет специальное поведение навигации, которое помогает пользователям клавиатуры перемещаться по списку быстрее и проще.

Фокус клавиатуры

Элемент управления RadioButtons поддерживает два состояния:

• Ни одна кнопка-переключатель не выбрана.
• Выбрана одна радиокнопка

В следующих разделах описывается поведение фокуса элемента управления в каждом состоянии.

Ни одна радио-кнопка не выбрана

Если ни один радиокнопка не выбрана, первый радиокнопка в списке получает фокус.

Выбрана одна радиокнопка

Когда пользователь переходит в список с радиокнопкой, где уже выбрана радиокнопка, выбранная радиокнопка получает фокус.

Навигация по клавиатуре

Для получения дополнительных сведений об общем поведении клавиатурной навигации см. раздел Взаимодействие с клавиатурой — Навигация.

Если элемент в группе RadioButtons уже имеет фокус, пользователь может использовать клавиши со стрелками для "внутренней навигации" между элементами в группе. Клавиши со стрелками ВВЕРХ и ВНИЗ перемещаются к следующему или предыдущему логическому элементу, как определено в разметке XAML. Клавиши со стрелками влево и вправо перемещаются пространственно.

Навигация по макетам с одним столбцом или одной строкой

В одноколоночном или однорядном макете навигация по клавиатуре приводит к следующему поведению:

Навигация в многостолбцовых и многорядных макетах

В многострочном макете сетки с несколькими строками навигация по клавиатуре приводит к следующему поведению:

клавиши со стрелками влево или вправо

клавиши со стрелками вверх и вниз

Дополнительные сведения см. в разделе взаимодействия с клавиатурой.

Упаковка

Группа RadioButtons не переносит фокус с первой строки или столбца на последнюю, или с последней строки или столбца на первую. Это связано с тем, что, когда пользователи используют средство чтения с экрана, чувство границы и четкое указание начала и конца потеряны, что затрудняет для пользователей с нарушениями зрения перемещаться по списку.

Элемент управления RadioButtons также не поддерживает перечисление, так как элемент управления предназначен для хранения разумного количества элементов (см. Правильно ли этот элемент управления?).

Выбор следует фокусу

При использовании клавиатуры для навигации между элементами в группе RadioButtons фокус перемещается от одного элемента к следующему, при этом новый элемент автоматически выбирается, а фокус с предыдущего элемента снимается.

Фокус можно перемещать, не изменяя выделение, с помощью клавиш CTRL+со стрелками для перехода. После перемещения фокуса можно использовать клавишу Пробел для выбора элемента, который в текущий момент имеет фокус.

Навигация с помощью игровой панели и удаленного управления

Если вы используете геймпад или пульт дистанционного управления для перемещения между переключателями, поведение "выбор следует за фокусом" отключено, и пользователь должен нажать кнопку "A", чтобы выбрать переключатель, который в настоящее время имеет фокус.

Поведение доступности

В следующей таблице описывается, как экранный диктор обрабатывает группу RadioButtons и что объявляется. Это поведение зависит от того, как пользователь задал параметры сведений экранного диктора.

Создание группы WinUI RadioButtons

Приложение Галерея WinUI 3 включает интерактивные примеры большинства элементов управления, возможностей и функциональности WinUI 3. Получите приложение из Microsoft Store или получите исходный код на GitHub

Элемент управления RadioButtons использует модель содержимого, аналогичную ItemsControl. Это означает, что вы можете:

• Заполните его, добавив элементы непосредственно в коллекцию Items или привязав данные к свойству ItemsSource.
• Используйте свойства SelectedIndex или SelectedItem, чтобы получить и задать выбранный параметр.
• Обработайте событие SelectionChanged, чтобы выполнить действие при выборе опции.

Здесь вы объявляете простой элемент управления RadioButtons с тремя параметрами. Свойство заголовка задано для предоставления метки группе, а для свойства SelectedIndex задан параметр по умолчанию.

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

Результат выглядит следующим образом:

Чтобы выполнить действие, когда пользователь выбирает параметр, обработайте событие SelectionChanged. Здесь вы изменяете цвет фона элемента Border с именем 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;
        }
    }
}

Состояния выделения

Переключатель имеет два состояния: выбрано или снято. Если параметр выбран в группе RadioButtons, его значение можно получить из свойства SelectedItem, а также его расположение в коллекции из свойства SelectedIndex. Радиокнопку можно сбросить, если пользователь выбирает другую радиокнопку в той же группе, но нельзя сбросить её, если пользователь выберет её снова. Однако вы можете программно очистить группу переключателей, установив значение SelectedItem = nullили SelectedIndex = -1. (Установка SelectedIndex для любого значения за пределами диапазона коллекции Items не приводит к выбору.)

Содержимое RadioButtons

В предыдущем примере вы заполняли элемент управления RadioButtons простыми строками. Элемент управления предоставил переключатели и использовал строки в качестве метки для каждой из них.

Однако вы можете заполнить элемент управления RadioButtons любым объектом. Как правило, объект должен предоставить строковое представление, которое можно использовать в качестве текстовой метки. В некоторых случаях изображение может быть подходящим вместо текста.

Здесь элементы SymbolIcon используются для настройки элемента управления.

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

Вы также можете использовать отдельные элементы управления RadioButton для заполнения элементов RadioButtons. Это особый случай, который мы обсудим позже. См. элементы управления RadioButton в группе RadioButtons.

Преимущество использования любого объекта заключается в том, что вы можете привязать элемент управления RadioButtons к пользовательскому типу в модели данных. В следующем разделе показано это.

Привязка данных

Элемент управления RadioButtons поддерживает привязку данных к свойству ItemsSource. В этом примере показано, как привязать элемент управления к пользовательскому источнику данных. Внешний вид и функциональные возможности этого примера совпадают с предыдущим примером цвета фона, но здесь цветовые кисти хранятся в модели данных, а не создаются в обработчике событий SelectionChanged.

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

Элементы управления RadioButton в группе кнопок RadioButtons

Отдельные элементы управления RadioButton можно использовать для заполнения элементов RadioButtons. Это можно сделать, чтобы получить доступ к определенным свойствам, таким как AutomationProperties.Name; или у вас может быть существующий код RadioButton, но вы хотите воспользоваться преимуществами макета и навигации 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>

Если вы используете элементы управления RadioButton в группе RadioButtons, элемент управления RadioButtons знает, как представить RadioButton, поэтому в конечном итоге не будет двух кругов выбора.

Однако есть некоторые действия, о которых вы должны знать. Мы рекомендуем обрабатывать состояние и события для отдельных элементов управления или на RadioButtons, но не одновременно, чтобы избежать конфликтов.

В этой таблице показаны связанные события и свойства обоих элементов управления.

Если вы обрабатываете события в отдельном RadioButton, например Checked или Unchecked, а также обрабатываете событие RadioButtons.SelectionChanged, оба события будут срабатывать. Сначала происходит событие RadioButton, а затем происходит событие RadioButtons.SelectionChanged, что может привести к конфликтам.

Свойства IsChecked, SelectedItemи SelectedIndex остаются синхронизированными. Изменение одного свойства обновляет остальные два.

Свойство RadioButton.GroupName игнорируется. Группа создается средством управления RadioButtons.

Определение нескольких столбцов

По умолчанию элемент управления RadioButtons располагает свои радио-кнопки по вертикали в одном столбце. Вы можете задать свойство MaxColumns, чтобы элемент управления упорядочил переключатели в нескольких столбцах. (При этом они размещаются в основном порядке столбца, где элементы заполняются сверху вниз, а затем слева направо.

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

Создание собственной группы RadioButton

Переключатели работают в группах. Вы можете группировать отдельные элементы управления RadioButton двумя способами:

• Поместите их в один родительский контейнер.
• Установите для свойства GroupName каждого переключателя одинаковое значение.

В этом примере первая группа радиокнопок неявно сгруппирована тем, что находятся в одной панели стека. Вторая группа делится между двумя панелями стека, поэтому GroupName используется для явной группировки их в одну группу.

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

Эти две группы элементов управления RadioButton выглядят следующим образом:

Состояния переключателей типа радиокнопки

Радиокнопка имеет два состояния: выбрано или снято. При выборе переключателя свойство IsCheckedtrue. При очистке радиокнопки, ее свойство IsChecked становится false. Переключатель можно очистить, если пользователь выбирает другой переключатель в той же группе, но его нельзя очистить, когда он выбирает его снова. Однако вы можете программно очистить радиокнопку, установив для свойства IsChecked значение false.

Визуальные элементы для рассмотрения

Интервалы по умолчанию отдельных элементов управления RadioButton отличаются от интервалов, предоставляемых группой RadioButtons. Чтобы применить интервал RadioButtons к отдельным элементам управления RadioButton, задайте значение Margin равное 0,0,7,3, как показано здесь.

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

На следующих изображениях показано предпочтительное расстояние радиокнопок в группе.

UWP и WinUI 2

Элемент управления RadioButtons для приложений UWP входит в состав WinUI 2. Дополнительные сведения, включая инструкции по установке, см. в WinUI 2. API для этих элементов управления существует как в пространствах имен Windows.UI.Xaml.Controls, так и в Microsoft.UI.Xaml.Controls.

Существует два способа создания групп радиокнопок.

• Начиная с WinUI 2.3, мы рекомендуем элемент управления RadioButtons. Этот элемент управления упрощает макет, обрабатывает навигацию по клавиатуре и доступность и поддерживает привязку к источнику данных.
• Вы можете использовать группы отдельных элементов управления RadioButton. Если приложение не использует WinUI 2.3 или более поздней версии, это единственный вариант.

Мы рекомендуем использовать последнюю версию WinUI 2, чтобы получить самые актуальные стили и шаблоны для всех элементов управления.

Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc) для представления API библиотеки пользовательского интерфейса Windows, включенных в проект. Дополнительные сведения см. в статье Начало работы с WinUI 2.

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

<muxc:RadioButtons />

Связанные разделы

• Кнопки
• переключатели переключателей
• флажки
• списки и поля со списком
• ползунки управления
• класс RadioButtons
• RadioButton класс