Introducción
Data binding es un mecanismo mediante el cual podemos enlazar los elementos de la interfaz de usuario con los objetos que contienen la información a mostrar. Cuando realizamos data binding, creamos una dependencia entre el valor de una propiedad llamada target con el valor de otra propiedad llamada source. Donde normalmente, la propiedad target recibirá el valor de la propiedad source.
Es el mecanismo base que nos permite utilizar el patrón MVVM en nuestras Apps móviles logrando:
- Nos permite dividir el trabajo de manera muy sencilla (diseñadores – desarrolladores)
- El mantenimiento es más sencillo.
- Permite realizar Test a nuestro código.
- Permite una más fácil reutilización de código.
Sin embargo, además de toda la potencia mencionada teníamos ciertas limitaciones. Los errores de Binding no se producían en tiempo de compilación de la App además de tener diferentes mejoras relacionadas con el rendimiento. Limitaciones existentes hasta ahora…
Con la llegada de Windows 10 nos llegaba la posibilidad de crear bindings compilados en lugar de los bindings clásicos. Ya vimos previamente su uso, pros y contras en este artículo. Ahora, con la llegada del Anniversary Update nos llegan una gran cantidad de novedades relacionadas con el desarrollo que iremos desgranando poco a poco, entre las que se incluyen novedades en x:Bind.
¿En qué consisten?, ¿qué aportan?
En este artículo vamos a centrarnos en el conjunto de novedades incluidas en el sistema de enlace a datos compilados en la actualización Anniversary Update.
Enlace a métodos
Previamente, desde la versión 1607 de Windows, {x:Bind} soportaba un evento como parte del enlace a datos.
Veamos un ejemplo. Vamos a crear una interfaz mostrando un listado de casas. La colección de casas:
private ObservableCollection<House> _houses;
public ObservableCollection<House> Houses
{
get
{
if (_houses == null)
LoadHouses();
return _houses;
}
}
Que cargaremos con sencillos datos locales:
private void LoadHouses()
{
_houses = new ObservableCollection<House>();
_houses.Add(new House
{
Name = "Home 1"
});
_houses.Add(new House
{
Name = "Home 2"
});
}
La interfaz de usuario, un control ListView enlazado con un enlace compilado a la colección:
<ListView
ItemsSource="{x:Bind Houses}"
ItemTemplate="{StaticResource HouseDataTemplate}" />
En cuanto a la plantilla que define cada elemento del listado:
<DataTemplate
x:Key="HouseDataTemplate"
x:DataType="model:House">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Text="{x:Bind Name}"
x:Phase="1"
VerticalAlignment="Center" />
<Button
Grid.Column="1"
Content="Click me!"
Click="{x:Bind Click}" />
</Grid>
</DataTemplate
Se utiliza x:Bind para enlazar las propiedades, estableciendo el tipo de los datos a enlazar mediante la propiedad x:DataType.
NOTA: Recuerda que x:Bind está fuertemente tipado.
¿Ves algo «raro»?. El botón incluido dentro de la plantilla enlaza el evento Click a «algo» llamado Click.
Hasta ahora no habíamos visto la definición de la entidad House:
public class House
{
public string Name { get; set; }
public void Click(object sender, RoutedEventArgs e)
{
Debug.WriteLine(string.Format("Clicked {0}!", Name));
}
}
Ahora probablemente has deducido que ocurre. Se pueden realizar enlace a datos directamente a eventos. Se necesita en el evento:
- No tener parámetros. Ejemplo void Click().
- Coincidir los parámetros con los parámetros del evento. Ejemplo: void Click(object sender, RoutedEventArgs e).
- O coincidir con los tipos base de los parámetros del evento. Ejemplo: void Click(object sender, object e).
Al pulsar el botón de cada plantilla, se desencadena el evento Click que tenemos disponible en la entidad.
El resultado:
Ahora, tras la actualización Anniversary Update, se da un paso más permitiendo enlazar con cualquier método sin necesidad de un converter. Las únicas condiciones que debe complir el método es que sea público y en caso de tener parámetros, facilitarlos. Una forma de:
- Obtener conversión de valores avanzada.
- Tener un enlace a datos que dependa de más de un parámetro.
Veamos un ejemplo. En algunos formularios donde hay contraseñas involucradas se ofrece feedback visual de la seguridad de la contraseña introducida. Vamos a mostrar una barra de color rojo, naranja o rojo dependiendo de la seguridad.
Tendremos una propiedad donde se enlazará la contraseña:
public string UserPassword { get; set; }
En la UI:
<ProgressBar
Background="Transparent"
Foreground="{x:Bind PasswordStrengthBrush(Password.Password), Mode=OneWay}"
Value="{x:Bind PasswordStrengthValue(Password.Password), Mode=OneWay}"
Height="3"/>
<PasswordBox
x:Name="Password"
PlaceholderText="Insert Password"
Password="{x:Bind UserPassword, Mode=TwoWay}" />
Un control PasswordBox encargado de capturar la contraseña (utilizando x:Bind), y en la parte superior un ProgressBar que mostrará más o menos recorrido y distintos colores dependiendo de la seguridad de la contraseña introducida.
Fíjate en el enlace a datos de Foreground y Value del PasswordBox. ¿Qué está pasando?.
Para modificar el color se enlaza a un método público llamado PasswordStrengthBrush que recibe como parámetro la contraseña (directamente accediendo a la propiedad Password del PasswordBox!).
En cuanto al valor, de nuevo, se hace un enlace a un método público llamado PasswordStrengthValue recibiendo como parámetro de nuevo la contraseña.
El primero de los métodos:
public SolidColorBrush PasswordStrengthBrush(string password)
{
if (string.IsNullOrEmpty(password))
return new SolidColorBrush(Colors.Transparent);
int length = password.Length;
if (length >= 3 && length < 6)
return new SolidColorBrush(Colors.Orange);
if (length >= 6)
return new SolidColorBrush(Colors.Green);
return new SolidColorBrush(Colors.Red);
}
Si la longitud de la contraseña es inferior a tres carácteres, se devuelve color rojo, si es ingerior a seis carácteres, color naranja, devolviendo color verde en caso de que la longitud de la contraseña sea superior a seis carácteres.
El segundo de los métodos:
public double PasswordStrengthValue(string password)
{
if (string.IsNullOrEmpty(password))
return 0;
int length = password.Length;
if (length >= 3 && length < 6)
return 66;
if (length >= 6)
return 100;
return 33;
}
Aumentará el progreso de la barra de progreso en base a la longitud de la contraseña.
El resultado:
En un escenario donde se necesite un enlace a datos en modo two-way, se debe tener un segundo método encargado de hacer la operación inversa. Esto se consigue utilizando la propiedad BindBack.
Conversiones implícitas
x:Bind añade soporte a conversiones implícitas de algunos tipos.
¿Cuántas veces has creado un BoolToVisibilityConverter o similar (inverso, con opacidad, etc.)?.
Ya no sería necesario!. Podemos tener propiedades de tipo bool:
public bool IsVisible { get; set; }
public bool IsNotVisible { get; set; }
Donde una es cierta y otra falsa:
IsVisible = true; IsNotVisible = false;
Al enlazar desde la UI:
<TextBlock
Text="Visible"
Visibility="{x:Bind IsVisible}"/>
<TextBlock
Text="No Visible"
Visibility="{x:Bind IsNotVisible}"/>
Podemos enlazar la propiedad Visibility directamente con bindings compilados a las propiedades de tipo bool.
¿El resultado?
El esperado, se muestra el elemento visual enlazada la propiedad verdadera. Se realiza la conversión implícita de un tipo a otro.
Castings de valor explícito soportados
Al contrario que el sistema de enlace a datos clásico que hace uso de duck typing, validación semántica, para validar el enlace, los bindings compilados verifican en tiempo de compilación que los tipos de los datos proporcionados coinciden. O lo que es lo mismo, si el valor que se estan tratando de enlazar no tiene un casting implícito al tipo de la propiedad, no se puede realizar el enlace sin un converter.
Eso era hasta ahora. Al más puro estilo C#, podemos declarar casting explícitos en un binding compilado.
Si tenemos una propiedad de tipo object:
public object Element { get; set; }
Si al crear la instancia, se crea utilizando un tipo específico (en nuestro ejemplo se utilizan tipos básicos para simplificar el ejemplo, object y TextBlock):
Element = new TextBlock
{
Text = "Cool"
};
En la UI:
<TextBlock
Text="{x:Bind ((TextBlock)Element).Text}"/>
El resultado:
Se hace el casting al tipo TextBlock y podemos acceder a sus propiedades, enlazamos al texto.
Tenéis el código fuente del ejemplo utilizado disponible en GitHub:
Interesantes novedades, algunas de ellas muy solicitadas. También se han añadido otro tipo de actualizaciones menores como el soporte a más tipos de datos, por ejemplo, acceder a un índice específico de un diccionario clave-valor. Sin embargo, nos hemos concentrado en las que mayor impacto directo pueden tener en el desarrollo del día a día.
Y a ti, ¿qué te parecen?, ¿cúal es tu novedad favorita?, ¿qué te gustaría que se añadiese?.
Más información
- Channel 9: Data Binding: Boost Your Apps’ Performance Through New Enhancements to XAML Data Binding
- Centro de desarrollo Windows: Extensión de marcado x:Bind