Переключатели в .NET MAUI: RadioButton

Продолжаем изучать типы переключателей в .NET MAUI. В отличие от CheckBox и Switch, которые предназначены для «включения/отключения» каких-либо опций, RadioButton предназначен для одиночного выбора из нескольких вариантов и поэтому таких элементов на странице приложения обычно минимум два.

Свойства RadioButton

Элемент RadioButton предоставляет следующие свойства:

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

public event EventHandler? CheckedChanged;

c помощью которого мы можем отслеживать состояние элемента.

Группирование RadioButton

Для того, чтобы создать группу из нескольких RadioButton, мы можем использовать неявное и явное группирование. Неявное группирование происходит, когда мы помещаем несколько элементов RadioButton в какой-либо контейнер. В качестве примера, создайте новое приложение .NET MAUI и измените код файла MainPage.xaml следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp8.MainPage">
    <VerticalStackLayout>
        <RadioButton Content="Выбор 1"></RadioButton>
        <RadioButton Content="Выбор 2"></RadioButton>
        <RadioButton Content="Выбор 3"></RadioButton>
        <RadioButton Content="Выбор 4"></RadioButton>
    </VerticalStackLayout>
</ContentPage>

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

Такой подход к группированию нескольких RadioButton называется «неявное группирование«. Неявное группирование, как видите, очень простое — от нас требуется только поместить все RadioButton в один контейнер. Однако, для того, чтобы поведение нашего приложение было единообразным на различных платформах, разработчики .NET MAUI рекомендуют все же использовать явное группирование.

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp8.MainPage">
    <VerticalStackLayout>
        <Label Text="Первая группа"/>
        <RadioButton GroupName="first" Content="Выбор 1"></RadioButton>
        <RadioButton GroupName="first" Content="Выбор 2"></RadioButton>
        <Label Text="Вторая группа"/>
        <RadioButton GroupName="second" Content="Выбор 3"></RadioButton>
        <RadioButton GroupName="second" Content="Выбор 4"></RadioButton>
    </VerticalStackLayout>
</ContentPage>

Здесь мы, используя свойство GroupName, сгруппировали элементы RadioGroup по два. Теперь, несмотря на то, что все элементы находятся в одном родительском контейнере, выбрать мы сможем два варианта. Например,  Второй способ явного группирования RadioButton в .NET MAUI — это воспользоваться объектом RadioButtonGroup, который предоставляет нам два присоединенных свойства:

• GroupName — название группы. Это свойство устанавливает одно и то же значение у каждого свойства GroupName RadioButton в группе.
• SelectedValue — выбранный объект RadioButton

Снова перепишем наше приложение, но теперь с использованием RadioButtonGroup

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp8.MainPage">
    <VerticalStackLayout>
        <Label Text="Первая группа"/>
        
        <VerticalStackLayout RadioButtonGroup.GroupName="first">
            <RadioButton Content="Выбор 1"></RadioButton>
            <RadioButton Content="Выбор 2"></RadioButton>
        </VerticalStackLayout>
        
        <Label Text="Вторая группа"/>
        <VerticalStackLayout RadioButtonGroup.GroupName="first">
            <RadioButton Content="Выбор 3"></RadioButton>
            <RadioButton Content="Выбор 4"></RadioButton>
        </VerticalStackLayout>
        
    </VerticalStackLayout>
</ContentPage>

Обратите внимание на то, что наши RadioButton расположены в разных контейнерах, но так как у каждого контейнера установлено одно и то же значение свойства RadioButtonGroup.GroupName, то в итоге мы получим только одну группу элементов:

Отслеживание состояния RadioButton

Для того, чтобы отслеживать состояние RadioButton, мы должны создать обработчик события CheckedChanged и назначить его соответствующему событию элемента. Добавим в файл отдельного кода MainPage.xaml.cs следующим обработчик:

public partial class MainPage : ContentPage
{
     public MainPage()
    {
        InitializeComponent();
    }

    //Обработчик события для RadioButton
    void OnRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        if (e.Value)
           resultLabel.Text = $"Выбор сделан: {((RadioButton)sender).Value}";
    }
}

Здесь resultLabel — метка, которую мы пока ещё не добавили на страницу. Теперь нам необходимо назначить этот обработчик для всех RadioButton в группе. Перепишем MainPage.xaml следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp8.MainPage">
    <VerticalStackLayout>
        <Label Text="Первая группа"/>
        
        <VerticalStackLayout RadioButtonGroup.GroupName="first">
            <RadioButton Content="Выбор 1" 
                         Value="Первый" 
                         CheckedChanged="OnRadioButtonCheckedChanged"/>
            <RadioButton Content="Выбор 2" 
                         Value="Второй"
                         CheckedChanged="OnRadioButtonCheckedChanged"/>
        </VerticalStackLayout>
        
        <Label Text="Вторая группа"/>
        <VerticalStackLayout RadioButtonGroup.GroupName="first">
            <RadioButton Content="Выбор 3" 
                         Value="Третий"
                         CheckedChanged="OnRadioButtonCheckedChanged"/>
            <RadioButton Content="Выбор 4" 
                         Value="Четвертый"
                         CheckedChanged="OnRadioButtonCheckedChanged"/>
        </VerticalStackLayout>


        <Label x:Name="resultLabel"/>


    </VerticalStackLayout>
</ContentPage>

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

Произвольное содержимое в RadioButton

Еще одним важным отличием RadioButton от CheckBox и Switch является то, что в качестве содержимого для RadioButton мы можем назначать произвольные элементы. Например, разместим в папке Resources/Images несколько картинок:

Теперь назначим эти картинки в качестве содержимого нашим RadioButton:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp8.MainPage">
    <VerticalStackLayout>
        <Label Text="Первая группа"/>
        
        <VerticalStackLayout RadioButtonGroup.GroupName="first">
            <RadioButton Value="Первый"
                         CheckedChanged="OnRadioButtonCheckedChanged">
                <RadioButton.Content>
                    <Image Source="icon1.png" HeightRequest="24" WidthRequest="24"></Image>
                </RadioButton.Content>
            </RadioButton>

            <RadioButton Value="Второй"
                         CheckedChanged="OnRadioButtonCheckedChanged">
                <RadioButton.Content>
                    <Image Source="icon2.png" HeightRequest="24" WidthRequest="24"></Image>
                </RadioButton.Content>
            </RadioButton>
        </VerticalStackLayout>
        
        <Label Text="Вторая группа"/>
        <VerticalStackLayout RadioButtonGroup.GroupName="first">
            <RadioButton Value="Третий"
                         CheckedChanged="OnRadioButtonCheckedChanged">
                <RadioButton.Content>
                    <Image Source="icon3.png" HeightRequest="24" WidthRequest="24"></Image>
                </RadioButton.Content>
            </RadioButton>
            <RadioButton Value="Четвертый"
                         CheckedChanged="OnRadioButtonCheckedChanged">
                <RadioButton.Content>
                    <Image Source="icon4.png" HeightRequest="24" WidthRequest="24"></Image>
                </RadioButton.Content>
            </RadioButton>
        </VerticalStackLayout>


        <Label x:Name="resultLabel"/>


    </VerticalStackLayout>
</ContentPage>

Запустим приложение и убедимся, что теперь для наших RadioButton отображаются картинки.

Итого

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