Revista MSDN Magazine Edição 26 - Windows Presentation Foundation (WPF)

Clique aqui para ler todos os artigos desta edição

Windows Presentation Foundation (WPF)

Conheça os 10 avanços mais significativos do “Avalon”

Ian Griffiths E Chris Sells

O subsistema atual de IU gráfica baseado em Windows Win32, existente no Windows XP, já tem quase 20 anos. Está envelhecido e limitado, e como resultado, o desenvolvimento da interface de usuário é no mínimo bem constrangedora.

A Windows Presentation Foundation (WPF) construída sobre o .NET Framework provê novas técnicas para o desenvolvimento de aplicações e faz melhor uso do hardware e tecnologias atuais. Neste artigo, mostraremos os 10 avanços mais significativos que tornam o WPF superior em relação aos seus antepassados Win32. É provável que alguns dos detalhes específicos mudem na versão final do WPF, contudo, esperamos que os conceitos fundamentais permaneçam os mesmos. Para saber como começar a desenvolver para WPF hoje, veja o quadro Download e Instalação do WPF SDK.

Download e Instalação do WPF SDK

·                     Se quiser começar a desenvolver com o WPF hoje, deve fazer o download e instalar na sua máquina o runtime do WinFX e o SDK. Este é um software pre-release e, como tal, não foi submetido ao nível habitual de testes dado aos softwares para distribuição da Microsoft. Assim, melhor não instalá-lo em uma máquina de produção, claro. Este artigo é baseado na versão pre-release do community technology preview (CTP) do WinFX, uma versão post-Beta 1. Além disso, também podemos fazer o download do Visual Studio Extensions para o WinFX. Todos os endereços para download são listados na seção links deste artigo.

10. Gráficos avançados

No decorrer dos anos, as funcionalidades de desenho do Windows melhoraram continuamente, apesar de incrementalmente. Antes do WPF, o GDI+ era o topo dos gráficos 2D em Windows.

Capacidades de desenho melhoradas - O WPF representa um grande avanço comparado ao GDI+. Faz consideravelmente melhor uso do hardware gráfico, executando muito mais rápido do que o GDI+. Oferece um rico conjunto de recursos e introduz algumas capacidades novas. Por exemplo, o GDI+ permite que regiões sejam “cortadas” ao serem desenhadas. O WPF leva mais adiante essa característica: o recurso de máscara de opacidade não só deixa “cortar” a saída em qualquer forma, mas também permite modificar a opacidade de qualquer conteúdo.

Figura 1. Máscara de opacidade

Por exemplo, considere o padrão gráfico mostrado na Figura 1. Podemos criar um brush, usando algum código do Extensible Application Markup Language (XAML), que permite pintar com esse padrão (XAML, a propósito, é uma linguagem baseado em XML, para construir estruturas hierárquicas de objetos .NET. Provê um modo compacto e conveniente de criar objetos WPF). A seguir, um exemplo de código XAML para definir um brush:

<DrawingBrush Viewbox="0,0,1,1" ViewboxUnits="Absolute"

        Viewport="0,0,0.07,0.2" TileMode="Tile">

  <DrawingBrush.Drawing>

    <GeometryDrawing Brush="HorizontalGradient #f000 #0000">

      <GeometryDrawing.Geometry>

        <RectangleGeometry Rect="0,0,1,0.6" />

      GeometryDrawing.Geometry>

    GeometryDrawing>

  DrawingBrush.Drawing>

DrawingBrush>

Esse brush pode ser usado como máscara de opacidade (OpacityMask) para qualquer elemento da interface de usuário. A Figura 2 mostra um texto amarelo por cima de um fundo de preenchimento gradiente, usando essa máscara para modular a opacidade.

Figura 2. Texto com uma máscara de opacidade aplicada

Menos restrições de controles - É bom ter essas novas capacidades de desenho, mas o WPF fez algumas mudanças mais profundas. Uma das diferenças é que o desenho já não é limitado a um único controle. Consideremos aplicações Win32, podendo ser qualquer aplicação baseada em Windows que seja construída usando o Windows Forms, MFC, Windows Template Library ou Visual Basic, bem como qualquer aplicação que usa diretamente a API Win32.

