Выключатели
Выключатель представляет собой коммутационный аппарат, позволяющий пользователям включать и выключать что-либо, аналогично бытовому выключателю освещения. Элемент управления "Выключатель" предлагает пользователям альтернативу из двух вариантов (включить или выключить) с немедленным результатом выбора.
Для создания элемента управления "Выключатель" используется класс ToggleSwitch.
Выбор правильного элемента управления
Используйте переключатель переключателя для двоичных операций, которые вступают в силу сразу после переключения переключателя.
Представляйте себе выключатель как обыкновенный выключатель на устройстве, которым вы щелкаете, чтобы привести устройство в действие или остановить его.
Для наглядности указывайте в названии выключателя (одним-двумя существительными) выполняемые им функции, например Wi-Fi, освещение на кухне.
Выбор между переключателем и флажок
Для некоторых действий может работать переключатель переключателя или флажок. Чтобы решить, какой элемент управления лучше будет работать, выполните следующие советы:
Используйте переключатель переключателя для двоичных параметров, когда изменения становятся эффективными сразу после изменения пользователем.
В этом примере ясно с переключателем переключателя, что кухонный свет установлен как "Вкл.". Но с флажком пользователь должен думать о том, включены ли светы сейчас или нужно ли установить флажок, чтобы включить свет.
Используйте флажки для выбора дополнительных элементов.
Установите флажок, когда пользователь должен выполнить дополнительные действия, чтобы изменения были эффективными. Например, если пользователь должен нажать кнопку "Отправить" или "далее", чтобы применить изменения, используйте флажок.
Используйте флажки, когда пользователь может выбрать несколько элементов, которые связаны с одним и тем же параметром или функцией.
Рекомендации
- Используйте метки включения и выключения по умолчанию, когда это возможно, но заменяйте их на выключатель, когда это целесообразно. Если вы заменяете их, используйте одно слово, более точно описывающее выключатель. Как правило, если слова "Вкл." и "Выкл." не описывают действие, выполняемое выключателем, возможно, будет лучше использовать другой элемент управления.
- Не следует заменять метки "Включено" и "Выкл.", если вы не должны; придерживаться меток по умолчанию, если ситуация не вызывает пользовательские.
UWP и WinUI 2
Внимание
Сведения и примеры в этой статье оптимизированы для приложений, использующих пакет SDK для приложений Windows и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. См. справочник по API UWP для конкретных сведений и примеров платформы.
В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.
API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .
- API UWP: класс ToggleSwitch, свойство IsOn, переключение события
- Откройте приложение коллекции WinUI 2 и просмотрите ползунок в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.
Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили и шаблоны для всех элементов управления.
Создание переключателя переключателя
- Важные API: класс ToggleSwitch, свойство IsOn, событие Toggled
Приложение коллекции 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 в интерактивном формате.
Связанные статьи
Windows developer