Apuntes sobre Data Binding – Play Silverlight

La asociación de datos, o Data Binding, permite conectar elementos de la interfaz de usuario con datos, separando la gestión de los datos de la forma en que éstos son mostrados.

Asociación de datos

Asociación de datos

Asociando un elemento de la interfaz de usuario y un origen de datos, creamos un flujo entre ambos que puede realizarse de tres modos:

  • OneWay: Con este tipo de binding el flujo de datos se realiza en una sola dirección, desde el origen de datos a la interfaz de usuario. (*En WPF existe el modo inverso OneWayToSource, que actualiza la propiedad asociada cuando se produce algún cambio desde la interfaz de usuario)
  • OneTime: Utilizando este modo la interfaz de usuario se actualiza en una única ocasión, haciendo que futuros cambios no queden reflejados en la interfaz de usuario.
  • TwoWay: En este tipo de asociación el flujo se produce en ambas direcciones. Los cambios realizados en el origen de datos se ven reflejados en la interfaz de usuario y viceversa.

En el caso concreto en el que el flujo va de la interfaz de usuario al origen de datos, la actualización del origen se produce de forma automática (por ejemplo, en el caso de un Textbox la actualización se realiza al perder el foco). Sin embargo, hay casos en los que queremos que esa actualización se realice cuando nosotros queramos, para lo cual disponemos de la propiedad UpdateSourceTrigger. Esta propiedad puede tomar dos valores: Default, para que la actualización sea automática; y Explicit, para que la actualización se ejecute cuando nosotros lo especifiquemos en el code behind. La actualización la haremos de la siguiente manera:

BindingExpression bindingExpr = textbox.GetBindingExpression(TextBox.TextProperty);
bindingExpr.UpdateSource();

*En WPF existen dos valores más para esta propiedad, PropertyChanged y LostFocus.

Converters

Hay ocasiones en las que el tipo de datos del elemento de la IU y su origen de datos no coinciden o bien  se necesitan dar un formato determinado al presentar un dato concreto. Para estos casos existe la figura de los convertidores de valor. Para crear un convertidor tan solo debemos de crear una clase que implemente la interfaz IValueConverter y completar los dos métodos de dicha interfaz, Convert y ConvertBack. En el primero de ellos se ha de realizar la conversión desde el tipo del origen de datos al tipo del elemento de la UI, en el segundo la contraria. En el siguiente fragmento de código se muestra su uso.

<TextBlock Text="{Binding TurnDirection, Converter={StaticResource ResourceKey=TurnDirectionConverter}}" />

Para el caso en que necesitemos conectar una propiedad con un listado de propiedades, tendremos que implementar la interfaz IMultiValueConverter. La única diferencia a nivel de implementación es que en el método Convert recibe un array de objetos como parámetro y en ConvertBack el método devuelve un array de objetos convertidos. Su uso en xaml sí que es bastante distinto, ya que deberemos hacer uso de la clase MultiBinding. Aquí dejo un ejemplo de uso:

<TextBlock>
     <TextBlock.Text>
          <MultiBinding Converter="{StaticResource ResourceKey=Converter}"/>
               <Binding Path="TurnDirection"/>
               <Binding Path="Speed"/>
          </MultiBinding>
     </TextBlock.Text>
</TextBlock>

Hay dos propiedades más relacionadas con los convertidores, ConverterParameter y ConverterCulture.

  • ConverterParameter permite pasar un parámetro adicional a la operación de conversión.
  • ConverterCulture con el que se especifica la cultura a utilizar en la conversión.

Más propiedades

Existen una serie de propiedades adicionales que explico a continuación:

  • FallbackValue: Valor que contendrá el campo si no se establece una asociación de datos válida.
  • TargetNullValue: Valor que contendrá el campo en caso de que la propiedad asociada tenga valor null.
  • StringFormat: Con esta propiedad podemos dar formato a  números y fechas sin necesidad de utilizar convertidores. Podemos ver su uso aquí.
  • ElementName: La asociación de datos no se produce necesariamente entre un elemento de la interfaz de usuario y un origen de datos, sino que también podemos realizarla entre propiedades de dos elementos de la interfaz. Para ello, indicaremos la propiedad que queremos asociar y, haciendo uso de la propiedad ElementName de la clase Binding, seleccionamos el control.
Anuncios
Esta entrada fue publicada en Silverlight y etiquetada , , , , . Guarda el enlace permanente.

2 respuestas a Apuntes sobre Data Binding – Play Silverlight

  1. Jose Luis Silva dijo:

    Hola Sergio, encuentro muy claras tus explicaciones, ¿podrías ayudarme por favor con el control AutoCompleteBox en SketchFlow? No logro encontrar información para que funcione apropiadamente con los datos que debo incluir… a tus órdenes, no soy técnico, y estoy elaborando el prototipo de mi Learning Performance Management Suite para Windows Azure Platform… gracias!!

    • Hola,

      para utilizar un control AutoCompleteBox con objetos complejos, tan solo tienes que editar la propiedad ItemTemplate e incluir en ella los datos que quieras mostrar en el panel desplegable. Para ello en la propiedad ItemsSource se tiene que asociar un listado de objetos, cada objeto de ese listado puede tener varias propiedades. Editando la propiedad ItemTemplate, que corresponde con la plantilla de cada uno de los elementos que forman el panel con las sugerencias, puedes incluir un StackPanel con un TextBlock donde se muestre el valor de la propiedad Property1. Dentro de este StackPanel puedes incluir cualquier otra propiedad que necesites mostrar en el desplegable.

      Quería ponerte un código de ejemplo, pero por alguna razón no consigo que aparezca correctamente en la respuesta, si te interesa lanza la pregunta en los foros de Expression y ahí podré pasarte un ejemplo.

      Saludos,

      Sergio

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