Archive

Posts Tagged ‘DataGrid’

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]

Silverlight 4 Series

April 6th, 2010 1 comment

Estimados Amig@s:

Hace algunas semanas comencé a realizar una serie de screencast sobre Silverlight 4.  Les invito a visitar los dos screencast publicados:

Asi mismo les invito a estar pendientes de las próximas entregas, pueden ingresar al Canal que he creado en Vimeo: http://vimeo.com/channels/97917 

Agracederé sus comentarios y sugerencias, para ir mejorando el contenido.

Saludos,

Carlos A. Lone

Utilizando PagedCollectionView de manera declarativa para crear un DataGrid agrupado en Silverlight

August 3rd, 2009 No comments

Introducción

El control DataGrid de Silverlight 3 permite que su fuente de datos sea un objeto de tipo PagedCollectionView.  Dicho objeto nos permite definir uno o varios grupos los cuales servirán para mostrarlos de manera agrupada en el DataGrid que esté enlazado con esta fuente de datos.  Esto ya fue explicado anteriormente por mi buen amigo Santiago Leguiza quien nos explicó cómo utilizar la clase PagedCollectionView junto con el DataGrid.

La definición de la clase PagedCollectionView es:


No obstante cabe resaltar que, esta clase, al no tener un constructor vacío (es decir, que no requiera parámetros para su instanciación) no la podemos usar de manera declarativa en XAML para crear una instancia de ella por ejemplo en un diccionario de recursos.  Tener un constructor vacío y ser una clase pública son los dos principales requisitos de una clase para poderse instanciar desde XAML.  Por si fuera poco, esta clase está marcada como sellada lo cual nos impide crear clases derivadas que pudiesen subsanar este problema.

Ahora bien, aquí ofrezco una solución a esta situación: una clase propia, pública, con un constructor vacío y además extensible, que expone una serie de propiedades entre ellas un PagedCollectionView que podremos usar posteriormente como fuente de datos en un control de tipo DataGrid.

La implementación completa de esta clase es la siguiente:


Esta clase como podemos apreciar expone las siguientes propiedades públicas:

View

Es el objeto de tipo PagedCollectionView que utilizamos como fuente de datos para el enlace con un DataGrid.

Source

Esta propiedad permite establecer un objeto que implemente la interface IEnumerable como fuente de datos para el PagedCollectionView.  De hecho, en el accesor Set{} se vuelve a crear el objeto de tipo PagedCollectionView utilizando el objeto establecido como valor en esta propiedad.

GroupDescription

Representa la definición del agrupamiento.  Este objeto es agregado a la colección GroupDescriptions de la propiedad View, es decir, del objeto de tipo PagedCollectionView.

Utilización

Para utilizar esta clase tenemos que definir en un diccionario de recursos los siguientes elementos:

  • La fuente de datos
  • El descriptor del grupo
  • La instancia de MyPagedCollectionView (clase descrita en este mismo artículo)

El siguiente fragmento de XAML muestra el código necesario para utilizar esta clase.  Nota: El nombre del proyecto de ejempo es SilverlightApplication12.


Lo cual demuestra que de esta manera podremos lograr agrupar el DataGrid pero sin escribir código en el code-behind de nuestra aplicación: todo queda de manera declarativa.

Notas:

La propiedad GroupDescription es una definición de un solo grupo, si quisieran crear varias definiciones de grupo tendrían que cambiar este tipo de propiedad por una lista o array y hacer los cambios apropiados en el código.

Esto simplemente muestra la manera de hacerlo de manera declarativa más NO es recomendado ya que estamos obligando un comportamiento no soportado por la plataforma (El atado de datos TwoWay puede comportarse de manera extraña, este escenario está enfocado a datos de solo-lectura).  No obstante, para efectos demostrativos creo que el código es interesante.

Espero que les sea de utilidad.

Salu2!

Silverlight 3 – DataGrid – Validaciones

July 6th, 2009 1 comment

Sigo mostrando que novedades trae el DataGrid en Silverlight 3. Ahora voy a mostrar de que manera podemos validar la .

Vamos a tomar la misma clase y XAML que usamos en el ejemplo del agrupamiento, lo que vamos a realizar son algunas modificaciones a la clase agregándole la funcionalidad de validar los datos.

Tenemos dos tipos de validaciones disponibles, a nivel de Celda o a nivel de Fila.

