Флажок

Обзор примера

Пользовательский интерфейс мультиплатформенного приложения .NET (.NET MAUI) CheckBox — это тип кнопки, которую можно проверить или пустую. Если флажок установлен, считается, что он включен. Если флажок пуст, он считается отключенным.

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

• IsChecked, типа bool, который указывает, установлен ли CheckBox. Это свойство имеет режим привязки TwoWayпо умолчанию.
• Color, тип Color, указывающий цвет CheckBox.

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

CheckBox определяет CheckedChanged событие, которое возникает при изменении свойства IsChecked, когда оно изменено пользователем или установлено приложением IsChecked. Объект CheckedChangedEventArgs, сопровождающий событие CheckedChanged, имеет одно свойство с именем Valueтипа bool. При возникновении события значение Value свойства присваивается новому значению IsChecked свойства.

Создание флажка

В следующем примере показано, как создать экземпляр CheckBox в XAML:

<CheckBox />

Этот XAML приводит к отображению внешнего вида, показанного на следующем снимке экрана:

По умолчанию CheckBox пустой. CheckBox может быть проверено пользователем, или можно задать для свойства IsChecked значение true.

<CheckBox IsChecked="true"
          SemanticProperties.Description="Agree to terms and conditions" />

Этот XAML приводит к отображению внешнего вида, показанного на следующем снимке экрана:

Кроме того, CheckBox можно создать в коде:

CheckBox checkBox = new CheckBox { IsChecked = true };

Реагирование на изменение состояния CheckBox

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

<CheckBox CheckedChanged="OnCheckBoxCheckedChanged" />

Файл "code-behind" содержит обработчик события CheckedChanged:

void OnCheckBoxCheckedChanged(object sender, CheckedChangedEventArgs e)
{
    // Perform required operation after examining e.Value
}

Аргумент sender является CheckBox ответственным за это событие. Это можно использовать для доступа к объекту CheckBox или для различения нескольких CheckBox объектов, использующих один и тот же CheckedChanged обработчик событий.

Кроме того, обработчик событий для CheckedChanged события можно зарегистрировать в коде:

CheckBox checkBox = new CheckBox { ... };
checkBox.CheckedChanged += (sender, e) =>
{
    // Perform required operation after examining e.Value
};

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

Обработчик событий CheckedChanged можно устранить, используя привязку данных и триггеры для реагирования на состояние CheckBox, когда оно отмечено или пусто:

<CheckBox x:Name="checkBox" />
<Label Text="Lorem ipsum dolor sit amet, elit rutrum, enim hendrerit augue vitae praesent sed non, lorem aenean quis praesent pede.">
    <Label.Triggers>
        <DataTrigger x:DataType="CheckBox"
                     TargetType="Label"
                     Binding="{Binding Source={x:Reference checkBox}, Path=IsChecked}"
                     Value="true">
            <Setter Property="FontAttributes"
                    Value="Italic, Bold" />
            <Setter Property="FontSize"
                    Value="18" />
        </DataTrigger>
    </Label.Triggers>
</Label>

В этом примере Label использует выражение привязки в датчике данных для мониторинга свойства IsChecked объекта CheckBox. Когда это свойство становится , свойства и изменяются. Когда свойство IsChecked возвращается к false, свойства FontAttributes и FontSize объекта Label возвращаются в начальное состояние.

На следующем снимку экрана показано Label форматирование при CheckBox проверке:

Дополнительные сведения об триггерах см. в разделе "Триггеры".

Отключение флажка

Иногда приложение вводит состояние, в котором проверяемая CheckBox операция не является допустимой. В таких случаях CheckBox можно отключить, задав для свойства IsEnabled значение false.

Внешний вид CheckBox

Помимо свойств, которые CheckBox наследует из класса View, CheckBox также определяет свойство Color, которое задает его цвет как Color.

<CheckBox Color="Red" />

На следующем снимка экрана показан ряд проверенных CheckBox объектов, где каждый объект имеет его Color свойство, заданное для разных Color:

Визуальные состояния CheckBox

CheckBox IsChecked VisualState имеет значение, которое можно использовать для запуска визуального изменения CheckBox при проверке.

В следующем примере XAML показано, как определить визуальное состояние для IsChecked состояния:

<CheckBox ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="Color"
                                Value="Red" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="IsChecked">
                    <VisualState.Setters>
                        <Setter Property="Color"
                                Value="Green" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</CheckBox>

В этом примере IsCheckedVisualState указывает, что когда CheckBox отмечен, его свойству Color будет присвоен зеленый цвет. Элементы NormalVisualState указывают, что в обычном состоянии CheckBox его свойство Color будет установлено на красный. Таким образом, общий эффект заключается в том, что CheckBox красный, когда он пуст, и зелёный, когда он отмечен.

Для получения дополнительной информации о визуальных состояниях см. раздел Визуальные состояния.