MVVM II "Trabajando con atado de datos"

Por cuestiones de tiempo deje esta serie de post y hoy he decidido retomarlo, ¿Por qué? Bueno, con la llegada de Windows 10 se prevé un auge aún mayor en el uso de este patrón dentro de todo el ecosistema Microsoft, así que si tú tienes pensado o ya desarrollas sobre alguna de las siguientes plataformas WPF, Windows Store Apps, Windows Phone Apps y las futuras Windows Apps deberías tomarte el tiempo para aprender este patrón, ya que ten por seguro que el tiempo que no inviertes hoy en estudiar y aplicar este patrón el día de mañana lo pagaras con creces.

Nota: No he incluido las aplicaciones para Xbox debido a que no he tenido la oportunidad de jugar con este tipo de desarrollos y no acostumbro a dar opiniones de ecosistemas que no he manejado, pero bueno… según la teoría este patrón también te será útil en aplicaciones para Xbox.

El binding

Una vez que hemos visto a groso modo donde nos será útil el patrón MVVM ahora me toca hablar de la característica más importante del lenguaje de marcado XAML el binding. XAML tiene una capacidad casi ilimitada para realizar atado de datos, esta capacidad es importante ya que en eso está basado toda la estructura de MVVM. Por tanto dedicaremos este post a aprender más sobre el uso del Binding, empezaremos por hacer una asignación de la propiedad de un control de forma literal que es como comúnmente se hacen las asignaciones de los valores, para lo cual haremos uso del control TextBlock y de su propiedad Text.

 <TextBlock Text="Literal"/>  

El atado de datos de XAML está basado en convenciones es decir se han definido un conjunto de reglas que debemos seguir, una de estas convenciones es que para hacer el atado de datos se utiliza la palabra Binding dentro de un par de llaves {} con lo cual estaremos indicando que lo que esta dentro de la propiedad no es contenido literal sino que debe ser evaluado para poder obtener el valor que se debe asignar a la propiedad en tiempo de ejecución a esta nomenclatura se le conoce como expresión de atado de datos.

En el siguiente ejemplo haremos el atado de datos para que nuestro TextBlock muestre el contenido que nosotros escribamos en el TextBox que convenientemente hemos llamado txtMensaje.

Para esto crearemos una expresión de atado de datos para indicar que la evaluación debe buscar un elemento dentro del XAML que tenga el nombre txtMensaje por medio de la palabra ElementName y que de este debe asignar la propiedad Text como se muestra en el siguiente código.

 <TextBox x:Name="txtMensaje" />  
<TextBlock Text="{Binding Text, ElementName=txtMensaje}"/>  

Debes saber que las evaluaciones de las expresiones siguen un patrón definido muy sencillo, primero busca el elemento dentro de la expresión, si no puede resolverlo busca dentro de la propiedad DataContext del elemento, si aún no encuentra como resolver la expresión sigue buscando dentro de los DataContext de los elementos padre. Es decir que nuestro ejemplo podría trabajar si indicamos que el DataContext de nuestro elemento padre es TextBox.

 <StackPanel DataContext="{Binding ElementName=txtMensaje}">  
   <TextBox x:Name="txtMensaje" />
   <TextBlock Text="{Binding Text}"/>
</StackPanel>  

Todos los controles XAML tienen un DataContext y por ello la característica de resolución de expresiones nos permitirá trabajar con contextos generales y que todos los elementos hijos tengan acceso al contexto padre, facilitando el desarrollo de los demás elementos que conforman el patrón MVVM, ya que evitamos el uso de asignaciones directas en los controles separando la vista en formato XAML de la lógica.

Hasta aquí este post y te invito a que leas el post MVVM I un poco de historia donde puedes saber un poco más sobre los orígenes de este patrón y su estructura general.