Interruptor

Examinar el ejemplo

La interfaz de usuario de aplicación multiplataforma de .NET (.NET MAUI) Switch control es un botón de alternancia horizontal que el usuario puede manipular para alternar entre los estados activados y desactivados, que se representan mediante un valor de boolean.

En la captura de pantalla siguiente se muestra un control Switch en sus estados de activación y desactivación:

El control Switch define las siguientes propiedades:

• IsToggled es un valor boolean que indica si el Switch está activado. El valor predeterminado de esta propiedad es false.
• OnColor es un Color que afecta a cómo se representa el Switch en el estado alternado o activado.
• ThumbColor es el Color del pulgar del conmutador.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que se les pueden aplicar estilos y pueden ser el destino de enlaces de datos.

El control Switch define un evento Toggled que se genera cuando cambia la propiedad IsToggled, ya sea a través de la manipulación del usuario o cuando una aplicación establece la propiedad IsToggled. El objeto ToggledEventArgs que acompaña al evento Toggled tiene una sola propiedad denominada Value, de tipo bool. Cuando se genera el evento, el valor de la propiedad Value refleja el nuevo valor de la propiedad IsToggled.

Crear un conmutador

Se puede crear una instancia de un Switch en XAML. Su propiedad IsToggled se puede configurar para conmutar el Switch. De forma predeterminada, la propiedad IsToggled es false. En el ejemplo siguiente se muestra cómo crear una instancia de un Switch en XAML con el conjunto de propiedades opcional IsToggled:

<Switch IsToggled="true"/>

También se puede crear un Switch con código.

Switch switchControl = new Switch { IsToggled = true };

Apariencia del interruptor

Además de las propiedades que Switch hereda de la clase View, Switch también define las propiedades OnColor y ThumbColor. La propiedad OnColor se puede establecer para definir el color de Switch cuando se alterna a su estado activado, y la propiedad ThumbColor se puede establecer para definir el Color del botón del conmutador. En el ejemplo siguiente se muestra cómo crear una instancia de un Switch en XAML con estas propiedades establecidas:

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

Las propiedades también se pueden establecer al crear un Switch en el código:

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

En la captura de pantalla siguiente se muestra el Switch en sus estados de activación y desactivación, con las propiedades OnColor y ThumbColor establecidas:

Responder a un cambio de estado del interruptor

Cuando cambia la propiedad IsToggled, ya sea a través de la manipulación del usuario o cuando una aplicación establece la propiedad IsToggled, se desencadena el evento Toggled. Se puede registrar un controlador de eventos para este evento para responder al cambio:

<Switch Toggled="OnToggled" />

El archivo de código subyacente contiene el controlador para el evento Toggled:

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

El argumento sender en el controlador de eventos es el Switch responsable de desencadenar este evento. Puede usar la propiedad sender para acceder al objeto Switch o para distinguir entre varios objetos Switch que comparten el mismo controlador de eventos Toggled.

El controlador de eventos Toggled también se puede asignar en el código:

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

Enlace de datos a un interruptor

El controlador de eventos Toggled se puede eliminar utilizando enlaces de datos y activadores para responder a los cambios de estado de alternancia de un 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>

En este ejemplo, el Label usa una expresión de enlace en un DataTrigger para supervisar la propiedad IsToggled del Switch denominado styleSwitch. Cuando esta propiedad se convierte en true, se cambian las propiedades FontAttributes y FontSize del Label. Cuando la propiedad IsToggled vuelve a false, las propiedades FontAttributes y FontSize del Label se restablecen a su estado inicial.

Para obtener información sobre los desencadenadores, consulte Desencadenadores.

Cambiar los estados visuales

Switch tiene On y Off estados visuales que se pueden usar para iniciar un cambio visual cuando cambia la propiedad IsToggled.

En el ejemplo XAML siguiente se muestra cómo definir estados visuales para los estados de On y 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>

En este ejemplo, el OnVisualState especifica que cuando la propiedad IsToggled es true, la propiedad ThumbColor se establecerá en verde de primavera media. El OffVisualState especifica que cuando la propiedad IsToggled es false, la propiedad ThumbColor se configurará en rojo. Por lo tanto, el efecto general es que cuando el Switch está en una posición desactivada, su pulgar es rojo y su pulgar es verde de primavera media cuando el Switch está en una posición activa:

Para obtener más información sobre los estados visuales, vea Estados visuales.

Deshabilitar un interruptor

Una aplicación puede especificar un estado en el que el Switch que se alterna no es una operación válida. En tales casos, el Switch se puede deshabilitar estableciendo su propiedad IsEnabled en false. Esto impedirá que los usuarios puedan manipular el Switch.