Compartir a través de

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 modificador para alternar, usa la clase ToggleSwitch.

¿Es este el control adecuado?

Use un modificador de alternancia para las operaciones binarias que surtan efecto justo después de que el usuario voltee el modificador de alternancia.

Modificador de alternancia, activado

Desactivació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".

Selección entre alternar modificador y casilla de verificación

Para algunas acciones, puede funcionar un modificador de alternancia o una casilla. Para decidir qué control funcionaría mejor, siga estas sugerencias:

  • Use un modificador de alternancia para la configuración binaria cuando los cambios se hagan efectivos inmediatamente después de que el usuario los cambie.

    Alternar modificador frente a casilla

    En este ejemplo, está claro con el modificador de alternancia que las luces de cocina se establecen 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).

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

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

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.

Existen API para este control 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, las plantillas y las características más actuales de todos los controles.

Creación de un modificador de alternancia

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, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.

Aquí se muestra cómo crear un conmutador de alternancia simple. Este código XAML crea el modificador para alternar que se mostró anteriormente.

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

Aquí se muestra cómo crear el mismo modificador de alternancia 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 conmutador puede estar activado o desactivado. Usa la propiedad IsOn para determinar el estado del modificador. Cuando el modificador se usa para controlar el estado de otra propiedad binaria, puede 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>

Alternado

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í se muestra cómo crear el mismo modificador de alternancia 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 activadas o desactivadas

De forma predeterminada, el modificador de alternancia incluye etiquetas literales 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.

Obtener el código de ejemplo