Desenvolvendo Aplicativos Universais com o Blend

O Visual Studio é um ambiente com muitos recursos para desenvolver aplicativos. Facilita a vida do desenvolvedor com seu sistema de navegação e localização de itens no código, preenchimento automático inteligente e seu depurador avançado, além de muitas outras ferramentas. Ele também é, além disso, um editor muito bom para design de interfaces de aplicativos.

Entretanto, existem alguns pontos específicos no design de telas que não são tão simples de se criar no Visual Studio em si. Algumas animações e efeitos visuais precisam ser codificados na mão, o que pode ser complicado.

Pensando nisso, a Microsoft incluiu o Blend for Visual Studio, um conjunto de ferramentas que facilitam o design de telas de aplicativos para a Windows Store. Tudo que o Blend é capaz de fazer também pode ser feito no Visual Studio, mas o primeiro automatiza algumas tarefas e gera o XAML para o desenvolvedor.

Uma grande vantagem de usar o Blend com o Visual Studio é que os dois softwares são completamente compatíveis: você pode abrir o mesmo projeto em qualquer um dos dois editores e fazer quaisquer alterações, que elas serão reconhecidas pelo outro editor. Além disso, é possível deixar o mesmo projeto aberto nos dois ao mesmo tempo! Quando uma modificação é feita em um editor, o outro reconhece que os arquivos foram alterados externamente e pergunta se você deseja atualizá-los.

Como o Blend é uma ferramenta focada no design de telas, enquanto o Visual Studio é melhor para desenvolver código e depurá-lo, recomenda-se intercalar o uso dessas ferramentas ao desenvolver aplicativos universais. Essa ação é facilitada pelo menu de contexto: se estiver no Visual Studio e quiser editar um arquivo no Blend, basta clicar com o botão direito no nome do arquivo, que está no Solution Explorer, e escolher Design in Blend. Se estiver no Blend, clique com o botão direito no nome do arquivo e escolha Edit in Visual Studio.

Uma funcionalidade poderosa do Blend é a facilidade em mudar os estilos de objetos na página. Vamos exemplificar isso criando um botão redondo no Blend.

Primeiramente, criamos um Aplicativo Universal em branco no Visual Studio. Não existe diferença alguma entre criar o projeto no Blend ou no Visual Studio.

Precisamos agora editar a página MainPage.xaml no Blend. Para fazer isso a partir do Visual Studio, clique com o botão direito no nome da página, no Solution Explorer, e escolha Design in Blend.

Vamos inserir um botão na página. O ícone para se criar botões se encontra ao lado esquerdo da página no editor.

Hora de editar Template do botão para transformá-lo em redondo. Clique com o botão direito no objeto e vá em Edit Template > Edit a copy.

Quando escolhemos Edit a copy, um novo estilo será criado para os botões, baseado no estilo padrão, e ao terminarmos poderemos aplicar esse estilo a quaisquer botões da página através da opção Apply Resource, que se encontra nesse menu. Poderíamos também criar um estilo a partir do zero, através de Create Empty, ou editar o estilo atual, clicando em Edit Current. No nosso caso essa opção está desabilitada, pois o estilo atual do botão é o padrão, que não é editável.

Digite o nome do novo botão em Name (Key). Chamamos aqui de RoundButtonStyle.

Em Define in, pode-se definir o escopo no qual o botão está disponível. Caso queira deixar acessível para a aplicação inteira, escolha Application. Como só vamos usá-lo no documento atual, podemos deixar selecionado This document. Ao lado desta opção existe um menu onde pode-se escolher a disponibilidade do botão dentro do documento: no caso está visível para a tag <Page> e todos os elementos filhos dela. A última opção serve para definir o estilo em um Resource dictionary, arquivo que pode ser reusado em outros projetos.

Como mudaremos drasticamente o estilo do botão, não é preciso reaproveitar nada e podemos apagar o que já existe. Em Objects and Timeline, que fica no lado esquerdo do editor, clique com o botão direito em RootGrid e então delete.

Clique e segure a ferramenta Retângulo, para que apareça a opção Ellipse, e insira uma elipse na página, onde ficava nosso antigo botão quadrado.

Já temos um botão redondo. Agora vamos aplicar alguns efeitos no botão. Podemos trocá-lo de cor quando for pressionado e quando o cursor estiver em cima dele. Selecione a aba States no lado esquerdo do editor, onde se encontra o Solution Explorer. Clique no estado Normal e altere a cor da elipse.

Vamos colocar também outras cores para os estados Pressed e PointOver. Clique no nome dos estados, e então altere a cor da elipse, colocando uma cor para cada um dos estados.

Para terminar de editar o template, clique na primeira caixinha no topo da página, que no nosso caso se chama button. O editor voltará para a edição normal da tela MainPage.xaml.

Se rodarmos o programa, veremos que agora nosso botão redondo muda de cor quando passamos com o cursor por cima e quando clicamos nele.

Para aplicar esse estilo em outro botão, clique com o botão direito no mesmo e vá em Edit Template > Apply Resource > RoundButtonStyle. Dessa forma, se alterarmos o estilo de um botão, todos os botões com aquele estilo se modificarão junto.

Pronto, agora já temos dois botões redondos e com efeitos de clique e mouse over! Tudo isso poderia ser feito no Visual Studio, porém não são oferecidos recursos para fazer com apenas alguns cliques como no Blend.

Nos próximos posts mostraremos mais recursos interessantes oferecidos pelo Blend, como a criação de animações. Continuem nos acompanhando!