Change the background color for the selected ListBox

Question

This is my XAML.

<ScrollViewer Grid.Column="1" Grid.RowSpan="2"> <ListBox Background="Black" ItemsSource="{Binding Path=ActiveLog}" > <ListBox.ItemTemplate> <DataTemplate> <Grid Background="Black"> <Grid.ColumnDefinitions> <ColumnDefinition Width="200"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0" Foreground="White"> <TextBlock >Date:</TextBlock> <TextBlock Text="{Binding Path=LogDate}"/> </TextBlock> <TextBlock Grid.Column="1" Grid.Row="0" Foreground="White"> <TextBlock >Severity:</TextBlock> <TextBlock Text="{Binding Path=Severity}"/> </TextBlock> <TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Foreground="LightGray" Text="{Binding Path=Message}"></TextBlock> </Grid> </DataTemplate> </ListBox.ItemTemplate> <ListBox.Template> <ControlTemplate> <StackPanel Background="Black" IsItemsHost="True" > </StackPanel> </ControlTemplate> </ListBox.Template> </ListBox> </ScrollViewer> 

The only problem is that the selected item has a blue square on the right. I suppose there is a way to change the highlight color, but I cannot find it.

Answer 1

You need to use ListBox.ItemContainerStyle .

ListBox.ItemTemplate indicates how the content of the item should be displayed. But WPF still wraps each item in a ListBoxItem control, which by default gets its background color selected as the system selection. You cannot stop WPF by creating ListBoxItem controls, but you can style them - in your case, to set the background to always be transparent or black or any other type - and for that you use ItemContainerStyle.

JuFo's answer shows one possible implementation by intercepting a system brush resource in the context of an element's style; Another, possibly more idiomatic, method is to use Setter for the Background property.

Answer 2

 <UserControl.Resources> <Style x:Key="myLBStyle" TargetType="{x:Type ListBoxItem}"> <Style.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> </Style.Resources> </Style> </UserControl.Resources> 

and

 <ListBox ItemsSource="{Binding Path=FirstNames}" ItemContainerStyle="{StaticResource myLBStyle}"> 

You just override the listboxitem style (see: TargetType - ListBoxItem)

Answer 3

Or you can apply HighlightBrushKey directly to the ListBox. The Setter = "Background" Value = "Transparent" property does NOT work. But I needed to install Foreground on Black.

  <ListBox ... > <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Style.Triggers> <Trigger Property="IsSelected" Value="True" > <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="Foreground" Value="Black" /> </Trigger> </Style.Triggers> <Style.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> </Style.Resources> </Style> </ListBox.ItemContainerStyle> 

Answer 4

I needed to install both HighlightBrushKey and ControlBrushKey in order to style it correctly. Otherwise, although it has focus, it will correctly use the transparent HighlightBrusKey. Bt, if the control loses focus (although it is still selected), then it uses the ControlBrushKey.

 <Style.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" /> <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" /> </Style.Resources> 

When using .Net 4.5 and above, use InactiveSelectionHighlightBrushKey instead of ControlBrushKey :

 <Style.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" /> <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" /> </Style.Resources> 

Hope this helps someone.

Answer 5

If the choice is not important, it is better to use the ItemsControl element wrapped in a ScrollViewer. This combination is lighter than Listbox (which is actually derived from ItemsControl already), and its use will eliminate the need to use a cheap hack to override the behavior that is already missing in ItemsControl.

In cases where the behavior of the choice is really important, then this clearly will not work. However, if you want to change the background color of the selected element so that it is not visible to the user, then this would only confuse them. In cases where you intend to change some other feature to indicate that the item is selected, then some other answers to this question may be more relevant.

Here is a skeleton about how the markup should look:

  <ScrollViewer> <ItemsControl> <ItemsControl.ItemTemplate> <DataTemplate> ... </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer> 

Answer 6

You need to create a new template to select items like this.

 <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" SnapsToDevicePixels="True"> <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" /> </Border> </ControlTemplate> </Setter.Value> </Setter> 

Answer 7

 <Style.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> </Style.Resources> 

This code worked like a charm for me. Thanks to the original poster.