Compartir vía

Interruptores de palanca

El interruptor de palanca representa un conmutador físico que permite a los usuarios encender o apagar cosas, como un interruptor de luz. Usa los controles de interruptor de palanca para presentar a los usuarios dos opciones mutuamente excluyentes (como activar/desactivar). Al elegir una opción, se produce un resultado inmediato.

Para crear un control de interruptor de palanca, usa la clase ToggleSwitch.

¿Es este el control adecuado?

Usa un interruptor de palanca para las operaciones binarias que surtan efecto inmediatamente después de que el usuario voltee el interruptor de palanca.

Interruptor de palanca, encendido

Interruptor de palanca apagado

Piensa en el interruptor de palanca como un interruptor físico de encendido para un dispositivo: puedes activarlo o desactivarlo cuando quieras habilitar o deshabilitar la acción que lleva a cabo el dispositivo.

Para que el interruptor de palanca sea sencillo de comprender, etiquétalo con una o dos palabras, preferiblemente sustantivos, que describan la funcionalidad que controla. Por ejemplo, "Wi-Fi" o "Luces de cocina".

Selección entre interruptor de palanca y casilla de verificación

Para algunas acciones, puede ser útil un interruptor de palanca o una casilla de verificación. Para decidir qué control funcionaría mejor, siga estas sugerencias:

  • Usa un interruptor de palanca para la configuración binaria cuando los cambios entren en vigor inmediatamente después de que el usuario los cambie.

    Interruptor de palanca versus casilla de verificación

    En este ejemplo, está claro con el interruptor de palanca que las luces de cocina están encendidas. Pero con la casilla de verificación, el usuario debe pensar en si las luces están encendidas ahora o si debe marcar la casilla para encender las luces.

  • Usa casillas para los elementos opcionales (deseables).

  • Use una casilla cuando el usuario tenga que realizar pasos adicionales para que los cambios sean efectivos. Por ejemplo, si el usuario debe hacer clic en un botón "enviar" o "siguiente" para aplicar cambios, use una casilla.

  • Usa casillas cuando el usuario pueda seleccionar varios elementos que estén relacionados con un único valor o característica.

Recommendations

  • Usa las etiquetas predeterminadas On y Off cuando sea posible; reemplázalas solo cuando sea necesario para que el interruptor tenga sentido. Si las reemplazas, usa una sola palabra que describa con mayor precisión el interruptor. En general, si las palabras "Encendido" y "Apagado" no describen la acción vinculada a un interruptor de alternancia, probablemente necesites un control diferente.
  • Evite reemplazar las etiquetas Activado y Desactivado a menos que deba; se adhiere a las etiquetas predeterminadas a menos que la situación llame a las personalizadas.

Crear un interruptor de palanca

Abra la aplicación Galería de WinUI y vea toggleSwitch en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtén la aplicación desde la Microsoft Store o consigue el código fuente en GitHub

Aquí se muestra cómo crear un conmutador de alternancia simple. Este XAML crea el interruptor de alternancia mostrado anteriormente.

<ToggleSwitch x:Name="lightToggle" Header="Kitchen Lights"/>

Aquí se muestra cómo crear el mismo interruptor en código.

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

El conmutador puede estar activado o desactivado. Usa la propiedad IsOn para determinar el estado del interruptor. Cuando el interruptor se usa para controlar el estado de otra propiedad binaria, puede usar una vinculación tal como se muestra aquí.

<StackPanel Orientation="Horizontal">
    <ToggleSwitch x:Name="ToggleSwitch1" IsOn="True"/>
    <ProgressRing IsActive="{x:Bind ToggleSwitch1.IsOn, Mode=OneWay}" 
                  Width="130"/>
</StackPanel>

Conmutado

En otros casos, puedes controlar el evento Toggled para responder a cambios en el estado.

En este ejemplo se muestra cómo agregar un controlador de eventos toggled en XAML y en el código. El evento Toggled se controla para activar o desactivar un anillo de progreso y cambiar su visibilidad.

<ToggleSwitch x:Name="toggleSwitch1" IsOn="True"
              Toggled="ToggleSwitch_Toggled"/>

Aquí te mostramos cómo crear el mismo interruptor en el código fuente.

// 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);

Este es el controlador para el evento 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;
        }
    }
}

Etiquetas activadas o desactivadas

De forma predeterminada, el interruptor incluye las etiquetas 'Activado' y 'Desactivado', que se localizan automáticamente. Puedes reemplazar estas etiquetas si configuras las propiedades OnContent y OffContent.

En este ejemplo se reemplazan las etiquetas On/Off por mostrar u ocultar etiquetas.

<ToggleSwitch x:Name="imageToggle" Header="Show images"
              OffContent="Show" OnContent="Hide"
              Toggled="ToggleSwitch_Toggled"/>

También puedes usar contenido más complejo si configuras las propiedades OnContentTemplate y OffContentTemplate.

UWP y WinUI para UWP

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulta la referencia de la API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene la información que necesitas para utilizar el control en una aplicación UWP o WinUI 2.

Existen API para este control en el espacio de nombres Windows.UI.Xaml.Controls .

Te recomendamos usar la versión más reciente de WinUI para UWP para obtener los estilos y plantillas más actuales para todos los controles.

  • Last updated on