Setting Background Color or WPF (4.0) ListBox - Windows 8

Question

I am attempting to set the background color of a selected ListBoxItem to be white rather than the system color. I have read what I could find here on SO and have followed, or believed to have followed the recommendations there (Change background color for selected ListBox item, WPF How to change the listbox selected item text color when the list box loses focus, Change selected and unfocused Listbox style to not be grayed out, and others).

All seem to solve the problem by setting the HighlightBrush and ControlBrush to Transparent for the selected item. I have the following XAML and it sets the font color properly, but the backgroound is the default transparent blue regardless of the brush settings. I am still a bit of a WPF noob, so I must be missing something simple here.

<ListBox Width="Auto" Height="Auto" Grid.Column="0" BorderThickness="0" Background="#FFF3F3F3" xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <ListBox.ItemsSource>
       <x:Array Type="{x:Type sys:String}">
          <sys:String>String 1</sys:String>
          <sys:String>String 2</sys:String>
          <sys:String>String 3</sys:String>
          <sys:String>String 4</sys:String>
       </x:Array>
    </ListBox.ItemsSource>
    <ListBox.ItemContainerStyle>
       <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
          <Style.Resources>
             <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
             <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
          </Style.Resources>
          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
          <Setter Property="FontSize" Value="16"/>
          <Setter Property="Foreground" Value="#999999"/>
          <Style.Triggers>
             <Trigger Property="IsSelected" Value="True" >
                <Setter Property="Background" Value="White" />
                <Setter Property="Foreground" Value="Black" />
             </Trigger>
          </Style.Triggers>
       </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
       <DataTemplate>
          <TextBlock Text="{Binding}" HorizontalAlignment="Right" Margin="0,0,8,0" Background="Transparent"/>
       </DataTemplate>
    </ListBox.ItemTemplate>
 </ListBox>

I would appreciate any nudges in the right direction.

EDIT:

After reading the first answer that it worked for them with a slight change, I took the application that I have been developing on my Windows 8 machine and executed it in a Windows 7 VM and it worked as expected. Any ideas on what needs to change to get this to work on a Windows 8 machine as well as a Windows 7?

Answer 1

Those posts are getting outdated for Windows-8.

In Windows-8 for some reason Microsoft don't want people editing their Default Style's so easily or something with a Brush over-ride.

ListBoxItem default Style from VS has this for selection triggers:

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelectionActive"
                Value="False" />
    <Condition Property="IsSelected"
                Value="True" />
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="Background"
          Value="#3DDADADA" />
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="#FFDADADA" />
</MultiTrigger>
<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelectionActive"
                Value="True" />
    <Condition Property="IsSelected"
                Value="True" />
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="Background"
          Value="#3D26A0DA" />
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="#FF26A0DA" />
</MultiTrigger>

Triggers for Selection state no longer are applying brushes we can over-ride easily but are static colors. Hence to modify it you are going to need to derive the template and modify the trigger there. to White

This is the full Style given by VS2012 Windows-8 for ListBoxItem

<Style x:Key="ListBoxItemStyle1"
       TargetType="{x:Type ListBoxItem}">
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="Padding"
          Value="4,1" />
  <Setter Property="HorizontalContentAlignment"
          Value="{Binding HorizontalContentAlignment,
                          RelativeSource={RelativeSource FindAncestor,
                                                         AncestorLevel=1,
                                                         AncestorType={x:Type ItemsControl}}}" />
  <Setter Property="VerticalContentAlignment"
          Value="{Binding VerticalContentAlignment,
                          RelativeSource={RelativeSource FindAncestor,
                                                         AncestorLevel=1,
                                                         AncestorType={x:Type ItemsControl}}}" />
  <Setter Property="Background"
          Value="Transparent" />
  <Setter Property="BorderBrush"
          Value="Transparent" />
  <Setter Property="BorderThickness"
          Value="1" />
  <Setter Property="FocusVisualStyle">
    <Setter.Value>
      <Style>
        <Setter Property="Control.Template">
          <Setter.Value>
            <ControlTemplate>
              <Rectangle Margin="2"
                         SnapsToDevicePixels="True"
                         Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                         StrokeDashArray="1 2"
                         StrokeThickness="1" />
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ListBoxItem}">
        <Border x:Name="Bd"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}"
                SnapsToDevicePixels="True">
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
        </Border>
        <ControlTemplate.Triggers>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsMouseOver"
                         Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                    Property="Background"
                    Value="#1F26A0DA" />
            <Setter TargetName="Bd"
                    Property="BorderBrush"
                    Value="#A826A0DA" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="Selector.IsSelectionActive"
                         Value="False" />
              <Condition Property="IsSelected"
                         Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                    Property="Background"
                    Value="#3DDADADA" />
            <Setter TargetName="Bd"
                    Property="BorderBrush"
                    Value="#FFDADADA" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="Selector.IsSelectionActive"
                         Value="True" />
              <Condition Property="IsSelected"
                         Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                    Property="Background"
                    Value="#3D26A0DA" />
            <Setter TargetName="Bd"
                    Property="BorderBrush"
                    Value="#FF26A0DA" />
          </MultiTrigger>
          <Trigger Property="IsEnabled"
                   Value="False">
            <Setter TargetName="Bd"
                    Property="TextElement.Foreground"
                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

if you modify those triggers to:

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelectionActive"
                Value="False" />
    <Condition Property="IsSelected"
                Value="True" />
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="Background"
          Value="White" />
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="White" />
</MultiTrigger>
<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelectionActive"
                Value="True" />
    <Condition Property="IsSelected"
                Value="True" />
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="Background"
          Value="White" />
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="White" />
</MultiTrigger>

you should have your issue sorted.

Answer 2

Adding the following trigger to my Item DataTemplate, worked for Windows 10:

<DataTemplate x:Key="MyItemTemplate">
    <Border Name="Border" Background="Transparent" BorderBrush="LightGray" BorderThickness="0,1,0,0" Padding="0">
        <TextBlock Text="{Binding Text}" HorizontalAlignment="Left" FontWeight="Medium" />
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
            <Setter TargetName="Border" Property="Background" Value="SkyBlue"/>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>