Passo a passo: Criar um botão usando o Microsoft Expression Blend

Este passo a passo orienta você pelo processo de criação de um botão personalizado do WPF usando o Microsoft Expression Blend.

Importante

O Microsoft Expression Blend funciona gerando XAML (Extensible Application Markup Language) que é compilado para tornar o programa executável. Se você preferir trabalhar com XAML diretamente, há outro passo a passo que cria o mesmo aplicativo que este usando XAML com Visual Studio em vez de Blend. Consulte Criar um Botão com XAML para mais informações.

A ilustração a seguir mostra o botão personalizado que você criará.

Converter uma forma em um botão

Na primeira parte deste passo a passo, você cria a aparência personalizada do botão personalizado. Para fazer isso, primeiro converta um retângulo em um botão. Em seguida, você adiciona formas adicionais ao modelo do botão, criando um botão de aparência mais complexo. Por que não começar com um botão normal e personalizá-lo? Porque um botão tem funcionalidade interna que você não precisa; Para botões personalizados, é mais fácil começar com um retângulo.

Para criar um novo projeto no Expression Blend

1. Inicie o Expression Blend. (Clique Iniciar, aponte para Todos os Programas, aponte para Microsoft Expressione, em seguida, clique em Microsoft Expression Blend.)

2. Maximize o aplicativo, se necessário.

3. No menu Arquivo, clique em Novo Projeto.

4. Selecione Aplicação padrão (.exe).

5. Nomeie o projeto CustomButton e pressione OK.

Neste ponto, você tem um projeto WPF em branco. Você pode pressionar F5 para executar o aplicativo. Como seria de esperar, a aplicação consiste apenas numa janela em branco. Em seguida, crie um retângulo arredondado e converta-o em um botão.

Para converter um retângulo em um botão

1. Defina a propriedade Plano de fundo da janela como preto: Selecione a janela, clique na guia Propriedades da e defina a propriedade Background como Black.

   

2. Desenhe um retângulo aproximadamente do tamanho de um botão na janela: Selecione a ferramenta retângulo no painel de ferramentas esquerdo e arraste o retângulo para a janela.

   

3. Arredondar os cantos do retângulo: Arraste os pontos de controle do retângulo ou defina diretamente as propriedades RadiusX e RadiusY. Defina os valores de RadiusX e RadiusY como 20.

   

4. Altere o retângulo em um botão: Selecione o retângulo. No menu Ferramentas, clique em Criar Botão.

   

5. Especifique o escopo do estilo/modelo: Uma caixa de diálogo como a seguinte é exibida.

   

   Para Nome do recurso (chave), selecione Aplicar a todos. Isso fará com que o estilo resultante e o modelo de botão se apliquem a todos os objetos que são botões. Para Definir no, selecione Aplicação. Isso fará com que o estilo resultante e o modelo de botão tenham escopo em todo o aplicativo. Quando você define os valores nessas duas caixas, o estilo e o modelo do botão se aplicam a todos os botões dentro do aplicativo inteiro e qualquer botão criado no aplicativo irá, por padrão, usar esse modelo.

Editar o modelo de botão

Agora você tem um retângulo que foi alterado para um botão. Nesta seção, você modificará o modelo do botão e personalizará ainda mais sua aparência.

Para editar o modelo de botão para alterar a aparência do botão

1. Vá para a visualização de modelo de edição: Para personalizar ainda mais a aparência do nosso botão, precisamos editar o modelo de botão. Este modelo foi criado quando convertemos o retângulo em um botão. Para editar o modelo de botão, clique com o botão direito do rato no botão e selecione Editar Partes de Controlo (Modelo) e, em seguida, Editar Modelo.

   

   No editor de modelos, observe que o botão agora está separado em um Rectangle e o ContentPresenter. O ContentPresenter é usado para apresentar conteúdo dentro do botão (por exemplo, a string "Button"). Tanto o retângulo quanto o ContentPresenter estão dispostos dentro de uma Grid.

   

2. Altere os nomes dos componentes do modelo: Clique com o botão direito do mouse no retângulo no inventário do modelo, altere o nome do Rectangle de "[Rectangle]" para "outerRectangle" e altere "[ContentPresenter]" para "myContentPresenter".

   

3. Altere o retângulo para que fique vazio por dentro (como um donut): Selecione de retângulo externo e defina Fill para "Transparente" e StrokeThickness para 5.

   

   Em seguida, defina o Stroke como a cor que será usada no modelo. Para fazer isso, clique na pequena caixa branca ao lado de Traçado, selecione CustomExpressione digite "{TemplateBinding Background}" na caixa de diálogo.

   

4. Crie um retângulo interno: Agora, crie outro retângulo (chame-o de "retângulo interno") e posicione-o simetricamente no interior de retângulo externo . Para este tipo de trabalho, você provavelmente vai querer ampliar para tornar o botão maior na área de edição.

   Observação

   Seu retângulo pode parecer diferente do da figura (por exemplo, pode ter cantos arredondados).

   

