Recursos especiais neste artigo:
Artigo no estilo Mentoring
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.
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.
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.
...Confira outros conteúdos:
Perguntas frequentes
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.