Styling of ListBoxItem Not Working

Question

I'm attempting to style the ListBoxItems within my listbox but the content of the ListBoxItem does not display and any change in colours are not apparent. The only thing working is the "border bottom" that I've applied to the bottom of each list item.

<Style x:Key="ListItemStyle" TargetType="{x:Type ListBoxItem}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="MinHeight" Value="30" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderBrush="#FF66AFDE" BorderThickness="0 0 0 1" />
                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="Background" Value="Red"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You've just created ControlTemplate for ContentControl without ContentPresenter within your Border — dkozl
Even with ContentPresenter in there, no text is displayed. Same for ItemsPresenter. — galacticfan
And if remove your Template and OverridesDefaultStyle and use default one do you see some content? — dkozl
face into desk yes I do now. But how would I use controltemplate.triggers without the template? E.g. IsFocused — galacticfan
try adding TargetType like so <ControlTemplate TargetType="{x:Type ListBoxItem}"> — dkozl

Unknown Unknown · Accepted Answer · 2013-12-27T20:46:14

Use a panel/container/decorator in the ListBoxItem control template to set the background color. (It seems that the logic for setting the selection background color will interfere with attempts to control its background color.)

<ControlTemplate TargetType="{x:Type ListBoxItem}">
    <Border
        Name="PART_Border"
        Focusable="true"
        Background="{TemplateBinding Background}"
        BorderBrush="#FF66AFDE"
        BorderThickness="0 0 0 1"
    >
        <ContentPresenter />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsFocused" Value="True">
            <Setter
                Property="Background"
                Value="Red"
                TargetName="PART_Border"
            />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Also note, that Border.Focusable is by default false. If setting it to true doesn't work (i admit, i haven't tested), use a different container control instead of Border.

Also, if the content you will show has any controls receiving focus (such as buttons or text fields), the trigger might not work as expected, because the Border might not have the focus when a control of the content has the focus. Also, tabbing from control to control might exhibit unexpected behaviour. If you have to deal with such a situation, try to handle the trigger in an ItemTemplate instead.

Regarding the ContentPresenter not showing anything: Depending on the type of the elements in the ItemsSource, you might need to define a ListBox.ItemTemplate (or ListBox.ItemTemplateSelector), otherwise ContentPresenter might not know what to display.

Styling of ListBoxItem Not Working

2 Answers