Archive

Posts Tagged ‘Binding’

DataGrid, ColumnSeries y un toque de MVVM

March 17th, 2011 12 comments

image

Recibí una pregunta pregunta en un post que había escrito previamente. La pregunta era como se puede cambiar una gráfica a la par con los datos de un DataGrid. La respuesta es ¡Con DataBinding!

Muchas gracias.

Ok ok, la explicación larga. Primero vamos a hacer un modelo para datos de prueba:

 

Este modelo cuenta con dos propiedades (Name y Value) e implementa INotifyPropertyChanged para poder manejar el Binding de forma correcta.

Ahora creamos el ViewModel. En una aplicación real deberías obtener dichos valores desde un webservice en tu servidor, pero para efectos prácticos, aquí inicializo una lista de objetos SampleData (nuestro modelo) en el constructor del ViewModel.

 

Finalmente creamos nuestra vista en XAML:

 

En la línea 13 creamos una instancia de nuestro ViewModel y la agregamos a nuestros recursos locales. Después, en la línea 17 asignamos dicho recurso al DataContext de nuestro LayoutRoot (en este caso el Grid que contiene todos los elementos de la vista). En la línea 30 definimos la propiedad Samples de nuestro ViewModel como la fuente de datos del DataGrid. En la línea 40 definimos el binding a la propiedad Value con un slider para modificar los datos fácilmente. Las líneas 55 y 57 se encargan de hacer lo mismo para la gráfica de barras.

Nótese como los bindings se definien con el Mode=TwoWay para actualizar el ViewModel “de ida y vuelta”, es decir, que los cambios en la vista se reflejan en el ViewModel y viceversa.

Puedes ver el ejemplo corriendo aquí. Y puedes descargar el código aquí.

UPDATE: De pura casualidad encontré mi compañera Araceli Medina encontró un bug en el Silverlight Toolkit mientras jugaba con el demo. Estaba jugando con mover sliders y cambiar el tamaño de la ventana cuando noté que esto pasaba:

image_thumb[2]

El borde inferior de los rectangulos no se quedaba en la parte de abajo de la gráfica. No estoy seguro a qué se deba esto pero si se vuelve a cambiar el tamaño de la ventana el problema se corrije. El bug fue dado de alta en codeplex.

[Artículo originalmente publicado en JAMolina.com]

Enlace a datos, almacenaje local, MVVM y MEF

April 4th, 2010 2 comments

En las últimas semanas he agregado algunos artículos nuevos.

La serie de Tim Heuer introduce el desarrollo de aplicaciones en Silverlight y parece ser muy popular. Ahora está disponible la cuarta parte que cubre uno de los aspectos más poderosos de Silverlight: enlace a datos (o databinding en inglés). Si bien el mecanismo en sí ha existido por largo tiempo en .NET, tanto en WPF como en Silverlight toma un papel mucho más prominente en el diseño de la aplicación. Se puede decir que entender bien el modelo de enlace a datos es fundamental en Silverlight. Luego, hacia el final del artículo, Tim cubre un poco sobre el uso de almacenaje de datos en el cliente. El almacenaje local permite guardar preferencias y otra información relevante de manera fácil y segura.

Un tema más avanzado es el diseño de aplicaciones usando el patrón MVVM. Aunque todavía genera gran controversia en la comunidad, especialmente con respecto a qué exactamente es la parte VM (ViewModel o modelo de vista), no hay duda de que es digno de ponerle atención. Al cabo es un patrón y no una receta, por lo que se presta a que cada desarrollador lo interprete a su manera. Con todo y todo, comienzan ya a surgir programas que han aplicado MVVM exitosamente en su diseño. En la segunda parte de su serie, Shawn Wildermuth sugiere cómo usar MEF como herramienta de implementación del patrón MVVM. Shawn tiende a ser muy práctico, dando cuenta no sólo del concepto en general, sino que también narrando las dificultades que ha encontrado y sus posibles soluciones.

Es todo por ahora. Sigo mientras tanto, trabajando en otros artículos. Sus sugerencias y preguntas son siempre bienvenidas.

David

Silverlight 4 Beta – Nuevas propiedades de Binding

November 29th, 2009 No comments

En Silverlight 4 se agregan algunas propiedades para el Atado de Datos que nos permiten tener más control acerca de cómo se están enlazando los datos en los controles destino.  Las propiedades nuevas son las siguientes:

Ve el artículo completo aquí

Silverlight 3 Beta 1: Enlace con RelativeSource

May 15th, 2009 No comments

Silverlight 3 Beta 1: Enlace con RelativeSource

