Элементы управления в WPF. CheckBox и RadioButton

Элементы управления CheckBox и RadioButton относится в группе элементов для выбора значений. При этом, CheckBox (флажок) позволяет определять до трех состояний (выбран, не выбран и не определен), а элемент RadioButton предназначен для выбора одного из нескольких значений.

Родительский класс ToggleButton

Оба элемента управления — и CheckBox и RadioButton имеют одного и того же родителя — класс ToggleButton. Этот класс предоставляет нам следующие свойства:

Также, ToggleButton предоставляет нам для работы три события:

public event System.Windows.RoutedEventHandler Checked;

public event System.Windows.RoutedEventHandler Indeterminate;

public event System.Windows.RoutedEventHandler Unchecked;

Хоть ToggleButton и не является абстрактным и мы можем создавать объекты этого типа, всё же основными элементами выбора в WPF являются CheckBox и RadioButton. Рассмотрим их работу на примерах.

CheckBox

CheckBox(флажок) — это наследник от класса ToggleButton, принимающий три состояния: Checked (выбран), Unchecked (не выбран) и Intermediate (не определен). За то, в каком состоянии находится флажок отвечает свойство IsChecked, унаследованное от ToggleButton. Пример создания флажка в XAML:

<StackPanel>
    <CheckBox Content="Выбран" IsChecked="True"/>
    <CheckBox Content="Не выбран" IsChecked="False"/>
    <CheckBox Content="Не определен" IsThreeState="True" IsChecked="{x:Null}"/>
</StackPanel>

Результат будет следующий:

Стоит обратить внимание на третий CheckBox с неопределенным значением. У этого элемента дополнительно определен атрибут IsThreeState="True", который указывает на то, что флажок может принимать три состояния. Если не указать этот атрибут, то при запуске приложения CheckBox будет находится в указанном в коде XAML неопределенном состоянии, однако, если этот состояние поменять на любое другое, например, на состояние Checked, то впоследствии, вернуть состояние Intermediate будет невозможно. 

Допишем наш пример, чтобы продемонстрировать использование событий.

<StackPanel>
    <CheckBox Content="Выбран" IsChecked="True" 
              Checked="OnChecked"
              Unchecked="OnUnchecked"/>
    
    <CheckBox Content="Не выбран" IsChecked="False"
              Checked="OnChecked"
              Unchecked="OnUnchecked"/>
    
    <CheckBox Content="Не определен" IsThreeState="True" IsChecked="{x:Null}"
              Checked="OnChecked"
              Unchecked="OnUnchecked"
              Indeterminate="OnIndeterminate"/>
</StackPanel>

В C# обработчики событий будут следующими:

private void OnChecked(object sender, RoutedEventArgs e)
{
    if (e.Source != null)
    {
        (e.Source as CheckBox).Content = "Выбран";
    }
}

private void OnUnchecked(object sender, RoutedEventArgs e)
{
    if (e.Source != null)
    {
        (e.Source as CheckBox).Content = "Не выбран";
    }
}

private void OnIndeterminate(object sender, RoutedEventArgs e)
{
    if (e.Source != null)
    {
        (e.Source as CheckBox).Content = "Не определен";
    }
}

Теперь можно запустить приложение и убедиться, что текст рядом с флажком меняется в зависимости от состояния в которое переходит CheckBox:

RadioButton

Элемент RadioButton позволяет выбрать только один вариант из множества и, при этом, может находиться только в двух состояниях — выбран или не выбран. Этот элемент управления предоставляет нам следующее свойство:

Рассмотрим следующий пример:

<Window x:Class="WpfApp5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp5"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <RadioButton Content="Вариант 1"/>
        <RadioButton Content="Вариант 2"/>
        <RadioButton Content="Вариант 3"/>
        <RadioButton Content="Вариант 4"/>
    </StackPanel>
</Window>

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

Разделим теперь элементы по группам:

<Window x:Class="WpfApp5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp5"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <RadioButton GroupName="Группа 1" Content="Вариант 1"/>
        <RadioButton GroupName="Группа 1" Content="Вариант 2"/>
        <RadioButton GroupName="Группа 2" Content="Вариант 3"/>
        <RadioButton GroupName="Группа 2" Content="Вариант 4"/>
    </StackPanel>
</Window>

Теперь мы можем выбрать по одному элементу RadioButton в каждой из двух групп:

Итого

Сегодня мы рассмотрели компоненты CheckBox и RadioButton WPF. Эти элементы управления имеют одного общего родителя — класс ToggleButton и могут находиться в трех различных состояниях — выбранном, невыбранном и неопределенном. Чтобы CheckBox мог принимать три состояния, необходимо установить его свойство IsThreeState в значение true.