如何在XAML WPF中用PNG图像替换默认的复选框样式

Question

How can replace default checkbox style with png image, for checked state and unchecked state.

Here is and what I try but is not complilated with xaml:

<CheckBox IsChecked="{Binding AirTemperatureGridChecked}">
                    <CheckBox.Background>
                        <Image Source="https://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/checkbox_unchecked.png" Width="16" Height="16" />    
                    </CheckBox.Background>                        
                </CheckBox>

I try and this code but then image go in content is not replaced.

<CheckBox IsChecked="{Binding AirTemperatureGridChecked}">
                    <Image Source="https://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/checkbox_unchecked.png" Width="16" Height="16" />
                </CheckBox>

Is possible to replace default style?

Answer 1

In this particular case, you will need to fiddle with the Template of the CheckBox.

<CheckBox IsChecked="{Binding AirTemperatureGridChecked}">
     <CheckBox.Template>
          <ControlTemplate TargetType="{x:Type CheckBox}">
               <Grid>
               <Image x:Name="Foo" Width="16" Height="16" Source="https://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/checkbox_unchecked.png" />
               </Grid>
               <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                         <Setter TargetName="Foo" Property="Opacity" Value="0.5" />
                    </Trigger>
               </ControlTemplate.Triggers>
          </ControlTemplate>
 </CheckBox.Template>

I've made this one from scratch to just give an example of how quick and easy it is to get your own templates up and running for the design of controls.

As you can see, it's made of a grid, with your image inside, and below that is a trigger that will make the checkbox lower its opacity when unchecked.

You can put just about anything in that grid to design your checkbox as you would any window, and give it functionality with triggers.

Additionally (as giving each and every checkbox this mass of code would be unreasonable) you can give the controltemplate a key:

<ControlTemplate x:Key="WhateverYouWantToCallMe" TargetType="{x:Type CheckBox}">
     <!-- Content ect... -->
</ControlTemplate>

Put it inside a Resource Dictionary and call it as a StaticResource for the checkbox instead, like so:

<CheckBox Template="{StaticResource WhateverYouWantToCallMe}"/>