Personalizar el aspecto y el estilo del control TreeView de servidor Web

Actualización: noviembre 2007

La representación del control TreeView se puede personalizar completamente, utilizando una amplia variedad de estilos de presentación.

Para personalizar el aspecto y el estilo del control TreeView, puede hacer lo siguiente:

• Especificar las propiedades del control TreeView que afectan a la forma en que se muestra y se representa el control.

• Definir una propiedad ImageSet que seleccione un conjunto integrado de imágenes para que se representen con el control en tiempo de ejecución.

• Especificar una imagen determinada y las propiedades de estilo que controlan las características que afectan al modo en que se muestran y se representan grupos específicos de objetos TreeNode incluidos en el control TreeView.

• Utilizar la característica Autoformato de Visual Studio para personalizar un conjunto de imágenes y las propiedades de estilo a la vez.

• Asignar un tema predefinido o una máscara que defina las características que afectan al modo en que se muestran y representan en tiempo de ejecución los controles TreeView de una aplicación.

Propiedades de diseño de nivel superior

Además de las propiedades de control de servidor estándar, como la propiedad BackColor, el control TreeView cuenta con un conjunto de propiedades que proporcionan un control preciso sobre el aspecto del control TreeView.

Propiedad NodeIndent

La propiedad NodeIndent especifica el nivel de sangría de todos los nodos. La sangría se aplica a los nodos desde el lateral en el que se representa el control TreeView. La sangría se aplica en el lateral izquierdo en las configuraciones regionales de izquierda a derecha y en el lateral derecho en las configuraciones regionales de derecha a izquierda.

Propiedad NodeWrap

La propiedad NodeWrap especifica si el texto se muestra en cada contenedor de los nodos al principio de la línea siguiente o continúa en la misma línea si no hay espacio.

Propiedad ShowLines

La propiedad ShowLines especifica si se muestran las líneas que conectan los nodos secundarios con los nodos principales. Cuando esta propiedad se establece en true, el control TreeView busca la carpeta accesible desde el Web que se especifica en la propiedad LineImagesFolder de las imágenes de las líneas.

Propiedades de TreeNodeStyle

Además de sus propias propiedades, el control TreeView admite las propiedades del control TreeNodeStyle de cada tipo de nodo. Estas propiedades de estilo reemplazan a la propiedad NodeStyle, que se aplica a todos los tipos de nodo.

El control TreeView también tiene una propiedad NodeIndent que especifica el nivel de sangría de todos los nodos. La sangría se aplica a los nodos desde el lateral en el que se representa el control TreeView. La sangría se aplica en el lateral izquierdo en las configuraciones regionales de izquierda a derecha y en el lateral derecho en las configuraciones regionales de derecha a izquierda.

También se puede aplicar un estilo diferente a un nodo cuando éste se selecciona o cuando el mouse (ratón) se sitúa sobre él. Cuando la propiedad Selected de un nodo se establece en true, se aplica la propiedad SelectedNodeStyle, que reemplaza todas las propiedades de estilo del nodo seleccionado que no están activadas. Cuando el mouse se sitúa sobre un nodo, se aplica la propiedad HoverNodeStyle. En la tabla y la ilustración siguiente se describen las propiedades de TreeNodeStyle.

Propiedades de TreeNodeStyle

Colección de estilos de niveles

La colección LevelStyles es una alternativa para no configurar cada una de las propiedades de estilo individuales, como la propiedad NodeStyle. La colección LevelStyles controla el estilo de los nodos en niveles específicos del árbol. El primer estilo de la colección corresponde al estilo de los nodos del primer nivel del árbol. El segundo estilo en la colección corresponde al estilo de los nodos del segundo nivel del árbol, etc. Esta propiedad se utiliza habitualmente para generar menús de desplazamiento de estilo en las tablas de contenido donde los nodos de un determinado nivel deben tener el mismo aspecto, con independencia de si tienen o no nodos secundarios.

Nota:
Si se define un estilo en un determinado nivel mediante la colección LevelStyles, este estilo sustituye la configuración de estilo de los nodos raíz, los nodos principales y los nodos de hoja de ese nivel.

Prioridad de estilo

Las propiedades de estilo se aplican en el orden de prioridad siguiente:

1. NodeStyle

2. RootNodeStyle, ParentNodeStyle o LeafNodeStyle, dependiendo del tipo de nodo. Si la colección LevelStyles está definida, se aplica en este momento, y reemplaza a las demás propiedades de estilo de los nodos.

