Флажки

Статья
07/13/2023

Флажок используется для выбора или отмены выбора элементов действий. Его можно использовать для одного элемента или списка из нескольких элементов с возможностью выбора. Элемент управления предусматривает три состояния выделения: "не выбрано", "выбрано" и "не определено". Состояние "не определено" используется, когда в подсписке вариантов есть одновременно состояния "не выбрано" и "выбрано".

Пример состояний флажка

Выбор правильного элемента управления

Используйте одно поле проверка для двоичного варианта "да/ нет", например со сценарием входа "Запомнить меня?" или с соглашением об условиях обслуживания.

Один флажок используется для отдельного выбора

Основное различие между флажком и переключателем при двоичном выборе состоит в том, что флажок предназначен для обозначения состояния, а переключатель — для обозначения действия. Действие по флажку можно отложить (например, как часть отправки формы), тогда как действие по переключателю требуется выполнить сразу. Кроме того, множественный выбор можно сделать только с помощью флажков.

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

Создавайте группу флажков, когда пользователи могут выбирать любое сочетание вариантов.

Выбор нескольких вариантов с помощью флажков

Если варианты можно сгруппировать, вы можете использовать флажок с неопределенным состоянием для представления всей группы. Неопределенное состояние флажка используется, когда пользователь выбирает лишь некоторые (не все) подэлементы в группе.

Флажки, используемые для обозначения смешанного выбора

С помощью элементов управления флажок и переключатель пользователь может выбирать варианты из списка. Флажки позволяют пользователю выбирать сочетание вариантов. В отличие от них, при помощи переключателей пользователь может выбрать один из взаимоисключающих вариантов. Если есть несколько вариантов, но выбрать можно только один из них, используйте переключатель.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

API UWP:класс CheckBox, событие Checked, свойство IsChecked, свойство Content
Откройте приложение "Коллекция WinUI 2" и просмотрите checkBox в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления. WinUI 2.2 или более поздней версии включает новый шаблон для этого элемента управления, использующий скругленные углы. Дополнительные сведения см. в разделе о радиусе угла.

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

Важные API: класс CheckBox, событие Checked, свойство IsChecked, свойство Content

Откройте приложение коллекции WinUI 3 и просмотрите checkBox в действии.

Приложение коллекции WinUI 3 содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

Создание простого проверка поля

Чтобы присвоить флажку метку, установите свойство Content. Метка отображается рядом с флажком.

Этот код XAML позволяет создать один флажок, который используется для принятия условий соглашения перед отправкой формы.

<CheckBox x:Name="termsOfServiceCheckBox"
          Content="I agree to the terms of service."/>

Вот код для создания того же флажка.

CheckBox termsOfServiceCheckBox = new CheckBox();
termsOfServiceCheckBox.Content = "I agree to the terms of service.";

Привязка к свойству IsChecked

Используйте свойство IsChecked, чтобы определять, установлен ли флажок или снят. Вы можете привязать значение свойства IsChecked к другому двоичному значению. Однако из-за того, что свойство IsChecked имеет логическое значение, допускающее значение null, для его привязки к логическому свойству вам потребуется преобразовать величину или привести тип. Это зависит от фактического типа привязки, а примеры для каждого возможного типа можно найти ниже.

В этом примере свойство IsChecked флажка для принятия условий соглашения привязано к свойству IsEnabled кнопки "Отправить". Кнопка "Отправить" включена, только если пользователь принял условия соглашения.

Использование x:Bind

Примечание

Здесь мы показываем только соответствующий код. См.сведения о привязке данных. Конкретные сведения о {x:Bind} (например, приведение) подробно описаны в расширении разметки {x:Bind}.

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay}"/>
</StackPanel>

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

<Button Content="Submit"
        IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay, FallbackValue=False}"/>

Использование x:Bind или Binding

Примечание

Мы показываем здесь только соответствующий код с помощью {x:Bind}. В примере {Binding} мы заменяем {x:Bind} на {Binding}. Дополнительные сведения о привязке данных, преобразователях значений и различиях между расширениями разметки {x:Bind} и {Binding} см. в разделе Общие сведения о привязке данных.

...
<Page.Resources>
    <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter"/>
</Page.Resources>

...

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind termsOfServiceCheckBox.IsChecked,
                        Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"/>
</StackPanel>

public class NullableBooleanToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool?)
        {
            return (bool)value;
        }
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is bool)
            return (bool)value;
        return false;
    }
}

Обработка событий Click и Checked

Чтобы выполнять действие при изменении состояния флажка, вы можете обрабатывать событие Click или события Checked и Unchecked.

Событие Click происходит при изменении состояния Checked При обработке события Click используйте свойство IsChecked, чтобы определить состояние флажка.

События Checked и Unchecked происходят независимо друг от друга. Следует обрабатывать оба этих события, чтобы реагировать на изменения состояния флажка.

