WPF - change checkbox checkmark to image (or hide) [duplicate]

Question

Can anyone know if there is a simple way to replace checkbox checkmark by image?

I have two images for "checked" and "unchecked" checkbox state. I don't know how to use them instead of checkmark.

I also tried to replace content with StackPanel and put Image and TextBlock inside. Images are switching by triggers. It works fine but I have no idea how to remove checkmark icon.

I googled a lot and found complicated solutions with tons of XAML (BulletDecorator etc). I personaly don't like to complicate my life and I believe there is a simplier solution.

Answer 1

You could simply define your own ControlTemplate for the Checkbox, in which you display your images instead of the default tick. You can find the default ControlTemplate for the Checkbox in the CheckBox Styles and Templates page on MSDN.

When defining your own ControlTemplate, it's often a good idea to start with the default. Get that working in your project and then you can start tweaking it to your liking. That way, it should keep all the default behaviours that users are used to from a Checkbox.

But this is WPF we're talking about here... with a little lateral thinking, it's easily possible to make several controls look like other controls. For example, here is a ToggleButton with a custom ControlTemplate that makes it look like a Checkbox, but with an Image that changes when you click on it instead of the normal tick mark:

<ToggleButton Content="I'm An Image CheckBox Label" Foreground="Black">
    <ToggleButton.Template>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <StackPanel Orientation="Horizontal">
                <Image>
                    <Image.Style>
                        <Style>
                            <Setter Property="Image.Source" 
                                Value="/AppName;component/Images/Image1.jpg" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsChecked, 
                                    RelativeSource={RelativeSource AncestorType=
                                    {x:Type ToggleButton}}}" Value="True">
                                    <Setter Property="Image.Source" 
                                        Value="/AppName;component/Images/Image2.jpg" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
                <ContentPresenter Content="{TemplateBinding Content}" 
                    Margin="5,0,0,0" />
            </StackPanel>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

It would also be easy to convert this to a CheckBox as that also uses the IsChecked property... you could probably even just replace all instances of the word ToggleButton with the word Checkbox and it should work.