Usar el control TreeView

El control TreeView puede mostrar una colección jerárquica (también anidada o recursiva) de datos en un árbol de nodos expandibles.

Para obtener información acerca del control TreeView, vea TreeView (Clase) en MSDN.

Crear datos de ejemplo para mostrar en un control TreeView

Puede usar cualquier tipo de colección en el control TreeView, pero las colecciones jerárquicas sacan el máximo partido de la funcionalidad del control TreeView. Si no dispone todavía de datos que pueda usar en el procedimiento "Rellenar un control TreeView" más adelante, realice este procedimiento para configurar datos de ejemplo que ilustrarán por completo las características del control TreeView:

1. Si no ve todavía el panel Datos, haga clic en el menú Ventana y, a continuación, haga clic en Datos.

2. En el panel Datos, haga clic en Agregar origen de datos de ejemplo  y, a continuación, haga clic en Definir nuevos datos de ejemplo.

3. En el cuadro de diálogo Definir nuevos datos de ejemplo, puede cambiar el nombre predeterminado del conjunto de datos y seleccionar a continuación la parte del proyecto a la que desea asignar la disponibilidad de los datos.

4. Active la casilla Habilitar datos de ejemplo cuando se ejecute la aplicación.

   Sugerencia:
   La casilla Habilitar datos de ejemplo cuando se ejecute la aplicación permite que el proyecto muestre los datos de ejemplo cuando se ejecute la aplicación. Si la casilla no está activada, Microsoft Expression Blend muestra los datos de ejemplo únicamente en la mesa de trabajo. Para obtener más información, vea Hacer que la aplicación muestre datos de ejemplo cuando se ejecute.

5. Haga clic en Aceptar.

   Se crea un origen de datos de ejemplo que incluye una colección de tres tipos de propiedades (cadena , número  y booleana ).

   

6. Junto a  Colección, haga clic en la flecha desplegable situada junto a Agregar propiedad simple  y haga clic en Convertir en colección jerárquica.

   La colección se convierte para proporcionar propiedades que están anidadas a cinco niveles de profundidad.

Ya dispone de una colección de datos de ejemplo lista para ser mostrada en un control TreeView.

Para obtener información acerca de la modificación de datos de ejemplo y de cómo agregar más propiedades de datos, vea Modificar datos de ejemplo.

Rellenar un control TreeView

Existen diversas formas de enlazar datos a un control de la mesa de trabajo. El siguiente procedimiento le muestra la forma más rápida cuando se usa un control TreeView.

Para otras opciones, vea Enlazar un objeto a datos.

1. En el panel Herramientas, haga clic en Activos .

   Sugerencia:
   De forma alternativa, puede mostrar el panel Activos haciendo clic en Activos en el menú Ventana.

2. En el panel Activos, expanda Controles, haga clic en Todo y, por último, haga clic en el control TreeView .

   El botón situado debajo del botón Activos  en el panel Herramientas muestra el icono del control TreeView y está seleccionado.

3. Use el puntero para dibujar un objeto TreeView grande en la mesa de trabajo en el documento principal.

4. En el panel Datos, arrastre la colección de nivel superior ( Colección) al nuevo objeto TreeView.

   El objeto TreeView muestra la colección en el origen de los datos de ejemplo, convirtiendo las propiedades de imagen en objetos de imagen y las propiedades booleanas en casillas.

5. Presione F5 para ejecutar la aplicación.

   Si utiliza los datos de ejemplo del procedimiento anterior y ha habilitado los datos de ejemplo al probar la aplicación, debería ver lo siguiente:

   

Cambiar la apariencia del control TreeView

Puede cambiar la apariencia de los controles modificando sus propiedades o las plantillas que se usan para aplicarles estilos. Puede modificar la plantilla general, las plantillas que organizan los elementos en cada fila, etc.

Para obtener más información, vea Crear o modificar una plantilla.

Cambiar el diseño y la apariencia de los elementos en cada fila

1. En el panel Objetos y escala de tiempo o en la mesa de trabajo, haga clic con el botón secundario en el objeto TreeView, elija Editar plantillas adicionales, elija Editar elementos generados (ItemTemplate) y, a continuación, haga clic en Editar una copia.

2. En el cuadro de diálogo Crear recurso DataTemplate, haga clic en Aceptar.

   Expression Blend cambia al modo de edición de plantilla. La barra de ruta de navegación de la parte superior de la mesa de trabajo muestra que se está editando una plantilla dentro del objeto TreeView. Haga clic en el botón TreeView de la barra de ruta de navegación para salir del modo de edición de plantilla.

3. En el panel Objetos y escala de tiempo, puede ver que los elementos están organizados en un objeto StackPanel. Puede cambiar la orientación de la pila y el orden de apilamiento. También puede cambiar el elemento StackPanel a un panel de diseño diferente, como los paneles de diseño de cuadrícula o lienzo (Grid/Canvas).

   Para obtener más información, vea los temas siguientes:

   • Cambiar la orientación de apilamiento

   • Cambiar el orden de apilamiento

   • Cambiar el tipo de un panel de diseño existente

   • Organizar objetos

