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.
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>Olhe na Figura 2 o diagrama relacionado ao exemplo acima.
Agora observe a árvore lógica acima, vista a partir do aplicativo Snoop, como mostra a Figura 3.
- 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.
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.
- Á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.
