Change the color of a Checkbox inside Listbox

Question

I have Listbox with a Checkbox. That's the way how I built it:

<Style x:Key="_ListBoxItemStyleCheckBox" TargetType="ListBoxItem">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <CheckBox Name="_Border" Margin="5,2" IsChecked="{TemplateBinding IsSelected}">
                            <ContentPresenter />
                        </CheckBox>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

This is my ListBox:

      <ListBox
           VerticalAlignment="Stretch"
           ItemsSource="{Binding Items}"
           SelectionMode="Multiple"
           ItemContainerStyle="{StaticResource _ListBoxItemStyleCheckBox}">

                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
      </ListBox>

When I hover over the Checkbox I get the default color (blue). How can I change this color? I don't want to change the color of the text. Only the border color of the Checkbox.

Thank you for any help!

Answer 1

You should create template.

• CheckBox Template Sample

<Style TargetType="{x:Type CheckBox}" x:Key="chb">
            <Setter Property="Margin" Value="5 2 5 2"/>
            <Setter Property="IsChecked" Value="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border x:Name="border"
                                    Grid.Column="0"
                                    Width="20"
                                    Height="20"
                                    Background="Transparent"
                                    BorderBrush="Black"
                                    BorderThickness="2">
                                <Viewbox x:Name="view" 
                                         Width="22" 
                                         Height="22" 
                                         Visibility="Collapsed"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center">
                                    <Canvas Width="24" Height="24">
                                        <Path Data="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" Fill="#333333"/>
                                    </Canvas>
                                </Viewbox>
                            </Border>
                            <TextBlock Grid.Column="1" 
                                       Text="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=Content}"
                                       Margin="5 0 0 0"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Red"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="view" Property="Visibility" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

• Connnecting by using StaticResource

<Style x:Key="_ListBoxItemStyleCheckBox" TargetType="ListBoxItem">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <CheckBox Name="_Border" Style="{StaticResource chb}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

It will be shown like this.

And I brought Path SVG Data in CheckBox at 'Material Design Icons'.
https://materialdesignicons.com/