Бөлісу құралы:

Тумблеры

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

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

Это правильный контроль?

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

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

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

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

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

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

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

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

    Переключатель и флажок

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

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

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

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

Recommendations

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

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

Откройте Галерею WinUI 3 и посмотрите переключатель в действии

Значок коллекции WinUI 3 Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из 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 .

  • Last updated on