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

Este passo a passo percorre o 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 diretamente com XAML, 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 Usando 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 você converte um retângulo em um botão. Em seguida, adicione 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? Como 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 em Iniciar, aponte para Todos os Programas, aponte para Microsoft Expressione clique em Microsoft Expression Blend.)

2. Maximize o aplicativo, se necessário.

3. No menu Arquivo, clique em Novo Projeto.

4. Selecione Aplicativo 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 você pode esperar, o aplicativo consiste em apenas uma 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 Tela de fundo da janela como preto: selecione a janela, clique na guia Propriedades 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 Fazer botão.

   

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

   

   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 em, selecione Aplicativo. 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 do botão e o modelo se aplicam a todos os botões dentro de todo o aplicativo e qualquer botão que você criar no aplicativo usará, por padrão, 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 a aparência dele.

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

1. Entrar no modo de exibição de modelo de edição: Para personalizar ainda mais a aparência do nosso botão, precisamos editar o modelo de botão. Esse 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 mouse no botão e selecione Editar Partes de Controle (Modelo) e Editar Modelo.

   

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

   Componentes

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

   

3. Altere o retângulo para que ele fique vazio por dentro (como uma rosquinha): Selecione outerRectangle e defina Fill como "transparente" e StrokeThickness como 5.

   

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

   

4. Criar um retângulo interno: Agora, crie outro retângulo (nomeie-o como "innerRectangle") e posicione-o simetricamente no interior de outerRectangle . Para esse tipo de trabalho, você provavelmente desejará ampliar o botão na área de edição.

   Observação

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

   

5. Mover ContentPresenter para a parte superior: Neste ponto, é possível que o texto "Botão" não fique visível por mais tempo. Se for assim, isso ocorre porque innerRectangle está sobre o myContentPresenter. Para corrigir isso, arraste myContentPresenter abaixo de innerRectangle. Reposicione os retângulos e myContentPresenter para ficar semelhante ao que está abaixo.

   Observação

   Como alternativa, você também pode posicionar myContentPresenter na parte superior clicando com o botão direito do mouse e pressionando Enviar.

   

6. Alterar a aparência de innerRectangle: Definir os valores de RadiusX, RadiusYe StrokeThickness para 20. Além disso, defina o Fill para a tela de fundo do modelo usando a expressão personalizada "{TemplateBinding Background}" e defina Stroke como "transparente". Observe que as configurações do Fill e Stroke do innerRectangle são o oposto daquelas do outerRectangle .

   

7. Adicionar uma camada de vidro na parte superior: A parte final da personalização da aparência do botão é adicionar uma camada de vidro na parte superior. Essa camada de vidro consiste em um terceiro retângulo. Como o vidro cobrirá o botão inteiro, o retângulo de vidro terá dimensões semelhantes às do outerRectangle. Portanto, crie o retângulo simplesmente fazendo uma cópia do outerRectangle. Destaque p outerRectangle e use CTRL+C e CTRL+V para fazer uma cópia. Nomeie este novo retângulo como "glassCube".

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

9. Dê ao glassCube uma forma um pouco diferente da do outerRectangle: mude as propriedades do glassCube. Comece alterando as propriedades RadiusX e RadiusY para 10 e a StrokeThickness para 2.

   

10. Dê uma aparência de vidro ao glassCube: confira uma aparência vítrea ao Fill, usando um gradiente linear que seja 75% opaco e alterne entre as cores Branco e Transparente ao longo de 6 intervalos distribuídos em espaços aproximadamente uniformes. As marcas de gradiente devem ser definidas como:

    • Marca de gradiente 1: branco com valor alfa de 75%

    • Marca de gradiente 2: transparente

    • Marca de gradiente 3: branco com valor alfa de 75%

    • Marca de gradiente 4: transparente

    • Marca de gradiente 5: branco com valor alfa de 75%

    • Marca de gradiente 6: transparente

    Isso cria um visual de vidro "ondulado".

    

