Выключатели

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

Для создания элемента управления "Выключатель" используется класс ToggleSwitch.

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

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

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

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

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

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

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

  

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

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

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

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

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

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

UWP и WinUI 2

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

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

Создание переключателя переключателя

Приложение коллекции 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 в XAML и в коде. Переключение события обрабатывается для включения или отключения кольца хода выполнения и изменения видимости.

<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.

В этом примере метки On/Off заменяются метками Show/Hide.

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

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

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

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

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

• Класс ToggleSwitch
• Переключатели
• Выключатели
• Флажки