Тумблеры

  • Статья

Выключатель представляет собой коммутационный аппарат, позволяющий пользователям включать и выключать что-либо, аналогично бытовому выключателю освещения. Элемент управления "Выключатель" предлагает пользователям альтернативу из двух вариантов (включить или выключить) с немедленным результатом выбора.

Чтобы создать элемент управления переключателем, используйте класс ToggleSwitch.

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

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

Переключатель, вкл.

Переключатель выключения

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

Для наглядности указывайте в названии выключателя (одним-двумя существительными) выполняемые им функции, например Wi-Fi, освещение на кухне.

Выбор между переключателем и флажком

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

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

    Сравнение переключателя и флажка

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

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

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

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

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

  • Используйте метки включения и выключения по умолчанию, когда это возможно, но заменяйте их на выключатель, когда это целесообразно. Если вы заменяете их, используйте одно слово, более точно описывающее выключатель. Как правило, если слова "Вкл." и "Выкл." не описывают действие, выполняемое выключателем, возможно, будет лучше использовать другой элемент управления.
  • Не заменяйте метки "Вкл." и "Выкл." без необходимости; оставьте метки по умолчанию, если ситуация не требует пользовательских меток.

UWP и WinUI 2

Важно!

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

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

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

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

Создание тумблера

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

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

Ниже описано, как создать простой тумблер. Этот код XAML создает выключатель, показанный выше.

<ToggleSwitch x:Name="lightToggle" Header="Kitchen Lights"/>

Ниже описано, как создать такой же тумблер в коде.

ToggleSwitch lightToggle = new ToggleSwitch();
lightToggle.Header = "Kitchen Lights";

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(lightToggle);

IsOn

Переключатель может быть в состоянии "включено" или "выключено". Используйте свойство IsOn для определения состояния выключателя. Если переключатель используется для управления другим двоичным свойством, можно использовать привязку, как показано ниже.

<StackPanel Orientation="Horizontal">
    <ToggleSwitch x:Name="ToggleSwitch1" IsOn="True"/>
    <ProgressRing IsActive="{x:Bind ToggleSwitch1.IsOn, Mode=OneWay}" 
                  Width="130"/>
</StackPanel>

Toggled

В других случаях можно обработать событие Toggled, чтобы оно реагировало на изменения в состоянии.

В данном примере показано, как добавить обработчик события Toggled в XAML и в коде. Событие Toggled обрабатывается, чтобы включить или выключить кольцевой индикатор выполнения и изменить его видимость.

<ToggleSwitch x:Name="toggleSwitch1" IsOn="True"
              Toggled="ToggleSwitch_Toggled"/>

Ниже описано, как создать такой же тумблер в коде.

// Create a new toggle switch and add a Toggled event handler.
ToggleSwitch toggleSwitch1 = new ToggleSwitch();
toggleSwitch1.Toggled += ToggleSwitch_Toggled;

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(toggleSwitch1);

Обработчик для события Toggled.

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    ToggleSwitch toggleSwitch = sender as ToggleSwitch;
    if (toggleSwitch != null)
    {
        if (toggleSwitch.IsOn == true)
        {
            progress1.IsActive = true;
            progress1.Visibility = Visibility.Visible;
        }
        else
        {
            progress1.IsActive = false;
            progress1.Visibility = Visibility.Collapsed;
        }
    }
}

Метки "Вкл."/"Выкл."

По умолчанию тумблер включает буквальные метки "Вкл."/"Выкл.", которые локализуются автоматически. Вы можете изменить эти метки, установив свойства OnContent и OffContent.

В этом примере показано, как заменить метки "Вкл."/"Выкл." на метки "Показать"/"Скрыть".

<ToggleSwitch x:Name="imageToggle" Header="Show images"
              OffContent="Show" OnContent="Hide"
              Toggled="ToggleSwitch_Toggled"/>

Вы также можете использовать более сложное содержимое, установив свойства OnContentTemplate и OffContentTemplate.

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