ListBox Selected Item Background

Question

I'm trying to change the background of the selected item in a WPF ListBox.

I have attempted to implement a style for it, but for some reason it's not being applied. I still get a blue background. Can anyone see why?

<UserControl x:Class="Thumbnails"
         xmlns:local="clr-namespace:ContentPresenter"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="350" d:DesignWidth="800">
<UserControl.Resources>
    <local:ThumbImageHeightConverter x:Key="HeightConv" />
    <local:ThumbImageWidthConverter x:Key="WidthConv" />
    <local:InnerGridHeightConverter x:Key="InnerGridHeightConv" />
    <local:ReflectWidthConverter x:Key="ReflectWidthConv" />
    <local:ReflectCenterYConv x:Key="ReflectCenterYConv" />

    <Style x:Name="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Style.Triggers>
            <Trigger Property="Selector.IsSelected" Value="True">
                <Setter Property="Background" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="{x:Type ListBox}">
        <!-- Set the ItemTemplate of the ListBox to a DataTemplate which explains how to display an object of type BitmapImage. -->
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid x:Name="ThumbGrid" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBox, Path=ActualHeight}"  >
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="ThumbGridThumbImgRow" ></RowDefinition>
                            <RowDefinition x:Name="GridReflectRow" Height="40" ></RowDefinition>
                        </Grid.RowDefinitions>
                        <Border x:Name="HighlightBorder" BorderThickness="7" BorderBrush="Black" CornerRadius="18" Padding="2" Margin="4" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Grid x:Name="ThumbInnerGrid">
                                <Grid.Height>
                                    <MultiBinding Converter="{StaticResource InnerGridHeightConv}">
                                        <Binding ElementName="ThumbGrid" Path="ActualHeight" />
                                        <Binding ElementName="HighlightBorder" Path="CornerRadius" />
                                        <Binding ElementName="mask" Path="CornerRadius" />
                                    </MultiBinding>
                                </Grid.Height>
                                <Border x:Name="mask" Background="White" CornerRadius="15" />
                                <StackPanel x:Name="ThumbInnerStack" >
                                    <StackPanel.OpacityMask>
                                        <VisualBrush Visual="{Binding ElementName=mask}"/>
                                    </StackPanel.OpacityMask>
                                    <!--<Image x:Name="ThumbImg" Source="{Binding Path=UriSource}" Stretch="Fill" Width="{Binding}" Height="{Binding Source={StaticResource ThumbImageSize}, Path=ImgHeight}">-->
                                    <Image x:Name="ThumbImg" Stretch="UniformToFill" SnapsToDevicePixels="True" >
                                        <Image.Height>
                                            <MultiBinding Converter="{StaticResource HeightConv}">
                                                <Binding ElementName="HighlightBorder" Path="ActualHeight" />
                                                <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                                <Binding ElementName="HighlightBorder" Path="Padding" />
                                            </MultiBinding>
                                        </Image.Height>
                                        <Image.Width>
                                            <MultiBinding Converter="{StaticResource WidthConv}">
                                                <Binding ElementName="ThumbImg" Path="ActualHeight" />
                                                <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                                <Binding ElementName="HighlightBorder" Path="Padding" />
                                            </MultiBinding>
                                        </Image.Width>
                                        <Image.Source>
                                            <BitmapImage UriSource="{Binding Path=Src}"></BitmapImage>
                                        </Image.Source>
                                    </Image>
                                </StackPanel>
                            </Grid> 
                        </Border>

                        <Border Height="{Binding ElementName=ThumbImg, Path=ActualHeight}" Grid.Row="1" CornerRadius="15" SnapsToDevicePixels="True" Opacity="0.75" >
                            <Border.Width>
                                <MultiBinding Converter="{StaticResource ReflectWidthConv}">
                                    <Binding ElementName="HighlightBorder" Path="ActualWidth" />
                                    <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                </MultiBinding>
                            </Border.Width>
                            <Border.Background>
                                <VisualBrush Visual="{Binding ElementName=ThumbImg}">
                                    <VisualBrush.Transform>
                                        <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="200">
                                            <ScaleTransform.CenterY>
                                                <MultiBinding Converter="{StaticResource ReflectCenterYConv}">
                                                    <Binding ElementName="ThumbImg" Path="ActualHeight" />
                                                </MultiBinding>
                                            </ScaleTransform.CenterY>
                                        </ScaleTransform>
                                    </VisualBrush.Transform>
                                </VisualBrush>
                            </Border.Background>
                            <Border.OpacityMask>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.3">
                                    <GradientStop Offset="0" Color="Black"></GradientStop>
                                    <GradientStop Offset="0.1" Color="Transparent"></GradientStop>
                                </LinearGradientBrush>
                            </Border.OpacityMask>
                        </Border>
                        <!--<Label x:Name="ThumbTitle" Grid.Row="1" Content="{Binding Path=Title}" HorizontalAlignment="Center"></Label>-->
                        <Label x:Name="ThumbTitle" Grid.Row="1" Content="{Binding ElementName=ThumbInnerGrid, Path=ActualHeight, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center"></Label>
                    </Grid> 
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"  />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"  />
        <Setter Property="Background" Value="Black"/>
    </Style>

</UserControl.Resources>

    <UserControl.DataContext>
        <ObjectDataProvider ObjectType="{x:Type local:ThumbImageLoader}" MethodName="LoadImagesv2" IsAsynchronous="True"  />
</UserControl.DataContext>


<!-- This ListBox is the Content of the Window. Normally you would have a panel of some type as the Window's Content, but let's keep it simple. -->
<Grid x:Name="ThumbListBoxGrid">
    <ListBox x:Name="ThumbListBox" ItemsSource="{Binding}" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBoxGrid, Path=ActualHeight}" IsSynchronizedWithCurrentItem="True"  />
</Grid>

Anyone see what's wrong here?

Answer 1

For anyone searching for this in the future, the accepted answer doesn't actually apply the colour when control is not focused for me. The following should be used instead which appears to work as intended.

<Style TargetType="ListBox">
    <Style.Resources>
        <!-- Background of selected item when focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFFFB733" />
        <!-- Background of selected item when not focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#FFFFB733"/>
    </Style.Resources>
</Style>

Answer 2

You specify the SelectedItem Background for a ListBox with the SystemColors.HighlightBrushKey (focused) and SystemColors.ControlBrushKey (not focused)

<Style TargetType="{x:Type ListBox}">
    <Style.Resources> 
        <!-- Background of selected item when focussed --> 
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" 
                         Color="White"/> 
        <!-- Background of selected item when not focussed --> 
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
                         Color="White" /> 
    </Style.Resources>
    <!--...-->
</Style>