11. Ocultar a camada de vidro: Agora que você vê a aparência da camada vítrea, acesse o painel Aparência do painel Propriedades e defina a Opacidade para 0% para ocultá-la. Nas próximas seções, vamos usar 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 fazem (por exemplo, alterando a aparência ao passar o mouse, recebendo o foco e clicando).) Os dois procedimentos a seguir 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. Crie um novo gatilho de propriedade: com glassCube selecionado, clique em + Propriedade, no painel Gatilhos (veja a figura após a próxima etapa). É criado um gatilho de propriedade com um gatilho de propriedade padrão.

2. Tornar IsMouseOver a propriedade usada pelo gatilho: Alterar a propriedade para IsMouseOver. Isso ativa o gatilho de propriedade quando a propriedade IsMouseOver é true (quando o usuário aponta para o botão com o mouse).

   

3. IsMouseOver dispara uma opacidade de 100% para glassCube: observe que o registro do gatilho está ativado (veja a figura anterior). Isso significa que as mudanças feitas nos valores da propriedade do glassCube enquanto o registro está ativado vão se tornar uma ação que ocorre quando o IsMouseOver é true. Durante a gravação, altere o Opacity do glassCube para 100%.

   

   Você criou seu primeiro gatilho de propriedade. Observe que o Painel de gatilhos do editor registrou o Opacity sendo alterado para 100%.

   

   Pressione F5 para executar o aplicativo e mova o ponteiro do mouse para cima e para fora do botão. A camada de vidro deve aparecer quando você passa o mouse sobre o botão e desaparecer quando o ponteiro sair.

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

   

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

   

   Observação

   Para retornar o painel de propriedades ao que era antes de fazer a pesquisa por BitmapEffect, remova o texto da caixa de pesquisa .

   Neste ponto, usamos um gatilho de propriedade com várias ações associadas para criar o comportamento de destaque para quando o ponteiro do mouse entrar e sair da área do botão. Outro comportamento típico de um botão é realçar quando ele tiver foco (como depois de clicar). Podemos acrescentar tal comportamento ao adicionar 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 o registro de gatilho estiver ativado, adicione as ações a seguir ao gatilho:

   • glassCube obtém um Opacity de 100%.

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

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

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

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

   

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

   

   Depois de pressionar OK para criar uma nova linha do tempo, é exibido um painel Linha do tempo e “O registro da linha do tempo está ativado” fica visível no painel de design. Isso significa que podemos começar a registrar mudanças na propriedade na linha do tempo (mudanças na propriedade de animação).

   Observação

   Talvez seja necessário redimensionar sua janela e/ou painéis para ver a exibição.

   

3. Criar um quadro-chave: Para criar uma animação, selecione o objeto que você 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 seja interpolada. A figura a seguir orienta você no processo de criação de um quadro-chave.

   

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

   

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

5. Crie outro gatilho de evento e associe uma animação diferente a ele: vamos 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 essa linha do tempo, crie dois quadros-chave, um a 0,0 segundo e o segundo em 0,3 segundos.

   4. Com o quadro chave destacado em 0,3 segundos, defina o ângulo de transformação de giro como 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ê concluiu 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ê deixar o modo de edição de modelo (veja a figura a seguir) e criar mais botões, verá que eles 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, enquanto você estava personalizando o modelo, você definiu a propriedade Fill do innerRectangle e a propriedade Stroke do outerRectangle para o background do modelo ({TemplateBinding Background}). Por isso, quando você definir a cor da tela de fundo dos botões individuais, a tela de fundo definida será usada para essas respectivas propriedades. Tente alterar os planos de fundo agora. Na figura a seguir, gradientes diferentes são usados. Portanto, embora um modelo seja útil para personalização geral de controles como o botão, os controles com modelos ainda podem ser modificados para parecerem diferentes uns dos outros.

Botões

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

• Personalize a aparência de um controle.

• Defina 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 evento. 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: criar gradientes, adicionar BitmapEffects, usar transformações e definir propriedades básicas de objetos.

Consulte também

• Criar um botão usando XAML
• Estilo e Templatização
• Visão geral da animação
• Visão Geral da Pintura com Cores Sólidas e Gradientes
• Visão geral dos efeitos do bitmap