Выключатель

Просмотреть образец

Пользовательский интерфейс приложений .NET (.NET MAUI) Switch — это горизонтальная кнопка переключения, которой пользователь может управлять, чтобы переключаться между состояниями вкл. и выкл., которые представлены значением boolean.

На следующем снимке экрана показан элемент управления Switch в его состояниях включения и выключения.

Элемент управления Switch определяет следующие свойства:

• IsToggled — это значение boolean, указывающее, включен ли Switch. Значение по умолчанию этого свойства — false.
• OnColor — это Color, который влияет на то, как Switch отображается в переключенном или включенном состоянии.
• ThumbColor — это Color ползунка переключателя.

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

Элемент управления Switch определяет событие Toggled, которое возникает при изменении свойства IsToggled путем манипуляции пользователем или при установке приложения свойства IsToggled. Объект ToggledEventArgs, сопровождающий событие Toggled, имеет одно свойство с именем Valueтипа bool. При возникновении события значение свойства Value отражает новое значение свойства IsToggled.

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

Экземпляр объекта Switch можно создать в XAML. Свойство IsToggled можно установить, чтобы переключать Switch. По умолчанию свойство IsToggled является false. В следующем примере показано, как создать экземпляр Switch в XAML с установкой необязательного свойства IsToggled:

<Switch IsToggled="true"/>

В коде также можно создать объект Switch:

Switch switchControl = new Switch { IsToggled = true };

Изменить внешний вид

Помимо свойств, которые Switch наследуются от класса View, Switch также определяет свойства OnColor и ThumbColor. Свойство OnColor можно задать для определения цвета Switch при переключении на включенное состояние, а свойство ThumbColor можно задать для определения Color ползунка переключателя. В следующем примере показано, как создать экземпляр Switch в XAML с набором следующих свойств:

<Switch OnColor="Orange"
        ThumbColor="Green" />

Свойства также можно задать при создании Switch в коде:

Switch switch = new Switch { OnColor = Colors.Orange, ThumbColor = Colors.Green };

На следующем снимке экрана показана Switch в его состояниях включения и выключения с установленными свойствами OnColor и ThumbColor.

Реагирование на изменение состояния коммутатора

При изменении свойства IsToggled с помощью манипуляций с пользователем или при установке свойства IsToggled событие Toggled запускается. Обработчик событий для этого события можно зарегистрировать для реагирования на изменения:

<Switch Toggled="OnToggled" />

Файл "code-behind" содержит обработчик события Toggled:

void OnToggled(object sender, ToggledEventArgs e)
{
    // Perform an action after examining e.Value
}

Аргумент sender в обработчике событий — это Switch, который отвечает за запуск этого события. Свойство sender можно использовать для доступа к объекту Switch или для различия между несколькими объектами Switch, использующими один и тот же обработчик событий Toggled.

Обработчик событий Toggled также можно назначить в коде:

Switch switchControl = new Switch {...};
switchControl.Toggled += (sender, e) =>
{
    // Perform an action after examining e.Value
};

Привязка данных к переключателю

Обработчик событий Toggled можно устранить с помощью привязки данных и триггеров для реагирования на Switch изменения состояний переключателя.

<Switch x:Name="styleSwitch" />
<Label Text="Lorem ipsum dolor sit amet, elit rutrum, enim hendrerit augue vitae praesent sed non, lorem aenean quis praesent pede.">
    <Label.Triggers>
        <DataTrigger TargetType="Label"
                     Binding="{Binding x:DataType='Switch', Source={x:Reference styleSwitch}, Path=IsToggled}"
                     Value="true">
            <Setter Property="FontAttributes"
                    Value="Italic, Bold" />
            <Setter Property="FontSize"
                    Value="18" />
        </DataTrigger>
    </Label.Triggers>
</Label>

В этом примере Label использует выражение привязки в DataTrigger, чтобы отслеживать свойство IsToggled объекта Switch с именем styleSwitch. Когда свойство становится true, у Label изменяются свойства FontAttributes и FontSize. Когда свойство IsToggled возвращается к false, свойства FontAttributes и FontSize объекта Label возвращаются в начальное состояние.

Сведения о триггерах см. в

Переключение визуальных состояний

Switch имеет On и Off визуальные состояния, которые можно использовать для запуска визуального изменения при изменении свойства IsToggled.

В следующем примере XAML показано, как определить визуальные состояния для состояний On и Off:

<Switch IsToggled="True">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
             <VisualStateGroup x:Name="CommonStates">
                 <VisualState x:Name="On">
                     <VisualState.Setters>
                         <Setter Property="ThumbColor"
                             Value="MediumSpringGreen" />
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="Off">
                     <VisualState.Setters>
                         <Setter Property="ThumbColor"
                             Value="Red" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</Switch>

В этом примере OnVisualState указывает, что если свойство IsToggled будет true, то свойство ThumbColor будет установлено в средне-весенне-зеленый цвет. Off VisualState указывает, что если свойство IsToggled равно false, то свойство ThumbColor будет установлено в красный. Таким образом, общий эффект заключается в том, что, когда Switch находится в выключенном положении, его курок красный, а его курок средне-зеленый, когда Switch находится во включенном положении.

Для получения дополнительной информации о визуальных состояниях см. раздел Визуальные состояния.

Отключение переключателя

Приложение может войти в состояние, в котором переключение Switch не является допустимой операцией. В таких случаях Switch можно отключить, задав для свойства IsEnabled значение false. Это предотвратит возможность пользователей манипулировать Switch.