WPF - Botões com Imagens Alternadas para Ativado, Pressionado e Desativado
Um dos controles mais utilizados em todas as aplicações é o Botão (Button). E a cada novo projeto tentamos mudar sua aparência para melhorar a experiência visual do usuário e tornar nossa interface mais funcional. Uma prática muito comum é o uso de imagens nos botões, as imagens auxiliam o usuário a interpretar o comando associado ao botão. Nas aplicações WPF existem diferentes formas de implementar botões com imagens e comportamentos das mais diversas formas e variações. O propósito deste artigo é demonstrar como criar um botão com imagens que se alternam de acordo com o estado do botão (ativado, pressionado ou desativado). O exemplo que utilizei para ilustrar este artigo é simples e de fácil implementação. As imagens a seguir apresentam o botão em tempo de execução nos seus diferentes status.
Figura 1: O botão com imagem (ativado)
Figura 2: O botão com imagem (desativado)
Figura 3: O botão com imagem (pressionado)
Construindo o exemplo
Utilizaremos dois projetos para ilustrar este exemplo. O primeiro projeto deve ser criado com o template WPF Application e será a aplicação de teste para o nosso botão com imagem. O segundo projeto deve ser criado com o template User Control Library, este projeto implementará nosso SampleImageButton. A Figura 4 mostra a janela Solution Explorer com a Solução de exemplo.
Figura 4: O projeto de exemplo
Criando o Botão de Exemplo
Adicione ao projeto User Control Library as imagens que você deseja usar no seu botão customizado. No meu caso eu coloquei três imagens de um cubo. O cubo cinza será exibido quando o botão estiver desabilitado, a imagem vermelha quando o botão estiver pressionado e o cubo amarelo quando o botão estiver em seu estado normal. O Quadro 1 apresenta o código XAML necessário para implementar a classe MyImageButton.
<!--As propriedades Width, Height, MaxHeight, MaxWidth, MinWidth podem ser usadas
para definir o tamanho padrão do controle. Assim quando o developer arrastar
o controle a partir da ToolBox, ele será criado com seu tamanho padrão-->
<Button x:Class="ExemploWPFImageButton.MyImageButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="120" Height="90" MaxHeight="90" MaxWidth="120" MinHeight="90" MinWidth="120">
<Button.Template>
<!--O ControlTemplate define o tipo de controle que será construido-->
<ControlTemplate TargetType="{x:Type Button}">
<!--Dois containers StackPanel e Grid acomodarão as imagens e o texto do botão-->
<StackPanel Background="#FF232222" Width="120" Height="90">
<Grid Margin="0,10,0,0">
<!--As imagens que indicam os estados Pressionado e Desativado ficarão ocultas-->
<!--A propriedade Visibility="Hidden" se encarrega desta tarefa-->
<Image Name="Normal" Source="Images/cubeYellow.png" Height="48" Width="48"/>
<Image Name="Pressed" Source="Images/cubeRed.png" Visibility="Hidden" Height="48" Width="48"/>
<Image Name="Disabled" Source="Images/cubeGray.png" Visibility="Hidden" Height="48" Width="48"/>
</Grid>
<TextBlock TextAlignment="Center" FontWeight="Bold" Margin="10"
Foreground="WhiteSmoke">Clique no Cubo</TextBlock>
</StackPanel>
<!--Aqui está o responsável pela troca de imagens de acordo com o estado do botão-->
<!--Os Triggers podem ser usados para diversas aplicações, este é um bom exemplo-->
<ControlTemplate.Triggers>
<!--O primeiro Trigger avalia a propriedade IsPressed-->
<Trigger Property="IsPressed" Value="True">
<!--O elemento Setter através do atributo TargetName estabelece o vínculo com a imagem-->
<!--e o atributo Property indica a Propriedade, Value atribui o valor desejado-->
<Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
<Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
</Trigger>
<!--O mesmo conceito é aplicado para avaliar a propriedade IsEnabled-->
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
<Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Quadro 1: Código XAML do controle MyImageButton
O Quadro 2 apresenta o código do arquivo MyImageButton.cs.
using System.Windows.Controls;
namespace ExemploWPFImageButton
{
/// <summary>
/// Interaction logic for MyImageButton.xaml
/// </summary>
public partial class MyImageButton : Button
{
public MyImageButton()
{
InitializeComponent();
}
}
}
Quadro 2: Código do arquivo MyImageButton.cs
Por último, vamos adicionar o botão na Janela MainWindow do projeto de exemplo. Observe o código XAML no Quadro 3.
<Window x:Class="ExemploWPFImageButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DevBrasil | WPF | Image Button" Height="319" Width="351"
xmlns:my="clr-namespace:ExemploWPFImageButton"
xmlns:my1="clr-namespace:ExemploWPFImageButton;assembly=SampleImageButton">
<Grid Language="pt-BR" Background="#FF141212">
<Button Content="Ativar/Desativar" Height="30" HorizontalAlignment="Left" Margin="103,198,0,0" Name="button1" VerticalAlignment="Top" Width="120" Click="button1_Click" />
<my1:MyImageButton Content="Button" Height="23" HorizontalAlignment="Left" Margin="103,82,0,0" Name="myImageButton1" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>
Quadro 3: A janela MainWindow
Agora é só executar seu projeto de exemplo e observar o comportamento do botão em seus três estados diferentes. Existem diversas técnicas para criar controles customizados, este é um exemplo prático para customizar seus botões. Você pode empregar esta técnica para criar uma biblioteca de botões padronizados para sua aplicação.
Aprofunde seus conhecimentos sobre este tema visitando a comunidade WPF.
Faça download deste arquivo no formato PDF e também do código-fonte deste exemplo.