Why can't I set the background color of a selected ListBoxItem in WPF?

Question

When a user clicks on an ListBoxItem, I want to it to be a bold larger font red background yellow

Everything works except the background. It seems that there is a standard (blue) background for the selected item. How do I override that and change the selected background yellow?

Here is the code:

<Window x:Class="AlternateListBox2.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"
    xmlns:local="clr-namespace:AlternateListBox2">
    <Window.Resources>
        <local:Countries x:Key="countries"/>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Content" Value="{Binding Path=Name}"/>
            <Setter Property="Margin" Value="2"/>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="FontWeight" Value="Bold"/>
                    <Setter Property="FontSize" Value="18"/>
                    <Setter Property="Background" Value="Yellow"/>
                    <Setter Property="Foreground" Value="Red"/>
                </Trigger>
            </Style.Triggers>

        </Style>
    </Window.Resources>
    <StackPanel>
        <ListBox
            ItemsSource="{Binding Source={StaticResource countries}}"
            Width="100"
            Margin="10"
            HorizontalAlignment="Left"
            />
    </StackPanel>
</Window>

Answer 1

It can be done a lot simpler. The Background color for the selected ListBox items are taken from the SystemColors. So, what you need to do is override the SystemColors in the Resources of your ListBox:

<ListBox.Resources>
    <!--Selected color when the ListBox is focused-->
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Yellow" />
    <!--Selected color when the ListBox is not focused-->
    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Yellow" />
</ListBox.Resources>

Answer 2

This code should work for setting background. The problem is that you need to create a ControlTemplate and assign to ContentPresenter's Background property the value "Yellow".

    <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="contentPresenter"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="OpacityMask" TargetName="contentPresenter" Value="{x:Null}"/>
                            <Setter Property="Background" TargetName="Bd" Value="Yellow"/>
                            <Setter Property="FontWeight" Value="Bold"/>
                            <Setter Property="FontSize" Value="18"/>
                            <Setter Property="Foreground" Value="Red"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 3

"It can be done a lot simpler. The Background color for the selected ListBox items are taken from the SystemColors. So, what you need to do is override the SystemColors in the Resources of your ListBox"

The concept of overriding SystemColors, which ListBoxItem template will use for background/foreground is awful and often confuses folks who are new to WPF. Thus, my recommendation is to override ListBoxItem template and customize it.

Answer 4

Thanks Frances!! That did it for me, well somewhat. Here is my code that allows for the template to use the "StrColor" property for the selected and non-selected list items.

    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <!--Nice Brush-->
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <!-- This is a gradient from white to StrColor and back to white -->
                    <!--<GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="{Binding Path=StrColor}" Offset="0.445"/>
                    <GradientStop Color="White" Offset="1"/>
                    <GradientStop Color="{Binding Path=StrColor}" Offset="0.53"/>-->
                    <!-- This is a gradient from StrColor to white -->
                    <GradientStop Color="{Binding Path=StrColor}" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <!--Standard Color-->
        <!--<Setter Property="Background" Value="{Binding Path=StrColor}"/>-->
        <Setter Property="Foreground" Value="{Binding Path=TextColor}"/>
        <Setter Property="Height" Value="{Binding Path=Height}"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="contentPresenter"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="OpacityMask" TargetName="contentPresenter" Value="{x:Null}"/>
                            <Setter Property="Background" TargetName="Bd">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="{Binding Path=StrColor}" Offset="0"/>
                                        <GradientStop Color="White" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Foreground" Value="{Binding Path=TextColor}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</UserControl.Resources>