Artigos Canal Mais Boas Práticas de Design de interfaces em WPF
Artigo do tipo Tutorial
Recursos especiais neste artigo:
Artigo no estilo Mentoring
Porque esse artigo é útil
O usuário, geralmente, está mais interessado na aplicação que é mais fácil de usar. Ou seja, para aplicações comerciais, o design de interfaces é extremamente útil, pois, ainda mais importante que ser boa, a aplicação tem que parecer boa aos olhos do futuro usuário, o que torna imprescindível o design de interfaces amigáveis. E o WPF torna esse design uma tarefa muito simples.

O artigo trata da criação de interfaces gráficas em aplicações WPF – Windows Presentation Foundation – utilizando XAML. Serão tratados todos os aspectos básicos a respeito do WPF e do XAML, além da criação de um exemplo básico da tela inicial de um aplicativo simples de finanças, totalmente personalizada através dos poderosos recursos que esse subsistema do .NET framework possui.

O grande objetivo das aplicações comerciais nos últimos tempos tem sido a criação de uma experiência de usuário mais rica, que possa atrair mais consumidores, e consequentemente, vender mais. Porém, a criação da interface costuma ser o que menos importa para o desenvolvedor, que prefere focar na lógica de programação. O que o desenvolvedor precisa perceber é que no caso de aplicações comerciais, principalmente quando se está lidando com pessoas leigas em programação, o design importa ainda mais que as funcionalidades da aplicação, pelo menos inicialmente.

Isso acontece porque o cliente raramente saberá exatamente o que seu aplicativo precisa realizar. Então, para ele, é mais importante que o aplicativo possa ser usado rapidamente do que utilize um recurso extremamente avançado de programação. Uma interface de usuário bem desenvolvida reduz custos de treinamento e atendimento ao usuário, além de aumentar significativamente o grau de satisfação do mesmo. Obviamente, o ideal é que o aplicativo tenha uma interface rica e aquele recurso avançado de programação. Além disso, dificilmente você terá o aplicativo pronto no momento da venda, o que torna ainda mais importante a presença de uma interface de usuário rica e funcional.

É muito importante ressaltar que o desenvolvimento de uma boa interface corresponde a cerca de 50% da aplicação. Em sistemas interativos de sucesso, aproximadamente a metade do código corresponde ao componente da interface. E metade dos recursos disponíveis (financeiros, humanos, etc.) para a aplicação é consumida pelo desenvolvimento da interface. Ou seja, um bom planejamento, também das interfaces, é muito importante para a criação de uma boa aplicação.

Windows Presentation Foundation (WPF): uma visão geral

Para auxiliar na criação dessa interface de usuário rica, o Windows Presentation Foundation se mostra uma excelente opção. O WPF combina as interfaces de usuário, gráficos 2D e 3D, documentos e multimídia em um único framework. Além disso, ele utiliza um motor de renderização baseado em vetores, que tira vantagem dos hardwares gráficos modernos, que torna a UI (do inglês, User Interface) mais rápida e independente de resolução de tela, o que é muito importante hoje em dia.

O WPF faz a separação entre a aparência da aplicação e seu comportamento. A aparência é especificada em XAML, enquanto o comportamento pode ser implementado em qualquer linguagem suportado pelo .NET framework, como C# ou VB.NET. A comunicação entre elas é realizada através de vinculação de dados, eventos e comandos. Por exemplo, o evento do clique em um botão da interface deve chamar uma função de tratamento no código de comportamento da aplicação. Essa separação traz uma vantagem muito importante: a independência do código, ou seja, um mesmo código pode funcionar em diversas interfaces, e vice-versa.

Essa independência gera uma série de benefícios no momento do desenvolvimento. Com ela, o processo de desenvolvimento da interface pode ser separado do desenvolvimento do comportamento da aplicação, permitindo que cada especialista foque naquilo em que é melhor. Isso, teoricamente, reduz o tempo de desenvolvimento pela metade, pois são tarefas que podem ser feitas em paralelo.

Outro fator importante é a globalização da aplicação (BOX 1). Com essa independência da interface com relação ao código, é possível vincularmos diversas interfaces ao mesmo comportamento, cada uma em uma linguagem e cultura específicas. Esse conceito é chamado de Multilingual User Interfaces (MUIs) e é muito simples de ser utilizado.

BOX 1. Globalização da Aplicação

O WPF fornece uma série de elementos para a globalização da aplicação. Além do natural, que seria a simples tradução dos nomes em cada um dos elementos da interface, é possível definir o layout da aplicação para cada linguagem. Por exemplo, aqui utilizamos o sistema de escrita da esquerda para a direita, mas em outras partes do mundo, o sistema utilizado é da direita para a esquerda. E isso pode ser resolvido simplesmente modificando-se a propriedade FlowDirection no XAML.

O WPF também permite que seja realizada uma composição dos controles da tela. Isso significa que é possível definir praticamente qualquer tipo de controle como conteúdo de outro. Colocar uma imagem dentro de um botão ou criar um ListBox para escolher itens são exemplos de boa utilização dessa ferramenta.

Além disso, ainda existe a possibilidade de criar controles customizados (CustomControls) (BOX 2). Isso significa que você pode facilmente alterar completamente a aparência de um botão, por exemplo, para que ele chame mais a atenção do usuário, ou para que ele passe despercebido na tela, embora esse último não faça muito sentido. Isso é muito interessante, e permite que o usuário possua uma experiência única a cada aplicação WPF que utiliza, além de permitir ao desenvolvedor criar uma “marca” para suas aplicações.

BOX 2. Controles Customizados

Controles customizados no WPF é um assunto que poderia render, sozinho, um artigo inteiro. Em resumo: os controles no WPF são baseados em templates e estilos. Então, se modificarmos essas duas propriedades, poderemos deixar o controle da forma que queremos.

Os estilos servem para modificar as propriedades e estão vinculados a um determinado controle. Um controle com um determinado estilo está vinculado às propriedades do mesmo. Por exemplo, um estilo de botão que seta as propriedades background, fontStyle e fontSize, fará com que todo botão vinculado a ele tenha essas propriedades.

Já os templates servem para modificar completamente o controle, podendo alterar sua forma, o posicionamento dos elementos dentro dele, entre outros. Comumente, são incluídos em estilos que contém outras propriedades daquele controle customizado. Por exemplo, um template para um botão poderia facilmente indicar que o botão será uma elipse, um círculo ou mesmo uma estrela.

Extensible Application Markup Language (XAML)

Trata-se de uma linguagem de marcação baseada em XML para criar e inicializar objetos com relações hierárquicas. Foi inventada para ser utilizada com o WPF, mas pode ser utilizada para criar qualquer tipo de árvore de objetos. A XAML também é utilizada juntamente com o Microsoft Silverlight, servindo, por exemplo, para criar as UIs em aplicações para Windows Phone.

...
Quer ler esse conteúdo completo? Tenha acesso completo