ListBox Style Problem

Kevin Marois

I have created a style for a listbox: ItemContainerStyle

<Setter Property="Padding" Value="2"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="Black"/>

<Style.Triggers>

    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="Foreground" Value="Blue"/>
    </Trigger>
        
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="Foreground" Value="Blue"/>
    </Trigger>
        
</Style.Triggers>

ListBoxStyle

<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBackgroundBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource listBoxItemContainerStyle}"/>
    
<Style.Triggers>

    <Trigger Property="IsEnabled" Value="False">
        <Setter Property="BorderBrush" Value="{StaticResource ButtonDisabledBackgroundBrush}"/>
        <Setter Property="Control.BorderThickness" Value="2"/>
    </Trigger>

    <Trigger Property="IsKeyboardFocusWithin" Value="True">
        <Setter Property="IsSelected" Value="True"/>
    </Trigger>

</Style.Triggers>

Usage

When I run it BEFORE I click an item, the background of the first item is lightgray. Notice that the first item has IsSeledted= true. If I click on it, then the background color turns Blue. What's wrong here?

If it's not broken, fix it until it is. Everything makes sense in someone's mind. Ya can't fix stupid.

Henrik Jonsson

Hello, the problem is that the default control template for ListBoxItem contains a border element which controls the background color. To fully control the appearance you could replace the template using the template from ListBoxItem ControlTemplate Example[^] with your own definition. See below for an example.