DEV Community

José De Freitas
José De Freitas

Posted on

Cómo usar ToggleButton en Avalonia

ToggleButton puede ser usado para muchas cosas. Este control es nada más y nada menos que un botón con la función de un checkbox.

Si has leído la documentación de Avalonia, es posible que te hayas encontrado con el ejemplo de uso del control ToggleButton. Sin embargo, el uso que ahí se muestra es muy específico; es probable que quieras usar este botón de algún otro modo que no sea el que ahí indican. Para eso escribí este artículo: para mostrarte cómo puedes usar este control de otra forma. Concretamente, el ejemplo que creé para este artículo oculta y muestra otro control cuando el botón es cliqueado.

Una pequeña advertencia: este ejemplo usa ReactiveUI. Asegúrate de haber instalado este paquete en tu aplicación para poder usar este código tal como aquí está (si creaste una nueva aplicación de Avalonia que usa la estructura MVVM, el paquete ya se habrá instalado por defecto).

Ejemplo de uso del control ToggleButton

Primero, añade la etiqueta en el archivo .axaml de la View de tu aplicación:

<ToggleButton IsChecked="{Binding Path=ShowControl}" Content="Hazme clic"/>
Enter fullscreen mode Exit fullscreen mode

Como ves, la propiedad IsChecked hace referencia a la propiedad ShowControl en tu ViewModel. Vayamos ahora a este archivo: el ViewModel.

private bool _showControl;

public bool ShowControl 
{
    get => _showControl;
    set => this.RaiseAndSetIfChanged(ref _showControl, value);
}
Enter fullscreen mode Exit fullscreen mode

Agrega el código de arriba dentro de la clase de tu ViewModel. Lo que hace esta porción de código es crear un campo de respaldo que guardará el valor del estado del ToggleButton. La propiedad pública toma ese valor y lo devuelve cuando es necesario. Cuando toca cambiarlo, llama al método set, que a su vez llama al método RaiseAndSetIfChanged, imprescindible para que la aplicación renderice el contenido una vez más si se da cuenta de que hubo un cambio en la propiedad. Lee la documentación sobre ViewModels de ReactiveUI para más información.

Los valores del control ToggleButton son los mismos que los del control CheckBox: True y False. Es por esto que trabajar con este control es sumamente sencillo.

Por último solo queda hacer que el valor de la propiedad IsVisible del control que queramos sea la propiedad que creamos en el ViewModel, es decir: ShowControl.

<StackPanel IsVisible="{Binding Path=ShowControl}">
    <TextBlock>¡Visible!</TextBlock>
</StackPanel>
Enter fullscreen mode Exit fullscreen mode

El valor de la propiedad IsVisible del control StackPanel está vinculado al valor del ToggleButton. Intuitivamente, el StackPanel no se muestra cuando el botón está apagado (es decir, cuando el valor de la propiedad es False); cuando está encendido (es decir, cuando el valor de la propiedad es True), se mostrará el StackPanel.

El control ToggleButton está apagado por defecto (a no ser que guardes su estado en los ajustes de usuario de la aplicación). Debido a este comportamiento, el botón hará aparecer el StackPanel cuando sea activado y lo hará desaparecer cuando sea desactivado. Si quieres invertir este comportamiento, es tan simple como añadir el signo «!» antes del nombre de la propiedad en el valor de la propiedad del control que quieras. En el ejemplo de este artículo, el resultado sería: IsVisible="{Binding Path=!ShowControl}". Para más información sobre la conversión de valores de propiedades, lee la sección «Converting Binding Values» en la documentación de Avalonia.

Diferencia entre este ejemplo y el de la documentación

En mi opinión, el ejemplo de la documentación de Avalonia es muy específico para ser útil para los desarrolladores que quieren aprender cómo usar este control. Además de eso, hace que el botón funcione cambiando los estilos de los demás controles basándose en el estado del botón. A mi juicio, es mucho más fácil usar una propiedad definida en el ViewModel: necesitarás escribir menos código y el valor se actualizará al instante gracias a ReactiveUI.

Recuerda que esto es solo un ejemplo. Puedes hacer cualquier otra cosa con este control, ya sea abrir una nueva ventana, cambiar los ajustes de la aplicación, empezar una animación, etc.

Discussion (0)