5. Mover ContentPresenter para o topo: Neste ponto, é possível que o texto "Button" não fique mais visível. Se for assim, é porque innerRectangle está em cima do myContentPresenter. Para corrigir isso, arraste myContentPresenter abaixo innerRectangle. Reposicione retângulos e myContentPresenter de forma semelhante à ilustrada abaixo.

   Observação

   Como alternativa, você também pode posicionar myContentPresenter na parte superior clicando com o botão direito do rato nele e pressionando Avançar.

   

6. Alterar a aparência de innerRectangle: Defina os valores RadiusX, RadiusYe StrokeThickness como 20. Além disso, defina o Fill para o plano de fundo do modelo usando a expressão personalizada "{TemplateBinding Background}" ) e defina Stroke como "transparent". Observe que as configurações para o Fill e Stroke de retângulo interno são o oposto daquelas de retângulo externo.

   

7. Adicione uma camada de vidro no topo: A parte final de personalizar a aparência do botão é adicionar uma camada de vidro no topo. Esta camada de vidro consiste num terceiro retângulo. Como o vidro cobrirá todo o botão, o retângulo de vidro é semelhante em dimensões ao retângulo externo. Portanto, crie o retângulo simplesmente fazendo uma cópia do outerRectangle. Selecione outerRectangle e use CTRL+C e CTRL+V para fazer uma cópia. Nomeie este novo retângulo como "glassCube".

8. Reposicione glassCube, se necessário: Se glassCube ainda não estiver posicionado de modo a cobrir todo o botão, arraste-o para a posição.

9. Dê ao glassCube uma forma ligeiramente diferente do outerRectangle: Altere as propriedades de glassCube. Comece alterando as propriedades RadiusX e RadiusY para 10 e as StrokeThickness para 2.

   

10. Faça glassCube parecer vidro: Defina o Fill para uma aparência vítrea usando um gradiente linear que é 75% opaco e alterna entre as cores Branco e Transparente ao longo de 6 intervalos aproximadamente uniformemente espaçados. É assim que se devem definir os pontos de gradiente:

    • Gradient Stop 1: Branco com valor alfa de 75%

    • Gradiente Stop 2: Transparente

    • Gradient Stop 3: Branco com valor Alpha de 75%

    • Gradient Stop 4: Transparente

    • Gradient Stop 5: Branco com valor alfa de 75%

    • Gradiente Stop 6: Transparente

    Isso cria uma aparência de vidro "ondulada".

    

11. Ocultar a camada de vidro: Agora que você vê a aparência da camada vítrea, entre no painel Aparência do painel Propriedades do e defina a Opacidade como 0% para ocultá-la. Nas seções a seguir, usaremos gatilhos de propriedade e eventos para mostrar e manipular a camada de vidro.

    

Personalizar o comportamento do botão

Neste ponto, você personalizou a apresentação do botão editando seu modelo, mas o botão não reage às ações do usuário como os botões típicos (por exemplo, alterar a aparência ao passar o mouse, receber o foco e clicar). Os próximos dois procedimentos mostram como criar comportamentos como esses no botão personalizado. Começaremos com gatilhos de propriedade simples e, em seguida, adicionaremos gatilhos de evento e animações.

Para definir gatilhos de propriedade

1. Criar um novo gatilho de propriedade: Com glassCube selecionado, clique em + Propriedade no painel Gatilhos (veja a figura a seguir à próxima etapa). Isso cria um gatilho de propriedade com um gatilho de propriedade padrão.

2. Torne IsMouseOver a propriedade usada pelo gatilho: Altere a propriedade para IsMouseOver. Isso faz com que o gatilho de propriedade seja ativado quando a propriedade IsMouseOver está em true (quando o utilizador aponta para o botão com o rato).

   

3. IsMouseOver ativa a opacidade de 100% para o glassCube: Note que a gravação do Trigger está ativada (veja a figura anterior). Isso significa que quaisquer alterações feitas nos valores de propriedade de glassCube enquanto a gravação estiver ativada se tornarão uma ação que ocorrerá quando IsMouseOver estiver true. Durante a gravação, altere o Opacity do glassCube para 100%.

   

   Agora você criou o seu primeiro gatilho de propriedade. Observe que o painel Gatilhos do editor registrou o Opacity sendo alterado para 100%.

   

   Pressione F5 para executar o aplicativo e mova o ponteiro do mouse sobre e fora do botão. Você deve ver a camada de vidro aparecer quando você passar o mouse sobre o botão e desaparecer quando o ponteiro sair.

4. IsMouseOver aciona a alteração do valor do traçado: Vamos associar outras ações ao disparador IsMouseOver. Enquanto a gravação continua, mude a seleção de glassCube para outerRectangle. Em seguida, defina o Stroke de outerRectangle para a expressão personalizada de "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". Isso define o Stroke para a cor de realce típica usada pelos botões. Pressione F5 para ver o efeito quando passar o mouse sobre o botão.

   