Hace algunos días escribí acerca del Enlace entre Elementos, una de las nuevas características presentes en Silverlight 3 Beta 1 (tomadas de su hermano mayor WPF).  Para complementar ese artículo he decidido hablar por separado de RelativeSource: una propiedad que podemos encontrar en el markup extension Binding.  Esta propiedad en Silverlight soporta dos valores tal y como se describen a continuación:

Self

Cuando establecemos un Binding con RelativeSource=Self estamos indicando que el origen del enlace es el mismo elemento en donde lo estamos estableciendo.  El siguiente fragmento de código explica mejor este concepto:


En este ejemplo tenemos una Ellipse un Slider.  La propiedad Width de la Ellipse está enlazada con la propiedad Value del Slider, justo como lo vimos en este artículo.  Aquí el punto interesante es ver cómo la propiedad Height está enlazada a la propiedad Width de el elemento mismo.  Esto es logrado estableciendo la propiedad RelativeSource a Self, a través del markup extension {RelativeSource}.

TemplatedParent

El otro valor que podemos establecer en RelativeSource es TemplatedParent.  Esta opción indica que el valor lo tomará del control en donde estemos aplicando la plantilla en cuestión, por lo tanto esta opción solo es válida dentro de la declaración de una Platilla.  El siguiente código muestra la declaración de una nueva plantilla para un Botón, llamada ‘miEstilo’.  Dentro de esta Plantilla se declara un TextBlock el cual pone en su propiedad Text el valor de la propiedad Height del control en donde se está aplicando la Plantilla (botón ‘btn’):


Cabe mencionar que esta opción es similar a utlizar {TemplateBinding} dentro de la Plantilla.

Resumen

Las nuevas características de Enlace presentes en Silverlight 3 Beta 1 extienden la funcionalidad y abren nuevas oportunidades para el desarrollo de aplicaciones con esta plataforma.

Para ver una aplicación en vivo que demuestra los conceptos expuestos pueden revisarla aquí (el plugin de Silverlight 3 Beta 1 es requerido).

Silverlight 3 Beta 1: Enlace entre Elementos

April 26th, 2009 No comments

Silverlight 3 Beta 1: Enlace entre Elementos

El enlace entre elementos (Element Binding), presente en WPF, es una de las nuevas características que podemos encontrar en Silverlight 3 Beta 1 y que nos brinda una mayor potencia al crear nuestras aplicaciones en esta plataforma, ya que permite hacer atado de propiedades (binding) de manera directa entre elementos, sin tener que utilizar code-behind o alguna clase intermediario que controle esta relación (similar a lo que sucede con un ViewModel en el patrón MVVM).

Propiedad ElementName

El enlace entre elementos es logrado a través de la propiedad ElementName de la clase Binding.  En esta propiedad indicamos el nombre del elemento al que nos queremos atar, y complementamos el atado usando Path para indicar el nombre de la propiedad a la que nos queremos atar.

El siguiente fragmento de código muestra una implementación sencilla de esta característica:

En el código podemos observar un rectángulo, el cual su propiedad Width está enlazada con la propiedad Value del Slider llamado slider.  La extensión Binding hace uso de Path y ElementName (de hecho, podríamos quitar la invocación de “Path=” ya que precisamente es la propiedad por default).

La siguiente figura muestra esta sencilla aplicación en ejecución:

Un buen ejemplo: Enlace entre datos para controles maestro – detalle

Un lugar donde es benéfico utilizar esta característica es en las aplicaciones que tengan controles que muestren datos maestro – detalle.  Tal es el caso por ejemplo de una lista de datos, que al darle clic nos despliegue el detalle de ese elemento seleccionado en diferentes tipos de controles.

Veamos el siguiente ejemplo: una aplicación que muestra en un ListBox una lista de personas, y al darle clic en alguna de ellas se muestra el resto de datos en controles específicos:

Típicamente con Silverlight 2 tendríamos que crear un manejador para el evento SelectionChanged del ListBox, obtener el elemento seleccionado y establecerlo como DataContext del contenedor de los controles del detalle, es decir, algo similar a esto:

Ahora con esta característica de Enlace o Atado entre Elementos en Silverlight 3 Beta 1 podemos establecer dicha relación de manera declarativa:

Como podrán observar, la propiedad DataContext se está enlazando al elemento seleccionado (propiedad SelectedItem) del ListBox.

Resumen

El Enlace entre Elementos o Element Binding, existente en WPF e incorporado en Silverlight 3 Beta 1 nos permite establecer relación entre elementos de manera declarativa, ahorrándonos código en el code-behind de nuestras aplicaciones logrando así código más sencillo, claro y sobre todo mantenible.  El código fuente del ejemplo lo pueden encontrar en la sección “contenido” de La Liga Silverlight.