Data Binding en WPF. 1º Parte. 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. El caso más típico de data binding es el enlazar un control de la interfaz de usuario con un valor o registro de una base de datos.
Las posibilidades que nos brinda el data binding en WPF para conseguir interfaces dinámicas y mucho más ricas en contenido son mucho mayores que las posibilidades que teníamos en Windows Forms. Ahora podremos modificar el contenido de un control al modificar otro son tener que escribir código extra en eventos, todo esto y mucho más lo hará el binding por nosotros.

WPF nos permite de manera sencilla realizar binding a una propiedad de un control utilizando propiedades de otros controles, objetos, colecciones, etc.

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. Como veremos en artículos posteriores, podremos modificar el comportamiento del binding. Es decir, en ocasiones, cualquier cambio en el valor de la propiedad source será aplicado a la propiedad target. Sin embargo, podremos hacer que cualquier cambio en la propiedad source sea aplicado a la propiedad target y viceversa.

Todo lo anterior visto lo conseguimos mediante la clase Binding (System.Windows.Data).

La clase Binding es la que nos permite realizar el data binding. En ella es donde se establece el tipo de relación entre las propiedades target y source anteriormente vistas. Se utiliza desde XAML con la notación {Binding …} o mediante la notación explícita <Binding …>…</Binding>.

El enlace de una fuente de datos (source) con un destino de datos (target) nos ahorra tener que estar escribiendo código de la forma:

MiElementoInterfaz.Valor = MiAplicacion.Dato

Además, evita tener que escribir código para mantener sincronizados los datos en ambos extremos del enlace.

Veamos cuales son las propiedades principales de esta clase:

ElementName Obtiene o establece el nombre del elemento que se va a utilizar como objeto de origen de enlace.

Mode Obtiene o establece un valor que indica la dirección del flujo de datos en el enlace. PathObtiene o establece la ruta de acceso a la propiedad del origen de enlace.

SourceObtiene o establece el objeto que se va a utilizar como origen de enlace.

NotifyOnSourceUpdatedObtiene o establece un valor que indica si se va a generar el evento SourceUpdated cuando se transfiere un valor del destino de enlace al origen de enlace.

NotifyOnTargetUpdatedObtiene o establece un valor que indica si se va a generar el evento TargetUpdated cuando se transfiere un valor del origen de enlace al destino de enlace.

XPathObtiene o establece una consulta XPath que devuelve el valor en el origen de enlace XML que se va a usar.

 

Binding a un control WPF

El caso más simple y por ello más fácil de entender de un data binding es enlazar la propiedad de un control WPF a la propiedad de otro control.
Pongamos un ejemplo. Tenemos una ventana con un grid que contiene dos textbox. Queremos conseguir que el contenido del segundo textbox (propiedad Text) haga binding a la propiedad Text del primer TextBox. De este modo, cada ve que escribamos algo en el textbox se verá reflejado en el segundo.

Sería algo así:

<TextBox Text="{Binding ElementName=textBox1, Path=Text}"/>

El elemento donde está el origen de datos lo especificamos mediante la propiedad ElementName, mientras que la propiedad de ese elemento donde está el valor deseado lo especificamos mediante la propiedad Path.

Lo escrito anteriormente es facilmente entendible pero en ocasiones no será así. El binding puede llegar a ser mas complejo y para facilitar la lectura y comprensión del mismo en el XAML podemos escribir exactamente lo mismo de la siguiente manera:

<TextBox>
     <TextBox.Text>
          <Binding ElementName="TextBox1" Path="Text" />
     </TextBox.Text>
</Textbox>

Esta sintaxis mas formal es mas larga y puede que de entrada os resulte mas incomoda pero os aseguro que en muchas ocasiones os facilita la compresión del binding.

<Grid>
     <Label>Fuente de datos:</Label>
     <TextBox Name="textBox1" Margin="2" Grid.Column="1" Text="Valor Inicial"/>
     <Label Grid.Row="1">Destino de datos:</Label>
     <TextBox Margin="2" Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=textBox1, Path=Text}"/>
</Grid>

Al elemento fuente hay que darle un nombre para poderse referir a el en el elemento destino.
Si se modifica el texto dentro del primer TextBox, se puede observar cómo cambia simultáneamente el texto del segundo.

Podéis descargar el ejemplo explicado anteriormente del enlace de aquí.

4 pensamientos en “Data Binding en WPF. 1º Parte. Introducción.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s