�rvore de elementos: Arquitetura WPF

Incorporado ao .NET a partir da vers�o 3.0, o WPF (windows presentation foundation) inicialmente chamado de avalon, trouxe in�mera funcionalidades e novas capacidades para criaç�o de aplicativos desktop. Animaç�es, suporte a toutch, interfaces poderosas, gr�ficos vetoriais, reconhecimento de voz, enfim v�rios recursos avançados que deram ao desenvolvedor mais poder na criaç�o da suas aplicaç�es. Iremos abordar um pouco de cada pedaço da arquitetura do WPF, e 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, o WPF trabalha da mesma maneira. O WPF utiliza �rvores de objetos para organizar seus elementos dentro da sua estrutura e estabelecer o relacionamento entre eles. Existem dois tipos de �rvore na arquitetura WPF: a �rvore l�gica e �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 para eles, voc� precisar� conhecer detalhes sobre a estrutura em �rvores. Observe a Figura 1.

Figura 1. Hierarquia do WPF

A figura, ilustra 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.

A �rvore L�gica

A �rvore l�gica, ela � respons�vel por descrever os relacionamentos entre os elementos de uma interface de usu�rio, ou seja, toda a hierarquia de elementos de tela (button, datagrid e etc.). Perceba na figura, que no topo est� a classe window e abaixo da mesma, componentes visuais que se relacionam, em um dado ponto na �rvore, aparece a classe grid e abaixo da mesma, mais um conjunto de elementos que se relacionam, a �rvore l�gica representa esta hierarquia completa. Olhe o c�digo XAML de exemplo na Listagem 1.

<Window x:Class=WpfApplication.ExemploArvoreLogica"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="ExemploArvoreLogica" Height="300" \width="300">
  <DockPanel>
    <Button DockPanel.Dock="Left"
      Height="50"
      Width="250"
      Content ="DevMedia"   />
    </DockPanel>
</Window>

Listagem 1. XAML da �rvore L�gica

Olhe na Figura 2 o diagrama relacionado ao exemplo acima.

Figura 2. Diagrama da �rvore l�gica

Agora observe a �rvore l�gica acima, vista a partir do aplicativo Snoop, como mostra a Figura 3.

Figura 3. �rvore L�gica no Snoop

A tela gerada pelo c�digo XAML da Listagem 1.
Aplicativo Snoop, que permite que voc� veja a hierarquia completa da �rvore l�gica, de um aplicativo WPF (Download da ferramenta).
A �rvore l�gica completa.

�rvore l�gica responsabilidades, a �rvore l�gica descreve a hierarquia por inteiro. As responsabilidades da �rvore l�gica 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.

A �rvore Visual

A �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 4.

Figura 4. Refinamento da �rvore visual

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, ele n�o tem apar�ncia em si, ent�o ele interage pela �rvore visual e renderiza cada componente filho tornando o bot�o vis�vel. Observe um exemplo pr�tico na Figura 5.

Figura 5. Exemplo pr�tico

�rvore Visual do elemento Button, todos os n�s abaixo do n� Button s�o seus filhos visuais.
O bot�o renderizado em uma janela WPF.

Estes detalhes s�o importantes, porque no caso de eventos roteados, a rota percorre a �rvore visual e n�o a �rvore l�gica. Voc� vai precisar entender este detalhe, quando começar a utilizar eventos roteados que s�o muito utilizados no WPF.

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. Bom pessoal, espero ter ajudado e contribu�do de alguma forma com o compartilhamento deste conhecimento. Continuaremos abordando elementos que fazem parte da arquitetura do WPF e assim amadurecer no desenvolvimento com esta tecnologia.

�rvore de elementos: Arquitetura WPF

A arquitetura WPF tem suas particularidades e entende-la, é imprescindível para quem desejar extrair todo poder que esta tecnologia tem a oferecer. A árvore de elementos, é uma parte importante e fundamental no arquitetura WPF.

A �rvore L�gica

A �rvore Visual

Artigos relacionados