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:
Repita o processo para o evento Unchecked, neste momento temos o trigger conforme a listagem abaixo:
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:
E adicione o código abaixo na Storyboard OnUnchecked1:
Adicione uma Ellipse entre o GRID Layout e o CheckBox e utilize o efeito BlurEffect que vai dar o efeito de luz no CheckBox:
Agora é só adicionar o UserControl em seu projeto e testar.
Código fonte do tutorial : Clique aqui
Expression Blend 3 / Visual Studio 2008
