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

В .NET MAUI используются три вида переключателей: CheckBox — обычный переключатель (флажок), Switch — кнопка-переключатель и RadioButton — кнопка-переключатель с возможностью выбора одного из предложенных вариантов. Сегодня мы рассмотрим возможности работы с первыми двумя из них в нашем приложении .NET MAUI.

Переключатель CheckBox

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

А также одно событие

public event EventHandler? CheckedChanged;

благодаря которому мы можем отслеживать переключение флажка. Продемонстрируем работу с CheckBox. Создайте новое приложение .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">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="32"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
        </Grid.RowDefinitions>
        <CheckBox HorizontalOptions="Start" 
                  Color="Red"  
                  Grid.Row="0" 
                  Grid.Column="0" 
                  CheckedChanged="OnCheckedChange"></CheckBox>
        <Label x:Name="label" 
               HorizontalOptions="Start" 
               VerticalOptions="Center" 
               Grid.Row="0" Grid.Column="1">Включить красный цвет</Label>
    </Grid>
</ContentPage>

Обратите внимание на то, что в CheckBox нет поддержки содержимого. Поэтому, чтобы обозначить цель переключения CheckBox мы используем конструкцию с контейнером Grid (можно и с любым другим, например, StackLayout), в котором размещаем сначала флажок, а затем — метку (Label). Наше приложение теперь будет выглядеть следующим образом: 

Теперь добавим обработчик события CheckedChanged в файл отдельного кода. Перейдем в файл MainPage.xaml.cs и добавим новый обработчик:

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

        //обработчик события
        public void OnCheckedChange(object sender, CheckedChangedEventArgs e)
        {
            if (e.Value) //флажок выбран
            {
                label.TextColor = Color.FromRgb(255, 0, 0);
            }
            else
            {
                label.TextColor = Color.FromRgb(0, 0, 0);
            }
        }
    }

}

Здесь в аргументах обработчика CheckedChangedEventArgs мы получаем значение Value, которое указывает выбран ли CheckBox или нет и, в зависимости от результата, мы меняем цвет текста метки на красный или черный (по умолчанию). Теперь можно запустить приложение и убедиться, что метка меняет цвет текста:Можно также по умолчанию сделать CheckBox включенным, изменив его свойство IsChecked, например, непосредственно в XAML-коде:

<CheckBox HorizontalOptions="Start" 
          Color="Red"  
          IsChecked="true"
          CheckedChanged="OnCheckedChange"></CheckBox>

Переключатель Switch

Переключатель Switch по своей работе похож на CheckBox — он также может находиться в состоянии «Включен» или «Выключен». При этом Switch отличается от CheckBox внешним видом — это уже не флажок, а полноценная кнопка переключатель. Switch предоставляет нам следующие свойства:

Как и CheckBox, Switch предоставляет нам событие переключения:

public event EventHandler<ToggledEventArgs> Toggled;

Воспользуемся компонентом Switch в нашем приложении. Перепишем код 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">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
        </Grid.RowDefinitions>
        <Switch HorizontalOptions="Start" 
                VerticalOptions="Center"
                  OnColor="Red"  
                  Grid.Row="0" 
                  Grid.Column="0" 
                  IsToggled="true"
                  ThumbColor="Green"
                  Toggled="OnToggled"/>
        <Label x:Name="label" 
               HorizontalOptions="Start" 
               VerticalOptions="Center" 
               TextColor="Red"
               Grid.Row="0" Grid.Column="1">Включить красный цвет</Label>
    </Grid>
</ContentPage>

Здесь OnToggled — это обработчик события в файле отдельного кода, который выглядит следующим образом:

//обработчик события
public void OnToggled(object sender, ToggledEventArgs args)
{
    if (args.Value) 
    {
        label.TextColor = Color.FromRgb(255, 0, 0);
    }
    else
    {
        label.TextColor = Color.FromRgb(0, 0, 0);
    }
}

Запустим приложение и посмотрим на результат. Так выглядит приложение при запуске:

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

Итого

Компоненты CheckBox и Switch схожи по своему действию. Оба компонента могут находиться в двух состояниях: включен или выключен. Также оба компонента предоставляют нам событие с помощью которого мы можем отслеживать состояние переключателя. Основное различие заключается во внешнем виде: если CheckBox — это обычный «флажок», то Switch — это полноценная кнопка, для которой мы можем установить два цвета (цвет самого переключателя и цвет заливки компонента во включенном состоянии.