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

Colocado por Alexandre Tadashi na(s) categoria(s): 1, 4, 6, api, AR, BI, bitmap, Blend, Blend 3, blog, Blogs, botão, C#, carregar, checkBox, class, código, código fonte, control, css, demo, Design, Desktop, Diversos, efeito, event, Evento, Eventos, exemplo, expression, Expression Blend, Expression Blend 3, fonte, for, fundo, Google, HCI, IE, if, image, imagens, int, layout, lista, map, mg, Microsoft, Microsoft Expression, NaN, O, on, Outros, padrão, processo, RIA, Ria’s Geral, silverlight, Storyboard, tag, Tema, Tutoriais, Tutorial, UI, UX, Visual Studio, Visual Studio 2008, WPF, XAML, XP em 03 5th, 2010 | Sem comentários

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:

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

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

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:

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: