Carlos Mattos

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.

 

Posted: Sun, Mar 20 2011 19:17 by Carlos Mattos | with 1 comment(s)
Filed under: ,

Comments

Paulo Tiago C Mariano said:

Bom guia para iniciantes, tem dicas interessantes para desenvolvedores de plataforma desktop, não somente para WPF, gostei

Obrigado Carlos pelo post.

# May 6, 2011 10:35 PM
Leave a Comment

(required) 

(required) 

(optional)
 

(required) 

If you can't read this number refresh your screen
Enter the numbers above: