Personalizando a Aparência (Look and Feel) do Controle do Servidor Web TreeView
O processamento do controle TreeView é totalmente personalizável, permitindo uma ampla variedade de estilos de exibição.
Para personalizar a aparência do controle TreeView, você pode fazer o seguinte:
Especifique as propriedades do controle TreeView que afetem a exibição do controle e o processamento.
Especifique uma propriedade ImageSet que selecione um conjunto de imagens internas para processar com o controle em tempo de execução.
Especifique propriedades de imagens e estilo individuais que controlem as características de exibição e de processamento de grupos específicos de objetos TreeNode dentro do controle TreeView.
Use o recurso de AutoFormatação do Visual Studio para personalizar um conjunto de propriedades de imagem e estilo de uma só vez.
Atribua um tema ou uma aparência que defina as características de exibição e de processamento em tempo de execução para controles TreeView em um aplicativo.
Propriedades de Layoutde Alto Nível
Além das propriedades padrão de controle de servidor, tais como a propriedade BackColor, o controle TreeView expõe um conjunto de propriedades que fornecem controle preciso sobre a aparência do controle TreeView.
A Propriedade NodeIndent
A propriedade NodeIndent especifica o nível de recuo de todos os nós.Nodes are indented from the side on which the TreeView control is rendered.É o lado esquerdo para localidades que processam da esquerda para direita, e é o lado direito para localidades que processam da direita para esquerda.
A Propriedade NodeWrap
A propriedade NodeWrap especifica se o texto exibido em cada nó passa para o início da próxima linha ou continua na mesma linha quando ele é executado fora do espaço.
A Propriedade ShowLines
A propriedade ShowLines especifica se são exibidas linhas conectando nós filho a nós pai.Quando essa propriedade é definida como true, o controle TreeView pesquisa a pasta da Web acessível especificada pela propriedade LineImagesFolder para as imagens de linha.
Propriedades do TreeNodeStyle
In addition to its own properties, the TreeView control supports properties of the TreeNodeStyle control for each node type.These style properties override the NodeStyle property, which applies to all node types.
O controle TreeView também tem uma propriedade NodeIndent que especifica o nível de recuo de todos os nós.Nodes are indented from the side on which the TreeView control is rendered.É o lado esquerdo para localidades que processam da esquerda para direita, e é o lado direito para localidades que processam da direita para esquerda.
Um nó também pode ter um estilo diferente aplicado quando ele estiver selecionada ou quando o mouse focaliza o nó.When the Selected property of a node is set to true, the SelectedNodeStyle property is applied, which overrides any unselected style properties for the selected node.When the mouse hovers over a node, the HoverNodeStyle property is applied.The following image and table describe the TreeNodeStyle properties.
Propriedades do TreeNodeStyle
.gif)
Propriedade do nó |
Descrição |
|---|---|
Especifica a quantidade de espaçamento vertical entre a nó inteiro atual e nós adjacentes acima e abaixo. |
|
Specifies the amount of space rendered on the top and bottom of the TreeNode text. |
|
Specifies the amount space rendered on the left and right of the TreeNode text. |
|
Specifies the amount of space above and below the child nodes of the TreeNode. |
|
Specifies the path to the image that displays next to the TreeNode. |
A Coleção LevelStyles
A coleção LevelStyles é uma alternativa para configurar as propriedades de estilo individuais, como a propriedade NodeStyle.A coleção LevelStyles controla o estilo de nós em níveis específicos da árvore.O primeiro estilo na coleção corresponde ao estilo de nós no primeiro nível da árvore.O segundo estilo na coleção corresponde ao estilo de nós no segundo nível da árvore, e assim por diante.Essa propriedade é geralmente usada para gerar tabela de menus de navegação de conteúdo-estilo onde os nós em um determinado nível devem ter a mesma aparência, independentemente de terem nós filho.
.gif "Observação") Observação: |
|---|
Se um estilo estiver definido para um determinado nível usando a coleção LevelStyles, então ele substitui qualquer raiz-, pai- ou configurações de estilo nós-folha para os nós deste nível. |
Precedência de Estilo
Propriedades de estilo são aplicadas na seguinte ordem de prioridade:
RootNodeStyle, ParentNodeStyle or LeafNodeStyle, dependendo do tipo de nó.Se a coleção LevelStyles estiver definida, ela é aplicada neste momento, substituindo as outras propriedades de estilo do nó.
AutoFormatação
Se você estiver usando uma ferramenta de design visual, such as Visual Web Developer, o controle TreeView expõe um recurso de AutoFormatação.O recurso AutoFormatação aplica um conjunto de propriedades de exibição para o controle em tempo de design.Essas configurações de propriedade substituem quaisquer valor de propriedade definidos anteriormente e podem ser modificado no designer de código.
Além disso, para atributos de estilo padrão, a AutoFormatação também define a propriedade ImageSet para ser um dos conjuntos disponíveis de imagens que estão incluídos com o controle TreeView.Usando a AutoFormatação, você pode rapidamente alterar a aparência do controle TreeView para imitar outras árvores personalizadas e conhecidas, como a seguir:
A pasta da Caixa de Entrada do Outlook
Sistema de arquivos do Microsoft Windows
Lista de contatos do MSN Messenger
A lista de grupos de notícia do Outlook Express
Sumário MSDN
Sumário da Ajuda do Windows
Perguntas frequentes (FAQs)
Modo de exibição de Lista de Eventos do Windows
Além dos estilos de árvore comuns, o recurso de AutoFormatação inclui uma série de listas com marcadores estilizada.
Enquanto a AutoFormatação é útil para aplicar um conjunto de propriedades a um único controle, você pode usar temas e aparências para aplicar a mesma aparência a vários controles TreeView do seu site Web.Para obter mais informações, consulte Visão Geral de Temas e Aparências ASP.NET.
Propriedades de Imagem
Ao contrário da maioria dos controles, o controle TreeView favorece a capacidade para aplicar um conjunto de recursos gráficos ao controle.Imagens são usadas para representar nós, botões de expandir e recolher e linhas de conexão.
Você pode definir imagens no nível TreeView configurando a propriedade ImageSet ou criando imagens personalizadas e definindo as propriedades individuais de imagens.Você também pode definir imagens no nível TreeNode para personalizar a aparência do controle TreeView ainda mais.
Conjuntos de Imagem
O controle TreeView inclui conjuntos internos de recursos de imagens que são as mesmas imagens usadas em várias árvores comuns.A tabela a seguir mostra alguns dos conjuntos de imagem comuns que você pode usar.
Nome do ImageSet |
Descrição |
|---|---|
TreeViewImageSet.Contacts |
Imagens do MSN Messenger |
TreeViewImageSet.Faq |
Imagens estilo FAQ |
TreeViewImageSet.Inbox |
Imagens da Caixa de Entrada do Outlook |
TreeViewImageSet.News |
Imagens de grupo de notíciasdo Outlook Express |
TreeViewImageSet.Help |
Imagens do sistema de Ajuda do Microsoft Windows |
TreeViewImageSet.XPFileExplorer |
Imagens do gerenciador de arquivos do Microsoft Windows XP |
Linhas e Imagens Personalizadas
Além disso, para usar recursos internos de imagem, você pode definir seu próprio conjunto personalizado de recursos de imagens para o controle TreeView.Para usar um conjunto personalizado de imagens, você deve criar dois tipos de imagens.O primeiro são imagens de nós que mostram um nó expansível, um nó reduzível e um nó que não expande ou reduz.Essas imagens podem ser criadas em um programa como o Microsoft Paint.Se você estiver usando linhas para conectar os nós, você deve criar um conjunto de imagens de linha e definir a propriedade ShowLines para true.Se você estiver usando um programa de designer visual tal como o Visual Web Developer, você pode usar a ferramenta Criador de Imagem de Linha para criar imagens de linha.Caso contrário, você deve criá-los manualmente usando um programa, como o Microsoft Paint.
Uma vez que você criou suas imagens de nó, coloque-os em um diretório no seu site Web e defina então as propriedades a seguir em seu controle TreeView para fazer referência às imagens:
Além disso, as imagens de linha devem ser colocadas em uma pasta e então a propriedade LineImagesFolder deve ser definida para apontar para a pasta de imagens de linha.
Para obter mais informações sobre a propriedade ImageSet e uma lista completa dos conjuntos de imagem disponíveis, consulte ImageSet.
Para obter mais informações sobre imagens de linha e uma lista de todas as imagens do controle TreeView, consulte LineImagesFolder.
Temas e Aparências
Temas e aparências fornecem um modo fácil de aplicar um conjunto de propriedades a vários controles em um site da Web.Por exemplo, se você criar um tema chamado MyTheme e definir uma aparência dentro desse tema chamada aparência MyTreeView, então você pode definir aquela aparência uma vez e aplicá-la a muitos controles TreeView.
Para obter mais informações, consulte Visão Geral de Temas e Aparências ASP.NET.