Primero agregamos las referencias a System.ComponentModel.DataAnnotations y System.ComponentModel.

Validación de Celda

Tenemos dos posibilidades de generar esta validación, una es utilizando ValidationException y la otra es usando ValidationAttributes llamando a ValidateProperty.

Estas dos opciones las realizamos en la propiedad en el setter (cuando asignamos valor).

Para utilizar ValidationException tenemos que definir las reglas en la propiedad y en el caso de que el valor no sea válido, generamos una excepción al invocar a ValidationException, la cual el control DataGrid lo muestra como una validación de Celda.


Como vemos al cargar un valor inválido nos muestra el error al lado de la celda modificada.1

Ahora podemos utilizar ValidationAttributes en el caso de que queramos utilizar las reglas decorativas que tiene la propiedad.


En este caso, lo que decimos es que verifique que el nombre cumpla con las reglas impuestas, en este caso Required (también funciona para Range y RegularExpression). De esta manera toma esta validación como parte de la Celda.2

Validación de Fila

Las reglas decorativas, como ser Required, Range y RegularExpression son validaciones de Fila, salvo que las utilicemos con ValidationAttributes.


Además tenemos otra posibilidad que es generar reglas que se ejecutan al finalizar la edición de la fila, donde con toda la información cargada vamos a poder validarla.


Declaramos que la clase Disco va a utilizar la validación IsValidGenero de la clase DiscoValidator.

Creamos la clase DiscoValidator.


Validamos que el Genero cargado sea solamente el que especificamos.

3

Como vemos, en la parte inferior aparecen las validaciones correspondientes.

Pueden descargar el proyecto aquí.

Categories: General Tags: ,

Silverlight 3 – DataGrid – Ordenar

July 6th, 2009 No comments

Sigo mostrando que novedades trae el DataGrid en Silverlight 3. Ahora voy a mostrar de que manera podemos definir el ordenamiento del control.

Vamos a tomar la misma clase y XAML que usamos en el ejemplo del agrupamiento.

Al tener el control lleno con la información que enlazamos, ahora vamos a querer que se muestre ordenada por una columna en particular, para ello vamos a utilizar nuevamente un PagedCollectionView.

Agregamos la referencia a System.ComponentModel.

Code-Behind

Desde el código vamos a convertir la lista de datos que tenemos en un PagedCollectionView, al cual le agregaremos los parámetros para ordenar la información.


De esta manera nuestra información al aparecer va a estar ordenada por la columna que especificamos.

2

Pueden descargar el proyecto aquí.

Silverlight 3 – DataGrid – Agrupar Filas

July 6th, 2009 1 comment

Silverlight 3 ha agregado varias novedades al control DataGrid. En este caso vamos a mostrar de que manera podemos agrupar de manera sencilla las filas, teniendo en cuenta que podemos agrupar en 1 o varios niveles nuestra información.

Primero vamos a crear la clase que vamos a utilizar en el ejemplo.


Ahora vamos a agregar el control a nuestro XAML, para ello agregamos la referencia a System.Windows.Controls y System.Windows.Controls.Data en nuestro proyecto.

El XAML quedaría de la siguiente manera.


En la Load agregamos el enlace a los datos.


En este caso mostramos la información sin nivel de agrupamiento, por lo que si queremos agregarlo, tenemos que hacerlo vía código, ya que no podemos en el XAML ya que la propiedad de agrupado la tiene la colección PagedCollectionView.

Agregamos la referencia a System.Windows.Data en nuestro proyecto.

Code-Behind

Desde el código vamos a convertir la lista de datos que tenemos en un PagedCollectionView, al cual le agregaremos los parámetros para agrupar la información.


De esta manera tenemos nuestra información agrupada por lo que nosotros necesitamos.

1

Pueden descargar el proyecto aquí.

Categories: General Tags: ,

Personalización condicional del DataGrid de Silverlight 2

February 28th, 2009 No comments

Personalización condicional del DataGrid de Silverlight 2

Introducción

El control DataGrid de Silverlight 2 ofrece a los desarrolladores un mecanismo para presentar datos tabulares de una manera sencilla, ya que al ser un control atable a datos podemos indicar como fuente de datos cualquier objeto que implemente IList o IEnumerable.  Por este motivo y por el hecho de que automáticamente se ata a todas las propiedades del objeto se crearán las columnas correspondientes sin esfuerzo extra.

