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.


 


 


 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>