Carlos Mattos | Just another Microsoft MVPs site

Mar/11

20

WPF – Criando Janelas Transparentes

São inúmeros os benefícios agregados ao WPF para os desenvolvedores que já possuem background em WindowsForms. Tenho explorado algumas dicas práticas e fáceis de implementar que ilustram alguns desses benefícios.  Quantas vezes, você – desenvolvedor WindowsForms – tentou criar formulários com formas geométricas diferentes das convencionais? Não é necessário responder. As alternativas que tínhamos, exigiam o uso de APIs Win32 para conseguirmos os resultados desejados.



Com WPF você pode criar facilmente formulários (janelas no WPF) das mais diversas formas. Por exemplo, você pode pegar uma imagem criada por um designer e utilizá-la como background da sua janela, acrescentar controles e funcionalidades como quaquer janela convencional.  


Veja abaixo um exemplo de janela transparente que apresenta a logomarca, criada por um designer profissional, para um software de gestão de bares e restaurantes que desenvolvi. Esta imagem é usada como splashscreen da aplicação. A Figura 1 apresenta a janela de splash em tempo de execução. A janela está limitada ao círculo da logomarca, o fundo azul é da minha Área de Trabalho.




Figura 1: Exemplo de Janela Transparente



Como não sou designer, e não me atrevo a desenhar nada, escolhi uma imagem com fundo transparente para ilustrar este artigo. Esta imagem apresenta alguns dados (daqueles de jogos), com aspecto de estarem em movimento e o fundo transparente. A imagem está no formato PNG. O objetivo aqui é demonstrar como você pode criar uma janela transparente de forma muito simples e prática. A Figura 2 apresenta nossa a janela transparente deste exemplo, em tempo de execução. Observe que o fundo preto pertence a Área de Trabalho, a janela está limitada a imagem dos dados e ao botão Fechar (imagem com X e fundo vermelho). O mais interessante neste recurso, é que você pode clicar entre os dados (na área transparente) e interagir com qualquer elemento que estiver atrás da janela, ou seja, sua janela assume a forma da imagem criada. Veja a Figura 3 onde há um ícone na Área de Trabalho que está selecionado entre os dados.




 Figura 2: A Janela Transparente em tempo de exeução




Figura 3: Ícone na Área de Trabalho selecionado através da janela transparente


Construindo o exemplo

Este artigo faz parte de uma série direcionada ao desenvolvedores iniciantes. O exemplo criado é simples e fácil de construir. Neste exercício de reproduzir o exemplo ilustrativo deste artigo, você aprenderá como criar uma janela transparente, como movimentar uma janela sem bordas utilizando o método Window.DragMove(), como utilizar os eventos Window.Closing e Window.KeyUp para interagir com sua aplicação. Para os absolutamente iniciantes, não só no WPF mas também na linguagem C#, no evento Window.Closing está um exemplo de aplicação da estrutura condicional switch com a enumeração MessageBoxResult. O template WPF Application foi utilizado para construir este exemplo. Veja a Janela Solution Explorer exibida na Figura 4.


Figura 4: A Janela Solution Explorer

A Janela Transparente MainWindow.xaml

São duas, as propriedades que devem ser ajustadas para esta tarefa. A propriedade AllowsTransparency deve ter valor True, e a propriedade Background deve ser definida como System.Windows.Media.ImageBrush. Você pode realizar esta tarefa utilizando a janela Properties Window, como mostra a Figura 5.


Figura 5: A janela Properties Window


Observe que a propriedade Background pode ser definida como uma cor sólida, gradiente ou uma imagem. Quando o desenvolvedor seleciona a opção imagem, a IDE do Visual Studio ainda permite que ele defina o comportamento da imagem ajustando as propriedades Stretch e Tile. Você ainda pode escolher uma imagem já incluída no projeto ou adicionar uma nova imagem a partir de uma pasta do FileSystem. Esses são apenas alguns dos recursos disponíveis na IDE o Visual Studio 2010. A propriedade WindowStyle também deve ser definida como True. Outra forma de ajustar estas propriedades é através do código XAML, como está demonstrado na Figura 6 a seguir.



 


Figura 6: O código XAML da janela MainWindow

A Imagem Transparente

Observe que não coloquei a imagem transparente (dados.png) como background da Janela, apenas defini que o background seria do tipo Image. E utilizei dois controles Image, um para a imagem de fundo (dados.png) e outro para o botão Fechar (X com fundo vermelho). Não coloquei a imagem dos dados diretamente no background da Janela para permitir o uso do método DragMove() de forma mais eficiente, associado ao evento MouseDown do controle Image. Poderia ter usado o evento MouseDown do container Grid, mas afetaria a resposta do evento Click da imagem usada como botão Fechar.

Codificando


As imagens a seguir apresentam o código C# necessário para implementar este exemplo. Observe atentamente os métodos, eventos, propriedades e objetos utilizados neste exemplo, você poderá utilizá-los em diversas situações.




  Figura 7: A sessão de declarações gerais




Figura 8: O código do controle Image usado como botão Fechar



Figura 9: O código do evento Window.KeyUp



Figura 10: O código associado ao evento Window.Closing



Figura 11: O método DragMove() associado ao evento MouseDown da imagem de fundo

 

Com isto, finalizamos nosso exemplo. Agora é só executar o aplicativo e observar o comportamento da janela transparente. Aprofunde seus conhecimentos sobre este tema visitando a comunidade WPF.

Faça download deste arquivo no formato PDF e também do código-fonte deste exemplo.


 

No tags

1 comment

  • Paulo Tiago C Mariano · May 6, 2011 at 10:35 pm

    Bom guia para iniciantes, tem dicas interessantes para desenvolvedores de plataforma desktop, não somente para WPF, gostei
    Obrigado Carlos pelo post.

    Reply

Leave a Reply

*

<<

>>

Theme Design by devolux.nh2.me