RadioButton

Класс RadioButton (радиокнопка) представляет кнопку-переключатель, которая позволяет пользователя выбрать один вариант из группы вариантов.

Среди свойств класса RadioButton стоит выделить следующие:

• Content: содержимое кнопки в виде текста или объекта View, отображается справа от круга кнопки.

• GroupName: определяет имя группы, к которой принадлежит данная радиокнопка

• Value: определяет некоторое значение (представляет тип object), связанное с данной радиокнопкой

• BorderColor: представляет тип Color и определяет цвет границы.

• BorderWidth: представляет тип double и определяет толщину границы.

• CharacterSpacing: представляет тип double и определяет расстояние между символами текста при кнопке.

• CornerRadius: представляет тип int и определяет радиус кнопки.

• FontAttributes: представляет тип FontAttributes и определяет стиль текста.

• FontAutoScalingEnabled: представляет тип bool и определяет, будет ли применяться системное масштабирование. По умолчанию равно true, то есть масщтабирование применяется.

• FontFamily: представляет тип string и определяет используемое семейство шрифтов.

• FontSize: представляет тип double и определяет размер шрифта.

• TextColor: представляет тип Color и определяет цвет текста.

• IsChecked: указывает, находится ли радиокнопка в отмеченном состоянии (значение true) или неотмеченном (значение false)

Обычно работа ведется не с одной радиокнопкой, а с группой радиокнопок, из которой пользователь выбирает одну. Для управления группой радиокнопок в .NET MAUI есть класс RadioButtonGroup, который имеет ряд свойств для управления группой радиокнопок:

• GroupName: название группы.

• SelectedValue: выбранный объект RadioButton

Создание радиокнопок в 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="HelloApp.MainPage">
    <StackLayout>
        <Label x:Name="header" Text="Выберите язык программирования" />
        <RadioButton GroupName="languages" Content="C#" IsChecked="True" />
        <RadioButton GroupName="languages" Content="Java" />
        <RadioButton GroupName="languages" Content="C++" />
    </StackLayout>
</ContentPage>

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

Чтобы упростить определение группы, можно у контейнера через атрибут RadioButtonGroup.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="HelloApp.MainPage">
    <StackLayout RadioButtonGroup.GroupName="languages">
        <Label x:Name="header" Text="Выберите язык программирования" />
        <RadioButton Content="C#"  />
        <RadioButton Content="Java" />
        <RadioButton Content="C++" />
    </StackLayout>
</ContentPage>

С каждой радиокнопкой может быть связано некоторое значение, оно передается через свойство Value:

<?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="HelloApp.MainPage">
    <StackLayout RadioButtonGroup.GroupName="languages">
        <Label x:Name="header" Text="Выберите язык программирования" />
        <RadioButton Content="C#" Value="C#"  />
        <RadioButton Content="Java" Value="Java" />
        <RadioButton Content="C++" Value="C++" />
    </StackLayout>
</ContentPage>

Обработка выбора радиокнопки

Для отслеживания изменения состояния радиокнопкт класс RadioButton определяет событие CheckedChanged. Его параметр CheckedChangedEventArgs с помощью свойства Value позволяет получить новое состояние - новое значения свойства IsChecked.

Гапример, мы могли бы определить для каждой кнопки обработчик данного события:

<?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="HelloApp.MainPage">
    <StackLayout RadioButtonGroup.GroupName="languages">
        <Label x:Name="header" Text="Выберите язык программирования" />
        <RadioButton Content="C#" Value="C#" CheckedChanged="OnLanguageCheckedChanged" />
        <RadioButton Content="Java" Value="Java"  CheckedChanged="OnLanguageCheckedChanged" />
        <RadioButton Content="C++" Value="C++"  CheckedChanged="OnLanguageCheckedChanged" />
    </StackLayout>
</ContentPage>

В данном случае при выборе каждой кнопки будет срабатывать обработчик OnLanguageCheckedChanged. Определим его в файле связанного кода:

namespace HelloApp;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
    }
    void OnLanguageCheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        RadioButton selectedRadioButton = ((RadioButton)sender);
        if(header!=null)
            header.Text = $"Выбранный язык: {selectedRadioButton.Value}";
    }
}

В данном случае в обработчике события получаем выбранный объект RadioButton и затем значение его свойства Value передаем в текст метки header.

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

Аналогичный пример в коде C#:

using static System.Net.Mime.MediaTypeNames;

namespace HelloApp;

class StartPage : ContentPage
{
    Label header = new Label { Text = "Выберите язык программирования" };
    public StartPage()
    {
        string[] langs = { "C#", "Java", "C++" };
       
        StackLayout stackLayout = new StackLayout();
        stackLayout.Add(header);  

        foreach(var lang in langs)
        {
            RadioButton langRadioButton= new RadioButton { GroupName = "languages", Content = lang, Value = lang };
            langRadioButton.CheckedChanged += OnLanguageCheckedChanged;
            stackLayout.Add(langRadioButton);
        }
        Content = stackLayout;
    }

    void OnLanguageCheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        RadioButton selectedRadioButton = ((RadioButton)sender);
        if (header != null)
            header.Text = $"Выбранный язык: {selectedRadioButton.Value}";
    }
}

Кастомное содержимое

Обычно в качестве содержимого радиокнопки применяется текста, как в примере выше. Но в принципе это может быть произвольный объект. Например, испольуем изображения. Пусть в проекте в папке Resourses/Images находятся используемые изображения. В моем случае это файлы изображений csharp.jpg, java.jpg и cpp.jpg. Тогда их использование в элементе RadioButton в 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="HelloApp.MainPage">
    <StackLayout RadioButtonGroup.GroupName="languages">
        <Label x:Name="header" Text="Выберите язык программирования" />
        <RadioButton Value="C#">
            <RadioButton.Content>
                <Image Source="csharp.jpg" WidthRequest="25" HeightRequest="25" />
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Java">
            <RadioButton.Content>
                <Image Source="java.jpg" WidthRequest="25" HeightRequest="25"  />
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="C++">
            <RadioButton.Content>
                <Image Source="cpp.jpg" WidthRequest="25" HeightRequest="25"  />
            </RadioButton.Content>
        </RadioButton>
    </StackLayout>
</ContentPage>