CODEWITHSUNDEEP
c#wpfxamlstyling
Sabina
Sabina

Reputation: 5

Change the color of a Checkbox inside Listbox

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!

Upvotes: 0

Views: 283

Answers (3)

elena.kim
elena.kim

Reputation: 958

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.

enter image description here

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

Upvotes: 1

Ahmad
Ahmad

Reputation: 38

 <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}">
                        <CheckBox.Resources>
                            <Style TargetType="{x:Type CheckBox}">
                                <Setter Property="BorderBrush" Value="LightGray" />
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="BorderBrush" Value="Gray" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </CheckBox.Resources>
                        <ContentPresenter />
                    </CheckBox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 1

Mustafa Ozbek
Mustafa Ozbek

Reputation: 1

Css helps you do this,for instance

ListBox tr.rowHover:hover
{
       background-color: Yellow;
}
<asp ..... rowstyle-cssclass="rowHover" ...../>

Upvotes: -1

Related Questions