5. IsMouseOver desencadeia texto desfocado: Vamos associar mais uma ação ao gatilho de propriedade IsMouseOver. Faça com que o conteúdo do botão pareça um pouco desfocado quando o vidro aparecer sobre ele. Para fazer isso, podemos aplicar um desfoque BitmapEffect ao ContentPresenter (myContentPresenter).

   

   Observação

   Para devolver o painel de Propriedades ao estado que estava antes da pesquisa por BitmapEffect, limpe o texto da caixa de Pesquisa .

   Neste ponto, usamos um disparador de propriedade com várias ações associadas para criar um comportamento de realce para quando o cursor do rato entra e sai da zona do botão. Outro comportamento típico de um botão é destacar quando ele tem foco (como depois de ser clicado). Podemos adicionar esse comportamento adicionando outro gatilho de propriedade para a propriedade IsFocused.

6. Criar gatilho de propriedade para IsFocused: Usando o mesmo procedimento que para IsMouseOver (consulte a primeira etapa desta seção), crie outro gatilho de propriedade para a propriedade IsFocused. Enquanto gravação do Gatilho estiver ativada, adicione as seguintes ações ao gatilho:

   • glassCube recebe uma Opacity de 100%.

   • outerRectangle recebe um Stroke valor de expressão personalizada de "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

Como etapa final deste passo a passo, adicionaremos animações ao botão. Essas animações serão acionadas por eventos, especificamente, os eventos MouseEnter e Click.

Para usar gatilhos de eventos e animações para adicionar interatividade

1. Criar um gatilho de evento MouseEnter: Adicione um novo gatilho de evento e selecione MouseEnter como o evento a ser usado no gatilho.

   

2. Criar uma linha do tempo de animação: Em seguida, associe uma linha do tempo de animação ao evento MouseEnter.

   

   Depois de pressionar OK para criar uma nova linha do tempo, uma Painel da Linha do Tempo é exibida e "A gravação da linha do tempo está ativada" fica visível no painel de design. Isto significa que podemos começar a registar mudanças de propriedade na cronologia (animar mudanças de propriedade).

   Observação

   Poderá ter de redimensionar a janela e/ou os painéis para ver o ecrã.

   

3. Criar um quadro-chave: Para criar uma animação, selecione o objeto que deseja animar, crie dois ou mais quadros-chave na linha do tempo e, para esses quadros-chave, defina os valores de propriedade entre os quais deseja que a animação interpole. A figura a seguir orienta você pela criação de um quadro-chave.

   

4. Reduza o glassCube neste quadro-chave: Com o segundo quadro-chave selecionado, reduza o tamanho do glassCube para 90% de seu tamanho total usando o Transformar Tamanho.

   

   Pressione F5 para executar o aplicativo. Mova o ponteiro do rato sobre o botão. Observe que a camada de vidro encolhe na parte superior do botão.

5. Criar outro Gatilho de Evento e associar-lhe uma animação diferente: Adicionar mais uma animação. Use um procedimento semelhante ao que você usou para criar a animação de gatilho de evento anterior:

   1. Crie um novo gatilho de evento usando o evento Click.

   2. Associe uma nova linha do tempo ao evento Click.

      

   3. Para esta linha do tempo, crie dois quadros-chave, um em 0,0 segundos e o segundo em 0,3 segundos.

   4. Com o quadro-chave a 0,3 segundos realçado, defina o Ângulo de Transformação de Rotação para 360 graus.

      

   5. Pressione F5 para executar o aplicativo. Clique no botão. Observe que a camada de vidro gira ao redor.

Conclusão

Você preencheu um botão personalizado. Você fez isso usando um modelo de botão que foi aplicado a todos os botões no aplicativo. Se você sair do modo de edição de modelo (veja a figura a seguir) e criar mais botões, verá que eles se parecem e se comportam como seu botão personalizado em vez de como o botão padrão.

Pressione F5 para executar o aplicativo. Clique nos botões e observe como todos eles se comportam da mesma forma.

Lembre-se de que, ao personalizar o modelo, você define a propriedade Fill de innerRectangle e a propriedade StrokeouterRectangle para o plano de fundo do modelo ({TemplateBinding Background}). Por isso, quando você define a cor de plano de fundo dos botões individuais, o plano de fundo definido será usado para essas respetivas propriedades. Tente alterar os planos de fundo agora. Na figura a seguir, diferentes gradientes são usados. Portanto, embora um modelo seja útil para a personalização geral de controles como botão, os controles com modelos ainda podem ser modificados para parecerem diferentes uns dos outros.

Em conclusão, no processo de personalização de um modelo de botão, você aprendeu como fazer o seguinte no Microsoft Expression Blend:

• Personalize a aparência de um controle.

• Configurar gatilhos de propriedade. Os gatilhos de propriedade são muito úteis porque podem ser usados na maioria dos objetos, não apenas nos controles.

• Defina gatilhos de eventos. Os gatilhos de evento são muito úteis porque podem ser usados na maioria dos objetos, não apenas nos controles.

• Crie animações.

• Diversos: crie gradientes, adicione BitmapEffects, use transformações e defina propriedades básicas de objetos.

Ver também

• Criar um botão usando XAML
• Styling e criação de modelos
• Visão geral da animação
• Visão geral da pintura com cores sólidas e gradientes
• Visão geral dos efeitos de bitmap