В следующих примерах мы продемонстрируем обработку события Click, а также событий Checked и Unchecked.

Несколько флажков могут совместно использовать один и тот же обработчик событий. В этом примере будет создано 4 флажка для выбора соуса для пиццы. Эти четыре флажка используют один и тот же обработчик событий Click, чтобы обновлять список выбранных соусов.

<StackPanel Margin="40">
    <TextBlock Text="Pizza Toppings"/>
    <CheckBox Content="Pepperoni" x:Name="pepperoniCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Beef" x:Name="beefCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Mushrooms" x:Name="mushroomsCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Onions" x:Name="onionsCheckbox"
              Click="toppingsCheckbox_Click"/>

    <!-- Display the selected toppings. -->
    <TextBlock Text="Toppings selected:"/>
    <TextBlock x:Name="toppingsList"/>
</StackPanel>

Вот обработчик события Click. При каждом нажатии флажка проверяется, какие флажки установлены, и обновляется список выбранных начинок.

private void toppingsCheckbox_Click(object sender, RoutedEventArgs e)
{
    string selectedToppingsText = string.Empty;
    CheckBox[] checkboxes = new CheckBox[] { pepperoniCheckbox, beefCheckbox,
                                             mushroomsCheckbox, onionsCheckbox };
    foreach (CheckBox c in checkboxes)
    {
        if (c.IsChecked == true)
        {
            if (selectedToppingsText.Length > 1)
            {
                selectedToppingsText += ", ";
            }
            selectedToppingsText += c.Content;
        }
    }
    toppingsList.Text = selectedToppingsText;
}

Использование неопределенного состояния

Элемент управления CheckBox наследует от ToggleButton и может иметь три состояния:

State	Свойство	Применение
установлен	IsChecked	true
снят	IsChecked	false
не определен	IsChecked	null

Чтобы флажок сообщал о неопределенном состоянии, установите для свойства IsThreeState значение true.

В следующем примере свойству IsThreeState флажка "Выбрать все" задано значение true. Флажок "Выбрать все" устанавливается, если установлены все дочерние элементы, снимается, если сняты все дочерние элементы, и не определен в остальных случаях.

<StackPanel>
    <CheckBox x:Name="OptionsAllCheckBox" Content="Select all" IsThreeState="True"
              Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked"
              Indeterminate="SelectAll_Indeterminate"/>
    <CheckBox x:Name="Option1CheckBox" Content="Option 1" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
    <CheckBox x:Name="Option2CheckBox" Content="Option 2" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" IsChecked="True"/>
    <CheckBox x:Name="Option3CheckBox" Content="Option 3" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
</StackPanel>

private void Option_Checked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void Option_Unchecked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void SelectAll_Checked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = true;
}

private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = false;
}

private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
{
    // If the SelectAll box is checked (all options are selected),
    // clicking the box will change it to its indeterminate state.
    // Instead, we want to uncheck all the boxes,
    // so we do this programatically. The indeterminate state should
    // only be set programatically, not by the user.

    if (Option1CheckBox.IsChecked == true &&
        Option2CheckBox.IsChecked == true &&
        Option3CheckBox.IsChecked == true)
    {
        // This will cause SelectAll_Unchecked to be executed, so
        // we don't need to uncheck the other boxes here.
        OptionsAllCheckBox.IsChecked = false;
    }
}

private void SetCheckedState()
{
    // Controls are null the first time this is called, so we just
    // need to perform a null check on any one of the controls.
    if (Option1CheckBox != null)
    {
        if (Option1CheckBox.IsChecked == true &&
            Option2CheckBox.IsChecked == true &&
            Option3CheckBox.IsChecked == true)
        {
            OptionsAllCheckBox.IsChecked = true;
        }
        else if (Option1CheckBox.IsChecked == false &&
            Option2CheckBox.IsChecked == false &&
            Option3CheckBox.IsChecked == false)
        {
            OptionsAllCheckBox.IsChecked = false;
        }
        else
        {
            // Set third state (indeterminate) by setting IsChecked to null.
            OptionsAllCheckBox.IsChecked = null;
        }
    }
}

Получение примера кода

Пример коллекции WinUI . Просмотр всех элементов управления XAML в интерактивном формате.

Флажки

Выбор правильного элемента управления

Рекомендации

UWP и WinUI 2

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

Создание простого проверка поля

Привязка к свойству IsChecked

Использование x:Bind

Использование x:Bind или Binding

Обработка событий Click и Checked

Использование неопределенного состояния

Получение примера кода

Обратная связь

Дополнительные ресурсы

Флажки

Выбор правильного элемента управления

Рекомендации

UWP и WinUI 2

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

Создание простого проверка поля

Привязка к свойству IsChecked

Использование x:Bind

Использование x:Bind или Binding

Обработка событий Click и Checked

Использование неопределенного состояния

Получение примера кода

Похожие статьи

Обратная связь

Дополнительные ресурсы