Modificadores para alternar

  • Artículo

El modificador para alternar representa un conmutador físico que permite a los usuarios activar o desactivar opciones, como un interruptor de la luz. Usa los controles del modificador para alternar para presentar a los usuarios dos opciones que se excluyan mutuamente (como activar/desactivar). Cuando elijan una opción, se producirá un resultado inmediato.

Para crear un control de conmutador de alternancia, use la clase ToggleSwitch.

¿Es este el control adecuado?

Usa un modificador para alternar operaciones binarias que surten efecto inmediatamente después de que el usuario gira el modificador para alternar.

Conmutador de alternancia, activado

Desactivación del botón de alternancia

Piensa en el modificador para alternar como un interruptor de alimentación físico para un dispositivo: lo activas o desactivas cuando quieres habilitar o deshabilitar la acción que lleva a cabo el dispositivo.

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

Elegir entre un modificador para alternar y una casilla

Para algunas acciones, tanto un modificador para alternar como una casilla podrían ser adecuados. Para decidir qué control funcionará mejor, sigue estas sugerencias:

  • Usa un modificador para alternar con opciones binarias cuando los cambios surten efecto justo después de que el usuario las cambia.

    Modificador para alternar frente a casilla

    En este ejemplo, está claro con el conmutador de alternancia que las luces de cocina están establecidas en "Activado". Pero con la casilla, el usuario debe pensar en si las luces están encendidas ahora o si necesitan activar la casilla para activar las luces.

  • Usa casillas para los elementos opcionales (deseables).

  • Usa una casilla cuando el usuario tiene que realizar algunos pasos más antes de que los cambios surtan efecto. Por ejemplo, si el usuario tiene que hacer clic en un botón "enviar" o "siguiente" para aplicar los cambios, usa una casilla.

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

Recomendaciones

  • Usa las etiquetas predeterminadas On y Off cuando sea posible; reemplázalas solo cuando sea necesario para que el modificador para alternar tenga sentido. Si las reemplaza, usa una sola palabra que describa con mayor precisión la alternancia. En general, si las palabras "On" y "Off" no describen la acción vinculada a un modificador para alternar, probablemente necesites un control diferente.
  • Evita reemplazar las etiquetas On y Off a menos que debas hacerlo; usa las etiquetas predeterminadas a menos que la situación requiera que las personalices.

UWP y WinUI 2

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. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

Las API de este control existen en el espacio de nombres Windows.UI.Xaml.Controls .

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos y plantillas más actuales para todos los controles.

Crear un modificador para alternar

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

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.

Aquí te mostramos cómo crear un modificador para alternar sencillo. Este código XAML crea el modificador para alternar que se mostró anteriormente.

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

Aquí te mostramos cómo crear el mismo modificador para alternar en el 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 modificador puede estar activado o desactivado. Usa la propiedad IsOn para determinar el estado del modificador. Cuando se usa el modificador para controlar el estado de otra propiedad binaria, puedes usar un enlace como se muestra aquí.

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

Toggled

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 modificador para alternar en el código.

// 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 On y Off

De forma predeterminada, el modificador para alternar incluye las etiquetas literales On y Off, 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 con etiquetas Show/Hide.

<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.

Obtención del código de ejemplo