Incorporado ao .NET a partir da versão 3.0, o WPF (Windows Presentation Foundation) inicalmente chamado de Avalon, trouxe inúmeras funcionalidades e novas capacidades para criação de aplicativos desktop.

Animações, suporte a toutch, interfaces poderosas, gráficos vetoriais, reconhecimento de voz…. vários recursos avançados que deram ao desenvolvedor mais poder na criação da suas aplicações. Abordaremos neste artigo um pouco de cada pedaço da arquitetura do WPF, para entender melhor como funciona este novo mundo.

Árvore de elementos

Não são poucas as tecnologias, que utilizam estruturas em árvores para organizar seus elementos e componentes, e o WPF trabalha da mesma maneira. O WPF utiliza árvores de objetos para organizar seus elementos dentro da sua estrutura e para estabelecer o relacionamento entre eles.

Existem dois tipos de árvore na arquitetura WPF:

• árvore lógica
• árvore visual

Talvez você possa estar se perguntando: por que devo entender sobre estas árvores e como elas funcionam? Uma vez que os elementos no WPF são organizados desta forma, caso você queira manipular, interagir ou até mesmo rotear eventos, precisará conhecer detalhes sobre a estrutura em árvores. Observe a figura abaixo:

A hierarquia existente dentro da estrutura do WPF, tanto na árvore lógica, quanto na árvore visual. Vamos entender em detalhes cada uma destas árvores.

01. Árvore Lógica

É responsável por descrever os relacionamentos entre os elementos de uma inteface de usuário, ou seja, toda a hierarquia de elementos de tela (button, datagrid e etc…). Perceba que no topo da figura está a classe window e abaixo estão os componentes visuais que se relacionam.

Em um dado ponto na árvore aparece a classe grid e abaixo dela aparece mais um conjunto de elementos que se relacionam. A árvore lógica representa esta hierarquia completa. Veja o XAML abaixo:

Agora, observe o diagrama relacionado ao exemplo acima:

E agora, a vista a partir do aplicativo snoop:

1. A tela gerada pelo código XAML, em uma das figuras acima.
2. Aplicativo Snoop, que permite ver a hierarquia completa da árvore lógica de um aplicativo WPF (para baixar a ferramenta, clique aqui).
3. A árvore lógica completa.

Árvore lógica – Responsabilidades

A árvore lógica descreve a hierarquia por inteiro e suas responsabilidades são:

• Herdar os valores da propriedade DependencyProperty.
• Resolver referências a DynamicResources.
• Olhar para os elementos acima na hierarquia, para realizar o binding.
• Direcionar o roteamento de Eventos.

02. Árvore Visual

Descreve a estrutura para objetos visuais, no caso, objetos que herdam da classe base Visual. Quando o desenvolvedor define um template para um determinado objeto, ele na verdade está redefinindo a árvore visual para este elemento. Observe a figura abaixo:

Todos os componentes na hierarquia abaixo de button fazem parte da árvore visual do componente Button. Ou seja, todos este elementos são “filhos” visuais de Button. Quando o WPF renderiza o botão, que não tem aparência em si, ele interage pela árvore visual e renderiza cada componente filho
tornando o botão visível. Observe um exemplo prático:

1. Árvore Visual do elemento Button, todos os nós abaixo do nó Button são seus filhos visuais.
2. O botão renderizado em uma janela WPF.

Estes detalhes são importantes, para o caso de eventos roteados, a rota percorre a árvore visual e não a árvore lógica. É preciso compreender este detalhe quando começar a utilizar eventos roteados, que são muito utilizados no WPF.

Árvore Visual – Responsabilidades

A árvore visual é responsável por:

• Renderizar elementos visuais.
• Propagar opacidade dos elementos.
• Propagar Layout e RenderTransforms.
• Propagar a propriedade IsEnabled.
• RelativeSource (encontrar elemento ancestral).

Entender estes conceitos, é de suma importância se você deseja se aprofundar no desenvolvimento com WPF. Recursos como eventos roteados, comandos roteados são baseados nestes conceitos de estrutura em árvore.

Continuaremos abordando elementos que fazem parte da arquitetura do WPF e assim amadurecer no desenvolvimento com esta tecnologia.

Obrigado e até a próxima!