通过

开关

浏览示例。 浏览示例

.NET 多平台应用 UI （.NET MAUI） Switch 控件是一个水平切换按钮，用户可以在打开和关闭状态之间切换，这些状态由 boolean 值表示。

以下屏幕截图显示了 Switch 控件在打开和关闭状态下的切换：

开关处于打开和关闭状态的屏幕截图。

该 Switch 控件定义以下属性：

  • IsToggled 是一个 boolean 值，该值指示 Switch 是否开启。 此属性的默认值为 false。
  • OnColor是一个Switch，影响在切换或打开状态时Color的呈现方式。
  • ThumbColor是开关滑块的Color。
  • IsToggled 是一个 boolean 值，用于指示是否启用 Switch。 此属性的默认值为 false。
  • OffColor是一个Color，它决定了Switch在关闭状态时的呈现方式。
  • OnColor 是一个 Color，它决定 Switch 在切换或开启状态下的呈现方式。
  • ThumbColor是开关拇指的Color。

这些属性由 BindableProperty 对象提供支持，这意味着这些属性可以设置样式并成为数据绑定的目标。

该 Switch 控件定义了一个事件，该事件在 Toggled 和 IsToggled 属性发生变化时被触发，无论是通过用户操作还是应用程序设置 IsToggled 属性时。 事件附带的对象具有一个名为的属性，其类型为。 当事件被引发时，Value 属性的值反映了 IsToggled 属性的新值。

创建交换机

可以在 XAML 中实例化 A Switch 。 其IsToggled属性可以设置以切换Switch。 默认情况下，该 IsToggled 属性为 false. 以下示例演示如何在 XAML 中实例化 Switch，并设置可选的 IsToggled 属性：

<Switch IsToggled="true"/>

可以在代码中创建一个 Switch。

Switch switchControl = new Switch { IsToggled = true };

切换外观

除了从Switch类继承的属性View外，Switch还定义OnColor和ThumbColor属性。 可以将OnColor属性设置为定义Switch的颜色，当切换到启用状态时，还可以将ThumbColor属性设置为定义开关的拇指状态。 以下示例演示如何在 XAML 中使用这些属性实例化 Switch。

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

还可以在代码中创建 Switch 属性时设置这些属性：

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

除了从Switch类继承的属性View外，Switch还定义OffColorOnColor和ThumbColor属性。 可以将该 OffColor 属性设置为在其关闭状态中定义 Switch 颜色。 可以设置OnColor属性以定义切换到打开状态时的Switch颜色，并且可以设置ThumbColor属性以定义开关拨片的Color。 以下示例演示如何在 XAML 中使用这些属性设置来实例化 Switch。

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

还可以在代码中创建 Switch 属性时设置这些属性：

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

以下屏幕截图显示了 Switch 其打开和关闭切换状态，其中设置了 OnColor 和 ThumbColor 属性：

开关在打开和关闭状态的屏幕截图，其中颜色已更改。

响应开关状态更改

当IsToggled属性由于用户操作或应用程序设置IsToggled属性而发生变化时，Toggled事件将被触发。 可以注册此事件的事件处理程序以响应更改：

<Switch Toggled="OnToggled" />

该后台代码文件包含 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
};

数据绑定开关

可以通过数据绑定和触发器来响应Switch的切换状态变化，从而消除Toggled事件处理程序。

<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中使用绑定表达式来监视名为Switch的IsToggled属性styleSwitch。 当此属性变为true时，Label的FontAttributes和FontSize属性将被更改。 Label的FontAttributes和FontSize属性在IsToggled属性返回到false时被重置为其初始状态。

有关触发器的信息，请参阅 触发器。

切换视觉状态

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 处于开启位置时，滑块为中等春绿色。

在 VisualState 上切换的屏幕截图。 关闭 VisualState 的屏幕截图。

有关视觉状态的详细信息，请参阅 视觉状态。

禁用开关

应用程序可能会进入一种状态，在这种状态下，Switch 的切换操作无效。 在这种情况下，Switch 可以通过将其 IsEnabled 属性设置为 false 来禁用。 这将阻止用户操作Switch。

  • Last updated on