No obstante a lo anterior es un escenario común cambiar los colores de las filas de manera condicional, esto es, a partir de un valor o rango de valores de los datos cambiar sus características visuales de cada fila para resaltarlos.

En este artículo veremos cómo modificar la apariencia visual del DataGrid de manera condicional.

Desarrollo

Crearemos una nueva aplicación de Silverlight por medio de la plantilla en Visual Studio .NET 2008.  A esta aplicación le pondremos el nombre de EjemploDataGridCondicional.

Como fuente de datos para nuestra aplicación utilizaremos las clases Album y Albumes descritas en el artículo “Introducción a los Convertidores en Silverlight 2”.

Ya que el control DataGrid está implementado en un ensamblado externo (System.Windows.Controls.Data) necesitamos referenciar este ensamblado en nuestro proyecto y además importar el espacio de nombres xml asignándole un alias para poder identificar las clases incluídas en él de manera única. 

Asimismo también importaremos el espacio de nombres xml del proyecto EjemploDataGridCondicional para poder dar de alta nuestra fuente de datos como parte del diccionario de recursos del UserControl.  El siguiente fragmento muestra el código XAML modificado:

Ahora ya estamos listos para poder crear una instancia del DataGrid.  El siguiente fragmento muestra el código necesario para crear un DataGrid el cual atamos a la fuente de datos implementada en el diccionario de recursos:

Al ejecutar la aplicación, el resultado que obtenemos es el siguiente:

Como podemos observar el comportamiento predeterminado del DataGrid es atarse a todas las propiedades de la fuente de datos y además crear las columnas correspondientes automáticamente.

Colores condicionales para las filas

Para este ejemplo cambiaremos el color de cada álbum que tenga su fecha de lanzamiento anterior al 01/01/1999.  Para realizar esta funcionalidad crearemos un Convertidor de color, esto es, un Convertidor que reciba como entrada la fecha y regrese un color según el rango establecido.  El artículo “Introducción a los Convertidores en Silverlight 2” explica y detalla la creación de Convertidores.

Crearemos una clase llamada ConvertidorFechaColor dentro de un fólder llamado Convertidores en el proyecto de Silverlight. El siguiente código detalla esta clase:

Ahora bien, para utilizar esta clase dentro de nuestro DataGrid debemos definir nuestros propios elementos CellTemplate, los cuales definen la plantilla que se aplicará a cada celda cuando se esté atando a datos el control ya que esta clase soporta un DataTemplate. 

Además, necesitamos establecer la propiedad AutoGenerateColumns=”false” ya que la creación de columnas será ahora nuestra responsabilidad.  Cada columna la crearemos como un DataGridTemplateColumn ya que esta clase nos permite definir nuestra propia plantilla para las columnas.

Cada plantilla de columna tendrá como elemento raiz un Border, el cual será el elemento que cambiaremos de color en las filas.  A la propiedad Background del Border lo ataremos a la propiedad FechaLanzamiento de la fuente de datos, aplicando el Convertidor de color que escribimos anteriormente.  Dentro del Border colocaremos un TextBlock que muestre el texto correspondiente a la columna, atando a datos a la propiedad correspondiente.  El siguiente fragmento de código muestra el ejemplo de la columna “Titulo”:

Si aplicamos el mismo concepto a cada una de las columnas el resultado sería el siguiente:

 

Además, podríamos reutilizar el Convertidor que construímos en el artículo anterior para poder formatear la fecha de lanzamiento adecuadamente, además del cambio de color que estamos aplicando.  Asimismo, podemos ir más allá con el Convertidor de fecha a color si pasamos como parámetro el tipo de color que queremos aplicar, esto es, si es para el fondo del Border o es para el color de la letra del TextBlock.  El siguiente fragmento de código muestra el Border con toda la funcionalidad completa:

El resultado completo de nuestro proyecto es como se muestra:

Resumen

Por medio del elemento CellTemplate dentro de una columna de tipo DataGridTemplateColumn podemos llegar a obtener un grado de personalización avanzado dentro del control DataGrid.  Haciendo uso de Convertidores y lógica personalizada podemos determinar el color de fondo y fuente de cada una de las filas del DataGrid, por ejemplo para resaltar datos que caigan en un rango establecido u otro tipo de factor.

El código fuente de este ejemplo lo pueden descargar de la sección “Contenido” de La Liga Silverlight.

Categories: General Tags: ,