Hola, mundo ligado!

De la misma forma que empezamos este tutorial con el clásico ejemplo "Hello, world", te mostraremos cuan fácil es usar data binding en WPF con un ejemplo "Hello, bound world". Vayamos derecho al ejemplo y después te explicaré.

<Window x:Class="WpfTutorialSamples.DataBinding.HelloBoundWorldSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="HelloBoundWorldSample" Height="110" Width="280">
    <StackPanel Margin="10">
		<TextBox Name="txtValue" />
		<WrapPanel Margin="0,10">
			<TextBlock Text="Value: " FontWeight="Bold" />
			<TextBlock Text="{Binding Path=Text, ElementName=txtValue}" />
		</WrapPanel>
	</StackPanel>
</Window>

Este ejemplo simple muestra como enlazamos la propiedad Text del TextBlock con el valor del TextBox. Como puedes ver en la imagen, el TextBlock se actualiza automáticamente cuando introduces texto en el TextBox. En un mundo no enlazado, esto requeriría escuchar el evento del TextBox y luego actualizar el TextBlock cada vez que el texto cambia, pero con el enlace a datos, la conexión puede ser establecida usando xaml.

La sintaxis del enlazado

Toda la magia ocurre entre las llaves { } en donde en el archivo .XAML encapsulas una extension de un marcador. En el enlace de datos, utilizamos la extensión de enlace, que nos permite describir la relación de enlace para la propiedad Text. En su forma más simple, un enlace puede verse así:

{Binding}

Esto simplemente devuelve el contexto de datos actual (más adelante habrá más). Esto definitivamente puede ser útil, pero en las situaciones más comunes, querrás enlazar una propiedad a otra propiedad en el contexto de datos. Un enlace como ese se vería así:

{Binding Path=NameOfProperty} - {Ruta de enlace = nombre de la propiedad}

Sin embargo, la ruta de acceso indica la propiedad a la que desea vincularse, ya que Path (ruta) es la propiedad predeterminada de un enlace, puedes omitirlo si lo deseas, como ésta:

{Binding NameOfProperty} - {Vinculando Nombre de la Propiedad}

Verás muchos ejemplos diferentes, algunos de ellos donde la Ruta (Path) se define explícitamente y otra donde se deja fuera. Al final, depende de ti.

Sin embargo, un enlace tiene muchas otras propiedades, una de ellas es "ElementName" (nombre del elemento) que usamos en nuestro ejemplo. Esto nos permite conectarnos directamente a otra UI (User Interface) elemento como la fuente. Cada propiedad que establecemos en el enlace está separada por una coma:

{Binding Path=Text, ElementName=txtValue} - {Binding ruta = Texto, NombreDelElemento=ValorTxt}

Resumen

Éste solo ha sido una pequeña visión general de todas las enormes posibilidades del enlace de tatos en WPF, en los próximos capítulos vamos a descubrir mas formas de hacerlo para mostrarte que tan poderoso es el enlace de datos (data binding).