TreeView hasta el infinito… y más allá

¿Alguna vez necesitaste mostrar información jerárquica y no supiste cómo? Es mucho más fácil de lo que te imaginas.

La primera vez que me encontré con el TreeView de WPF no entendí nada. Al pasar al TreeView de Silverlight seguí igual. Cuando me di cuenta que para domarlo tenía que entender el HierarchicalDataTemplate comencé a perder mi adorado cabello. Para mí el único problema con Silverlight es que representa un cambio de paradigma lo suficientemente grande como para no entender las cosas si no se las revisa hasta diez veces. Sin embargo, una vez lo captas te sientes como en las nubes: puedes hacer lo que te pidan.

Uno de los ejercicios básicos con el TreeView es el despliegue de información jerárquica y en ocasiones es tanta que sabes dónde comienza pero no donde termina. Un árbol genealógico es un ejemplo de ello pero hoy vamos a verlo en acción con el organigrama de una empresa.

Al final de este ejercicio obtendremos algo como esto (pequeño pero supongan que se extiende hasta el infinito):

image

En este ejemplo nos valdremos de una única clase, muy sencilla, que servirá para contener cada empleado y sus respectivos subordinados:

  1. public class Empleado
  2. {
  3.     public string Nombre { get; set; }
  4.     public List<Empleado> Subordinados
  5.       { get; set; }
  6. }

En la vida real un empleado cuenta con mucha más información pero para efectos de este ejemplo lo dejaremos lo más simple posible. Aquí tendremos para cada empleado un nombre y una lista de subordinados (en otras palabras, aquellos que le siguen en la cadena alimenticia). Nótese que la lista de subordinados es del mismo tipo: Empleado.

Hago un paréntesis para recordar que en Silverlight no disponemos de DataSets, por lo que tenemos que trabajar con colecciones de objetos. Afortunadamente el EntityDataModel no solo se conecta a la base de datos, además nos entrega colecciones de objetos como el que utilizaremos en este ejemplo.

La parte semi-compleja, aunque realmente no lo es, es definir el Template para los nodos del TreeView. Y dado que una imagen vale más que mil palabras adjunto la imagen que explica el XAML que necesitamos:

DiagramaHDT

Bastante sencillo. Iniciamos creando el HierarchicalDataTemplate, como un recurso, para indicar la forma en que el TreeView debe alimentar sus nodos. En ese Template lo único que nos interesa mostrar es el nombre, de modo que un simple Binding es todo lo que necesitamos. Y como la labor del HierarchicalDataTemplate es mostrar información de forma jerárquica solo nos resta decirle que los nodos hijos deben alimentarse de la propiedad Subordinados (ItemsSource="{Binding Path=Subordinados}"). Finalmente indicarle al TreeView que el Template para los nodos es el que acabamos de definir (ItemTemplate="{StaticResource hdtEmpleado}"). Aclarar que como no hemos especificado otros Templates, lo que es posible, todos los nodos del TreeView utilizarán el mismo Template.

Más fácil de entender que de explicar.


El código demo de este artículo lo consiguen aqui.

Anuncios

Acerca de SilverIdeas

Instructor y entusiasta en el uso de Silverlight y otras tecnologías XAML.
Esta entrada fue publicada en Silverlight y etiquetada , , . Guarda el enlace permanente.

4 respuestas a TreeView hasta el infinito… y más allá

  1. Anónimo dijo:

    lamentablemente el enlace para la descarga no funciona….

  2. claudiojlf dijo:

    Hola, muy buena explicación, pero el código no se puede descargar.. ; Saludos y Gracias.

  3. jc dijo:

    Pero como darle realmente funcionalidad a un treeview, por que pintarlo esta bien lo bueno esta en manipular sus elementos que al darle click en un nodo haga saver a quien se le dio click y accer una accion con los el dado que trae ese nodo.

    • SilverIdeas dijo:

      Es muy fácil… solo debes suscribirte al evento SelectedItemChanged, que se lanza cuando se selecciona un Nodo cualquiera. Y para conocer el dato vinculado a ese nodo solo debes consultar TuTreeView.SelectedItem.

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