4. En el panel Objetos y escala de tiempo, agregue otros objetos a la plantilla o bien modifique las propiedades de los objetos existentes en el panel Propiedades.

Cambiar el color de un elemento seleccionado

1. En el panel Objetos y escala de tiempo o en la mesa de trabajo, haga clic con el botón secundario en el objeto TreeView, elija Editar plantillas adicionales, elija Editar Contenedor de elemento generado (ItemContainerStyle) y, a continuación, haga clic en Editar una copia.

2. En el cuadro de diálogo Crear recurso Style, haga clic en Aceptar.

   Expression Blend cambia al modo de edición de plantilla. La barra de ruta de navegación de la parte superior de la mesa de trabajo muestra que se está editando una plantilla dentro del objeto TreeView. Haga clic en el botón TreeView de la barra de ruta de navegación para salir del modo de edición de plantilla.

   Sugerencia:

   Al adoptar por primera vez el modo de edición de plantilla, la apariencia de la plantilla refleja la apariencia del control cuando no hay interacción del usuario con el control. Para modificar la apariencia del control cuando el usuario interactúa con él, debe seleccionar un desencadenador (en proyectos de Windows Presentation Foundation [WPF]) o un estado (en proyectos de Microsoft Silverlight) estando en modo de edición de plantilla. Por ejemplo, cuando los usuarios seleccionan un elemento en un control TreeView, interactúan con el control y hacen que se produzca un evento seleccionado. Para modificar la apariencia del control cuando hay un elemento seleccionado, debe modificar la plantilla estando seleccionado el desencadenador o el estado correspondiente al evento seleccionado.

3. Realice una de las siguientes acciones:

   • En proyectos de WPF: en el panel Desencadenadores, haga clic en el desencadenador IsSelected = True para adoptar el modo de edición de plantilla para el evento seleccionado. En el panel Objetos y escala de tiempo, haga clic en el objeto Bd. En el panel Propiedades de Pinceles, cambie el color de fondo del objeto Bd. Cuando acabe, haga clic en Valor predeterminado en el panel Desencadenadores para desactivar la grabación de desencadenadores.

   • En proyectos de Silverlight: en el panel Estados, haga clic en el estado seleccionado para adoptar el modo de edición de plantilla para el evento seleccionado. En el panel Objetos y escala de tiempo, haga clic en el objeto Selection. En el panel Propiedades de Pinceles, cambie los colores de relleno y de trazo del objeto Selection. Cuando acabe, haga clic en Base en el panel Estados para desactivar la grabación de estados.

   Para obtener información acerca de cómo abrir paneles, vea Agregar o quitar un panel de área de trabajo.

   Para obtener información acerca del cambio de los colores de los pinceles, vea Establecer colores, pinceles y máscaras.

4. Presione F5 para ejecutar la aplicación y seleccione un elemento del árbol.

Cambiar la apariencia del botón de expansión

1. En el panel Objetos y escala de tiempo o en la mesa de trabajo, haga clic con el botón secundario en el objeto TreeView, elija Editar plantillas adicionales, elija Editar Contenedor de elemento generado (ItemContainerStyle) y, a continuación, haga clic en Editar una copia.

   Sugerencia:
   Si ya ha creado esta plantilla, el comando Editar actual estará habilitado, por lo que podrá seleccionarlo en lugar de Editar una copia.

2. En el cuadro de diálogo Crear recurso Style, haga clic en Aceptar.

   Expression Blend cambia al modo de edición de plantilla. La barra de ruta de navegación de la parte superior de la mesa de trabajo muestra que se está editando una plantilla dentro del objeto TreeView. Haga clic en el botón [TreeView] de la barra de ruta de navegación para salir del modo de edición de plantilla.

3. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en el objeto Expander (proyectos de WPF) o en el objeto ExpandButton (proyectos de Silverlight), elija Editar plantilla y, después, haga clic en Editar actual.

4. En el panel Objetos y escala de tiempo, expanda los nodos para ver el objeto de trazado que representa el botón de expansión del control TreeView. En los proyectos de WPF, el objeto de trazado se denomina ExpandPath. En los proyectos de Silverlight hay dos objetos de trazado denominados UncheckedVisual y CheckedVisual. Después puede usar las herramientas Pluma  y Selección directa  para modificar las formas de estos trazados. En los proyectos de WPF es necesario preservar el nombre y el tipo del objeto ExpandPath porque hay desencadenadores que dependen de él.

   Para obtener más información, vea Usar desencadenadores para definir el comportamiento de un control WPF.

   En los proyectos de Silverlight, puede cambiar la apariencia de los objetos de trazado en el estado Checked, de modo que puede modificar ese cambio.

   Para obtener más información, vea Definir distintos estados visuales para un control.

Vea también

Otros recursos

Crear datos de ejemplo

Conectarse a datos en directo

Mostrar datos en controles