Флажки

Статья
07/04/2024

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

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

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

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

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

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

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

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

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

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

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

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

UWP и WinUI 2

Внимание

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

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

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

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

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

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

Важные API: класс CheckBox, checked event, IsChecked property, Content property

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

Приложение коллекции 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 и Unchecked.

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

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

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

Несколько флажков могут совместно использовать один обработчик событий. В этом примере создаются четыре флажка для выбора начинок пиццы. Четыре флажка используют тот же обработчик событий 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 и может иметь три состояния:

Штат	Свойство	Значение
включен	IsChecked	true
не включен	IsChecked	false
сомнительный	IsChecked	NULL

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

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

<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 programmatically. The indeterminate state should
    // only be set programmatically, 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

Обработка событий щелчка и проверки

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

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

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

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

Поделиться через

Флажки

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

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

UWP и WinUI 2

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

Создание простого флажка

Привязка к IsChecked

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

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

Обработка событий щелчка и проверки

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

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

Связанные статьи

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

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