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.

desenvolvendo_aplicativos_com_blend_00_create_project

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.

desenvolvendo_aplicativos_com_blend_01_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.

desenvolvendo_aplicativos_com_blend_02_criar_botao

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.

desenvolvendo_aplicativos_com_blend_03_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.

desenvolvendo_aplicativos_com_blend_04_nomear_estilo

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.

desenvolvendo_aplicativos_com_blend_05_deletar_root_grid

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.

desenvolvendo_aplicativos_com_blend_06_inserir_elipse

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.

desenvolvendo_aplicativos_com_blend_07_colorir_estado_normal

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.

desenvolvendo_aplicativos_com_blend_08_colorir_estado_pressed

desenvolvendo_aplicativos_com_blend_09_colorir_estado_point_over

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.

desenvolvendo_aplicativos_com_blend_10_voltar_ao_editar_pagina

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.

desenvolvendo_aplicativos_com_blend_11_inserir_novo_botao

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!

Anúncios

Um comentário

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s