Com o Win32 e as APIs de desenho gráfico GDI e GDI+, cada controle no IU é responsável por sua própria área de desenho. “Janelas” são subdivididas pelos controles em um conjunto de regiões, que normalmente, mas não necessariamente, são retangulares. Ou seja, se escolhermos um único pixel em uma janela, haverá exatamente um controle responsável pelo desenho daquele pixel.

O problema com essa abordagem é que torna impossível alguns efeitos de IU. Uma pergunta bastante freqüente sobre o Windows Forms é: "Como desenhar algo de forma que pareça estar por cima de todos os controles no formulário"? Do momento em que cada controle tem propriedade exclusiva de parte da tela, não existe nenhum modo direto de obter esse efeito. Enquanto há formas viáveis de contornar isso no ambiente GDI+, isso pode não funcionar se quisermos usar efeitos de desenho parcialmente transparentes. O GDI+ oferece transparência parcial e anti-aliasing para operações de desenho, mas só quando isso for feito dentro dos limites de um determinado controle.

O WPF está livre dessa limitação. Nenhum único controle ou elemento IU tem propriedade exclusiva de qualquer parte da janela em uma aplicação do WPF. Podemos criar elementos IU parcialmente transparentes, ou controles que não são visualmente restritos ao seu retângulo lógico. Por exemplo, é possível que um controle crie uma sombra que ultrapasse essa região lógica.

Vejamos, por exemplo, a Figura 3. Essa imagem mostra dois botões. O botão no topo é semi-transparente e o botão no fundo é visível através do botão do topo. Também tem uma elipse parcialmente transparente misturada. Esse tipo de sobreposição de desenho é simplesmente impossível com o Windows Forms ou outros sistemas baseados em Win32 (o Windows Forms oferece pseudo-transparência que pode contornar algumas dessas limitações, mas só funciona para desenhos muito básicos).

Figura 3. Controles e transparência no WPF

De fato, a janela inteira se torna uma única superfície de desenho para a qual cada uma das partes da IU contribui. Isso ajuda a habilitar outra característica gráfica importante do WPF: independência de resolução.

Independência de resolução - A resolução de monitores de tela plana tem melhorado gradativamente. Monitores de 150 dpi são comuns, de 200 dpi já estão disponíveis e é provável que as resoluções continuem aumentando. A escalabilidade é crucial para habilitar o uso de monitores com alta capacidade de dpi. Sem a capacidade de escalar a IU de uma aplicação, a mesma fica menor à medida que aumenta a resolução, ficando inutilizável tipicamente para qualquer resolução acima de 150 dpi.

Embora o GDI+ habilite desenho independente de resolução, como faz o GDI, é muito difícil escrever aplicações visuais escaláveis, usando essas tecnologias. Se aplicarmos uma transformação de escalamento ou rotação com essas API, só afetará os desenhos. Não há nenhuma alteração nos tamanhos e posições dos controles na janela. Tecnicamente, o problema é que o GDI e o GDI+ são escaláveis, mas o USER32 não é. Podemos escalar desenhos, mas não podemos facilmente escalar controles e o modo como o espaço de uma janela é montado.

Como o WPF compõe todos os controles na janela como um único desenho, em lugar de separar cada controle em sua própria região, é fácil aplicar escalamento ou transformações de rotação para a IU como um todo. Assim, desde que possamos escalar uma IU WPF para cima ou para baixo, aplicações WPF são efetivamente independentes de resolução. As imagens permanecem definidas e claras, ao invés do “borrão” comum no escalamento de bitmaps.

Animação e vídeo - O WPF provê suporte nativo para animação e vídeo, permitindo construir IUs dinâmicas mais facilmente. Embora possamos animar partes de IUs com o GDI ou o GDI+, o processo exige montar um timer e escrever código para atualizar a exibição regularmente. Com o WPF, podemos instruir o sistema para animar elementos automaticamente.

O suporte para animação é abrangente, permitindo que você anime qualquer parte da interface de usuário. Este exemplo mostra um retângulo cuja largura é repetidamente animada de 20 a 200 a cada cinco segundos:

<Rectangle Fill="Blue" Height="100">

  <Rectangle.Triggers>

    <EventTrigger

        RoutedEvent="Rectangle.Loaded">

      <BeginStoryboard>

        <Storyboard TargetProperty=

            "(Rectangle.Width)">

          <DoubleAnimation From="20" To="200"

              Duration="0:0:5"

              RepeatBehavior="Forever" />

        Storyboard>

      BeginStoryboard>

...