Windows 10 - Bindea multiple radiobuttons a una propiedad

Cuando estamos desarrollando una App, seguramente hemos necesitado la implementación de varios RadioButtons. Al implementar varios RadioButtons en el mismo grupo podemos hacer dos cosas:

1. Crear una propiedad para cada RadioButton y luego otra para la lógica de diseño (muerte).
2. Crear un Converter donde en el parameter pasas el valor que quieras que tenga la propiedad (vida).

Entonces vamos a ver cómo implementamos un sencillo ejemplo centrándonos solo en caso de booleanos.

Antes de empezar

Creamos un proyecto universal de Windows e implementamos el modelo MVVM mediante estos videotutoriales y apoyándonos en nuestro GeekyTheory.Toolkit.

En el ViewModel

Creamos nuestra propiedad a la que van a ir bindeados los radiobuttons.

private bool myRadioButtonProperty; public bool MyRadioButtonProperty { get { return myRadioButtonProperty; } set { if (myRadioButtonProperty != value) { myRadioButtonProperty = value; OnPropertyChanged(); } } }

Ahora es el turno del Converter

public class RadioButtonCheckedConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { if (value == null) return null; bool boolVal; var converts = bool.TryParse(parameter.ToString(), out boolVal); return value.Equals(boolVal); } public object ConvertBack(object value, Type targetType, object parameter, string language) { if (value == null) return null; bool boolVal; bool.TryParse(parameter.ToString(), out boolVal); return value.Equals(true) ? boolVal : new Nullable<bool>(); } }

RadioButtonCheckedConverter se encarga de evaluar el CommandParameter  que pasamos para ver si es true o false y devolver el valor.

El converter es apto para recibir booleanos nullable, tal que podemos crear propiedades nullables y bindear a los radiobuttons. Esto nos sirve para que la propiedad booleana no se inicialice por defecto a false y de un valor en la UI. Con propiedades nullables podemos crear un grupo de radiobutton sin que esté ninguno checkeado.

Un detalle importante a tener en cuenta es que en el XAML del radiobutton debemos establecer la propiedad IsThreeState="True" para habilitar sus 3 estados [true | false | nullable].

Y solo nos queda el XAML

<RadioButton Content="Sí" GroupName="Grupo9" Style="{StaticResource RadioButtonStyle}" IsChecked="{Binding MyRadioButtonProperty, Mode=TwoWay, Converter={StaticResource RadioButtonCheckedConverter}, ConverterParameter=True}" IsThreeState="True"/> <RadioButton Content="No" GroupName="Grupo9" Style="{StaticResource RadioButtonStyle}" Margin="25,0,0,0" IsChecked="{Binding MyRadioButtonProperty, Mode=TwoWay, Converter={StaticResource RadioButtonCheckedConverter}, ConverterParameter=False}" IsThreeState="True"/>

Aquí podemos ver cómo estamos bindeando MyRadioButtonProperty con el converter RadioButtonCheckedConverter y le estamos pasando True/False al ConverterParameter. También declaramos dichos radiobuttons aptos para los tres estados.

Si os ha gustado no os lo quedéis para vosotros. ¡Compartid!

Happy Coding!