Флажки

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

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

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

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

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

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

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

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

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

• Убедитесь, что цель и текущее состояние флажка не заданы.

• Ограничение текстового содержимого флажка не более чем на две строки.

• Введите метку флажка в качестве инструкции, что галочку делает значение true, и отсутствие флажка делает значение false.

• Используйте шрифт по умолчанию, если вы не хотите использовать другой бренд.

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

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

• Не помещайте две группы флажка рядом друг с другом. Используйте метки групп для разделения групп.

• Не используйте флажок в качестве элемента управления "вкл/выкл." или для выполнения команды; Вместо этого используйте переключатель переключателя.

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

• Используйте неопределенное состояние, чтобы указать, что параметр задан для некоторых, но не для всех вариантов.

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

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

  

  Вместо этого используйте группу переключателей с тремя параметрами.

  

UWP и WinUI 2

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

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

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

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

<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

...
<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 и может иметь три состояния:

Чтобы флажок сообщал о неопределенном состоянии, установите для свойства 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 в интерактивном формате.

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

• Класс CheckBox
• Переключатели
• Тумблер