WPF - change checkbox checkmark to image (or hide)

checkbox, hide, image, wpf

Solution

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.

Problem

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.

Original source

Related problems