Alterando a aparência de um CheckBox com WPF e C#

Neste tutorial vou criar um UserControl simples com um CheckBox e modificar a aparência inserindo uma imagem no lugar do layout padrão do CheckBox, dessa forma podemos utilizar qualquer imagem e criar CheckBox com um apelo visual mais sofisticado. O conceito pode ser aplicado em diversos outros objetos WPF.

Por | @oficinadanet Programação

Alterando a aparência de um CheckBox com WPF e C#

Neste tutorial vou criar um UserControl simples com um CheckBox e modificar a aparência inserindo uma imagem no lugar do layout padrão do CheckBox, dessa forma podemos utilizar qualquer imagem e criar CheckBox com um apelo visual mais sofisticado. O conceito pode ser aplicado em diversos outros objetos WPF.

No exemplo vou utilizar o Microsoft Expression Blend 3 para auxiliar no design do tutorial, vou carregar duas imagens png, a primeira com o desenho de uma lâmpada ligada e a segunda com outra lâmpada desligada, quando o checkbox for clicado a lâmpada vai acender e um efeito de luz suave vai aparecer.

Primeiro crie uma aplicação em WPF e adicione um UserControl com o nome de UserControlCheckBox.xaml, modifique a altura e o tamanho para 100: Height="100" Width="100" e altere o fundo do layout GRID para ?Black?. Dentro do layout GRID adicione uma Ellipse com o tamanho e altura de 20.

Agora vamos criar um Style herdando as propriedades de um objeto CheckBox, selecione a Ellipse com o botão direito do mouse e clique em Make into Control... conforme a figura abaixo:

Alterando a aparência de um CheckBox com WPF e C#

Selecione o CheckBox e dê o nome do Style de CheckBoxStyle1:

Alterando a aparência de um CheckBox com WPF e C#

Localize o resources do UserControl e adicione um ImageBrush que vai ?pintar? a Ellipse com uma imagem que iniciamente será a lâmpada apagada:

</ImageBrush>

Agora vamos adicionar Triggers que vão habilitar os eventos check e uncheck acionando Storyboards que vão animar as propriedades Opacity e Radius da Ellipse e criar um efeito interessante simulando uma luz. Clique em Triggers, depois em Event para adicionar um evento, selecione o objeto Checkbox e depois Checked e por fim clique no sinal de para adicionar uma Storyboard, conforme a figura abaixo:

Alterando a aparência de um CheckBox com WPF e C#

Repita o processo para o evento Unchecked, neste momento temos o trigger conforme a listagem abaixo:

    
        
    </EventTrigger>
    
        
    </EventTrigger>
</UserControl.Triggers>

Duas Storyboards foram criadas, para trocar a imagem quando o CheckBox é acionado adicione o evento Completed na Storyboard OnChecked1 e adicione o código C# abaixo:
ImageBrush brush = (ImageBrush)this.Resources["imgb"];
Image image1 = new Image();
brush.ImageSource =
new BitmapImage(new Uri("luz_apagada.png", UriKind.Relative));

Repita o processo no evento Completed da Storyboard OnUnchecked1 mudando somente a imagem:
brush.ImageSource = new BitmapImage(new Uri("luz_ligada.png", UriKind.Relative));

Para finalizar o tutorial vamos animar as propriedades Opacity e Radius para simular uma luz no CheckBox inserindo um novo efeito ao controle, na Storyboard OnChecked1 adicione o código:

</DoubleAnimation>

</DoubleAnimation>

E adicione o código abaixo na Storyboard OnUnchecked1:

</DoubleAnimation>

</DoubleAnimation>

Adicione uma Ellipse entre o GRID Layout e o CheckBox e utilize o efeito BlurEffect que vai dar o efeito de luz no CheckBox:

    
        
    </Ellipse.Effect>
</Ellipse>

Agora é só adicionar o UserControl em seu projeto e testar.

Código fonte do tutorial no arquivo em anexo abaixo.
Expression Blend 3 / Visual Studio 2008

Mais sobre: silverlight
Share Tweet
DESTAQUES
Mais compartilhados
Comentários