3. SelectedNodeStyle

4. HoverNodeStyle

Autoformato

Si está utilizando una herramienta de diseño visual, como Visual Web Developer, el control TreeView muestra la característica Autoformato. La característica Autoformato aplica un conjunto de propiedades de presentación al control en tiempo de diseño. Esta configuración de las propiedades sustituye los valores de las propiedades que se han establecido anteriormente, y se puede modificar en el diseñador del código.

Además de los atributos de estilo estándar, Autoformato también establece la propiedad ImageSet para que sea uno de los conjuntos de imágenes disponibles que están incluidos con el control TreeView. Mediante Autoformato, puede cambiar rápidamente el aspecto del control TreeView para que sea igual al de otros árboles personalizados conocidos, como los siguiente:

• Carpeta Bandeja de entrada de Outlook

• Sistema de archivos de Microsoft Windows

• Lista de contactos de MSN Messenger

• Lista de grupos de noticias de Outlook Express

• Tabla de contenido de MSDN

• Tabla de contenido de la Ayuda de Windows

• Preguntas más frecuentes (P+F)

• Vista Lista de eventos de Windows

Además de los estilos de árbol comunes, la característica Autoformato incluye varias listas con viñetas estilizadas.

Aunque la característica Autoformato resulta útil para aplicar un conjunto de propiedades a un único control, puede utilizar temas y máscaras para aplicar el mismo aspecto y diseño a varios controles TreeView del sitio Web. Para obtener más información, vea Información general sobre temas y máscaras de ASP.NET.

Propiedades de imágenes

A diferencia de la mayoría de los controles, el control TreeView es capaz de aplicar un conjunto de recursos gráficos al control. Las imágenes se utilizan para representar nodos, los botones Expandir y Contraer y las líneas de conexión.

Puede definir las imágenes en el nivel TreeView estableciendo la propiedad ImageSet o creando imágenes personalizadas y definiendo sus propiedades. También puede definir las imágenes en el nivel TreeNode para personalizar aún más el aspecto del control TreeView.

Conjuntos de imágenes

El control TreeView incluye conjuntos de recursos de imágenes integrados que son las mismas imágenes que se utilizan en muchos árboles comunes. En la tabla siguiente se muestran algunos de los conjuntos de imágenes comunes que podría utilizar.

Líneas e imágenes personalizadas

Además de utilizar los recursos de imágenes integrados, puede definir su propio conjunto personalizado de recursos de imágenes para el control TreeView. Para utilizar un conjunto personalizado de imágenes, debe crear dos tipos de imágenes. El primero son las imágenes del nodo que muestran un nodo expansible, un nodo plegable y un nodo que no se expande ni se contrae. Estas imágenes se pueden crear en un programa como Microsoft Paint. Si está utilizando líneas para conectar los nodos, debe crear un conjunto de imágenes de líneas y establecer la propiedad ShowLines en true. Si está utilizando un diseñador visual como Visual Web Developer, puede utilizar la herramienta Line Image Creator para crear las imágenes de líneas. Si no, debe crearlos manualmente utilizando un programa, como Microsoft Paint.

Cuando haya creado las imágenes de los nodos, sitúelas en un directorio del sitio Web y, a continuación, establezca las propiedades siguientes del control TreeView para que hagan referencia a las imágenes:

• CollapseImageUrl

• ExpandImageUrl

• NoExpandImageUrl

Además, las imágenes de las líneas deben situarse en una carpeta y, a continuación, la propiedad LineImagesFolder debe definirse para que apunte a esta carpeta.

Para obtener más información sobre la propiedad ImageSet y una lista completa de los conjuntos de imágenes disponibles, vea ImageSet.

Para obtener más información sobre las imágenes de las líneas y una lista de todas las imágenes del control TreeView, vea LineImagesFolder.

Temas y máscaras

Los temas y las máscaras constituyen una sencilla manera de aplicar un conjunto de propiedades a varios controles de un sitio Web. Por ejemplo, si crea un tema denominado MyTheme y define una máscara dentro de ese tema denominada MyTreeView, podrá definir esa máscara una vez y aplicarla a muchos controles TreeView.

Para obtener más información, vea Información general sobre temas y máscaras de ASP.NET.

Vea también

Referencia

Información general sobre TreeView (Control de servidor Web)