A interface gráfica das aplicações é um fator que tem ganhado cada vez mais importância no mercado de software atual. Muitas vezes uma aplicação que oferece mais recursos lógicos (como os de regras de negócios) é trocado por outra que, apesar de mais básica, possui uma interface gráfica mais agradável aos olhos do usuário.
Essa escolha pode parecer estranha, mas se considerarmos que nem sempre o usuário tem conhecimento pleno das funções que o sistema precisa desempenhar, ou ainda que muitas vezes a apresentação do sistema se dá apenas por imagens, não sendo possível identificar de início qual é a opção mais completa, a interface da aplicação como seu cartão de visitas pode parecer um fator de escolha interessante.
Então, mesmo que você desenvolva um sistema bastante completo, que atenda a todas as necessidades do público alvo, garanta que ele também seja “bem apresentável” e que conquiste o usuário “à primeira vista”.
Como boa parte das aplicações comerciais possui controle de acesso, a primeira tela que o usuário visualiza é, geralmente, a de login. Esta a primeira oportunidade para mostrar que você se preocupa com o design e que o usuário pode esperar uma boa experiência de uso.
Nessa hora, um usuário que costume utilizar programas de computador já está cheio de ver aquelas janelas tradicionais geralmente em uma cor bastante “morta”, com uma barra no topo, alguns campos e uns botões com o mais básico dos efeitos de profundidade.
Figura 1: Tela de login antiga
Infelizmente, nem todas as ferramentas de desenvolvimento atuais oferecem recursos para fugir desse padrão, muitas vezes levando o desenvolvedor a optar por utilizar imagens para simular um layout mais elegante. É nesse ponto que a tecnologia WPF mostra seu diferencial (um deles). Utilizando a linguagem de marcação XAML é possível criar controles com interface completamente customizada, com estilos visuais bem elaborados e funcionalidades de animação.
Para demonstrar um pouco desse poder, veremos neste artigo como criar uma janela customizada em WPF, definindo alguns estilos visuais mais agradáveis que o padrão com o qual estamos acostumados em ambientes Windows.
Criando o projeto
Para desenvolver o exemplo, utilizaremos o Microsoft Expression Blend 4, ferramenta destinada ao design de aplicações baseadas em XAML do .NET Framework (WPF, Silverlight e Windows Phone). Nela, iniciaremos criando um novo projeto do tipo WPF Application, conforme a Figura 2.
Figura 2: Criando a aplicação no Blend
Na janela principal que é criada, adicione um objeto do tipo Rectangle, localizado na barra lateral de ferramentas, como mostra a Figura 3.
Figura 3: Inserindo um Rectangle
Este retângulo funcionará como plano de fundo da janela e nele criaremos um efeito de gradiente/dégradé. Para isso, selecione-o e vá até a aba Properties (originalmente encontra-se do lado direito da tela). Na seção Brushes, selecione a opção “Gradient Bbrush” para o Backrgound e monte o gradiente da forma que mais lhe agradar, utilizando as ferramentas logo abaixo dessa opção (Figura 4).
Figura 4: Montando o gradiente do retângulo
Observe que o plano de fundo do retângulo é alterado conforme você define o formato e cor do gradiente. Neste exemplo, o retângulo ficou como mostra a Figura 5.
Figura 5: Aparência da janela com o retângulo
Com o retângulo estilizado, agora é preciso remover o plano de fundo e as bordas da janela, de forma que apenas a região central (retângulo) seja visível quando a aplicação estiver em execução.
Selecione então o objeto Window (a própria janela) e na aba Properties, na seção Brushes, clique em Background e selecione a opção “No brush” para remover o plano de fundo, como ilustra a Figura 6.
Figura 6: Removendo o plano de fundo da janela
Em seguida, na seção Apperance, escolha o tipo None para a propriedade WindowSyle e marque a opção AllowsTransparency, isso removerá as bordas da janela (Figura 7).
Figura 7: Removendo as bordas da janela
Agora a janela deverá estar semelhante ao que ilustra a Figura 8, com apenas o retângulo visível.
Figura 8: Janela sem bordas e plano de fundo
A aparência da janela está pronta, mas se executarmos a aplicação, veremos que não conseguimos mover a tela, já que ela não tem bordas. Para contornar isso, trataremos o evento evento MouseLeftButtonDown do retângulo, para que quando o usuário pressionar e segurar o botão esquerdo do mouse sobre ele, seja possível mover a janela.
Selecione então o retângulo e na aba Properties clique na opção Events, para visualizar os eventos do objeto, de acordo com a Figura 9. Em seguida, clique duas vezes sobre o campo do evento MouseLeftButtonDown, o que criará uma função no código C# (ou Visual Basic) da janela.
Figura 9: Ativando o evento MouseLeftButtonDown do retângulo
Já no código, o procedimento é bastante simples, basta invocarmos a função DragMove da janela dentro do método criado, assim como mostra a Listagem 1.
Listagem 1: Ativando a movimentação da janela a partir do retângulo
private void Rectangle_MouseLeftButtonDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
DragMove();
}
Com isso já podemos executar a aplicação a partir do menu Project > Run Project ou apenas pressionando F5. Veremos apenas o retângulo funcionando como janela e clicando em qualquer parte dele, podemos movê-lo.
Figura 10: Aplicação em execução
Apenas para dar um tom mais realista à janela, vamos inserir alguns controles para simular uma tela de login simples. Não estilizaremos esses controles, pois o objetivo principal deste artigo é melhorar a aparência da janela em si.
Então, na Listagem 2 temos o código XAML completo da, que você pode copiar e colar do editor do Blend (no editor do código XAML, não no código C#/VB).
Listagem 2: Código XAML completo da janela
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="JanelaSemBordas.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="426" Height="312" Background="{x:Null}" WindowStyle="None"
AllowsTransparency="True">
<Grid x:Name="LayoutRoot">
<Rectangle Margin="0,0,8,8" Stroke="Black" Height="258"
VerticalAlignment="Bottom" HorizontalAlignment="Right"
Width="394" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1"
MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF2356A9"/>
<GradientStop Color="#FFB5C4E0" Offset="0.5"/>
<GradientStop Color="#FF2356A9" Offset="0.988"/>
<GradientStop Color="#FF7E9CD0" Offset="0.25"/>
<GradientStop Color="#FF7E9CD0" Offset="0.75"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="176,69,142,0" FontFamily="Segoe UI Light" FontSize="25"
Height="47" VerticalAlignment="Top" Text="Usuário"/>
<TextBox Margin="133,116,117,155" FontSize="25"/>
<TextBlock Margin="176,0,142,104" FontFamily="Segoe UI Light" FontSize="25"
Height="47" VerticalAlignment="Bottom" Text="Senha"/>
<TextBox Margin="133,0,117,74" FontSize="25" VerticalAlignment="Bottom"/>
<Button Height="39" Margin="45,0,205,18" VerticalAlignment="Bottom"
Content="Login" FontFamily="Segoe UI Light" FontSize="25"/>
<Button Height="39" Margin="0,0,25,18" VerticalAlignment="Bottom"
Content="Sair" HorizontalAlignment="Right" FontFamily="Segoe UI Light"
Width="176" FontSize="25"/>
</Grid>
</Window>
Agora, se executarmos nossa aplicação, teremos como resultado algo semelhante à Figura 11.
Figura 11: Aplicação em execução com alguns controles na tela
Temos então uma aplicação com uma aparência mais próxima da realidade, com textos, campos e botões.
Com base nesse pequeno exemplo, o leitor pode criar sua própria janela customizada, definindo efeitos diferentes para o plano de fundo, inserindo imagens, estilizando os demais controles (convenhamos que estes botões estão um pouco “atrasados” se comparados com a janela em si) e aplicando qualquer outra formatação visual que desejar.
