Change background color for selected ListBox item

Question

This is my XAML so far   lt ScrollViewer Grid Column  quot 1 quot  Grid RowSpan  quot 2 quot  gt        lt ListBox   Background  quot Black quot  ItemsSource  quot  Binding Path ActiveLog  quot   gt           lt ListBox ItemTemplate gt               lt DataTemplate gt                   lt Grid Background  quot Black quot  gt                       lt Grid ColumnDefinitions gt                           lt ColumnDefinition Width  quot 200 quot  gt  lt  ColumnDefinition gt                           lt ColumnDefinition Width  quot   quot  gt  lt  ColumnDefinition gt                       lt  Grid ColumnDefinitions gt                       lt Grid RowDefinitions gt                           lt RowDefinition gt  lt  RowDefinition gt                           lt RowDefinition gt  lt  RowDefinition gt                       lt  Grid RowDefinitions gt                       lt TextBlock Grid Column  quot 0 quot  Grid Row  quot 0 quot  Foreground  quot White quot  gt                           lt TextBlock  gt Date  lt  TextBlock gt                           lt TextBlock  Text  quot  Binding Path LogDate  quot   gt                       lt  TextBlock gt                       lt TextBlock Grid Column  quot 1 quot  Grid Row  quot 0 quot  Foreground  quot White quot  gt                           lt TextBlock  gt Severity  lt  TextBlock gt                           lt TextBlock  Text  quot  Binding Path Severity  quot   gt                       lt  TextBlock gt                       lt TextBlock Grid Column  quot 0 quot  Grid ColumnSpan  quot 2 quot  Grid Row  quot 1 quot  Foreground  quot LightGray quot  Text  quot  Binding Path Message  quot  gt  lt  TextBlock gt                   lt  Grid gt               lt  DataTemplate gt           lt  ListBox ItemTemplate gt           lt ListBox Template gt               lt ControlTemplate gt                   lt StackPanel Background  quot Black quot  IsItemsHost  quot True quot   gt                   lt  StackPanel gt               lt  ControlTemplate gt           lt  ListBox Template gt        lt  ListBox gt   lt  ScrollViewer gt   The only problem is that the selected item has a blue box to the right  I assume there is a way to change the selection color  but I can t find it

User · Answer

Or you can apply HighlightBrushKey directly to the ListBox  Setter Property  quot Background quot  Value  quot Transparent quot  did NOT work   But I did have to set the Foreground to Black   lt ListBox       gt       lt ListBox ItemContainerStyle gt           lt Style TargetType  quot ListBoxItem quot  gt               lt Style Triggers gt                   lt Trigger Property  quot IsSelected quot  Value  quot True quot   gt                       lt Setter Property  quot FontWeight quot  Value  quot Bold quot    gt                       lt Setter Property  quot Background quot  Value  quot Transparent quot    gt                       lt Setter Property  quot Foreground quot  Value  quot Black quot    gt                   lt  Trigger gt               lt  Style Triggers gt               lt Style Resources gt                   lt SolidColorBrush x Key  quot  x Static SystemColors HighlightBrushKey  quot  Color  quot Transparent quot   gt               lt  Style Resources gt           lt  Style gt                       lt  ListBox ItemContainerStyle gt   lt  ListBox gt

User · Answer

I had to set both HighlightBrushKey and ControlBrushKey to get it to be correctly styled   Otherwise  whilst it has focus this will correctly use the transparent HighlightBrusKey   Bt  if the control loses focus  whilst it is still highlighted  then it uses the ControlBrushKey    lt Style Resources gt       lt SolidColorBrush x Key   x Static SystemColors HighlightBrushKey   Color  Transparent    gt       lt SolidColorBrush x Key   x Static SystemColors ControlBrushKey   Color  Transparent    gt   lt  Style Resources gt    When Using  Net 4 5 and above  use InactiveSelectionHighlightBrushKey instead of ControlBrushKey    lt Style Resources gt       lt SolidColorBrush x Key   x Static SystemColors HighlightBrushKey   Color  Transparent    gt       lt SolidColorBrush x Key   x Static SystemColors InactiveSelectionHighlightBrushKey   Color  Transparent    gt   lt  Style Resources gt    Hope this helps someone out

User · Answer

If selection is not important  it is better to use an ItemsControl wrapped in a ScrollViewer   This combination is more light-weight than the Listbox  which actually is derived from ItemsControl already  and using it would eliminate the need to use a cheap hack to override behavior that is already absent from the ItemsControl   In cases where the selection behavior IS actually important  then this obviously will not work   However  if you want to change the color of the Selected Item Background in such a way that it is not visible to the user  then that would only serve to confuse them   In cases where your intention is to change some other characteristic to indicate that the item is selected  then some of the other answers to this question may still be more relevant   Here is a skeleton of how the markup should look        lt ScrollViewer gt           lt ItemsControl gt               lt ItemsControl ItemTemplate gt                   lt DataTemplate gt                                           lt  DataTemplate gt               lt  ItemsControl ItemTemplate gt           lt  ItemsControl gt       lt  ScrollViewer gt

User · Answer

You have to create a new template for item selection like this    lt Setter Property  Template  gt       lt Setter Value gt           lt ControlTemplate TargetType  ListBoxItem  gt               lt Border                 BorderThickness   TemplateBinding Border BorderThickness                   Padding   TemplateBinding Control Padding                   BorderBrush   TemplateBinding Border BorderBrush                   Background   TemplateBinding Panel Background                   SnapsToDevicePixels  True  gt                   lt ContentPresenter                     Content   TemplateBinding ContentControl Content                       ContentTemplate   TemplateBinding ContentControl ContentTemplate                       HorizontalAlignment   TemplateBinding Control HorizontalContentAlignment                       VerticalAlignment   TemplateBinding Control VerticalContentAlignment                       SnapsToDevicePixels   TemplateBinding UIElement SnapsToDevicePixels     gt               lt  Border gt           lt  ControlTemplate gt       lt  Setter Value gt   lt  Setter gt

User · Answer

lt UserControl Resources gt       lt Style x Key  myLBStyle  TargetType   x Type ListBoxItem   gt           lt Style Resources gt               lt SolidColorBrush x Key   x Static SystemColors HighlightBrushKey                                Color  Transparent   gt           lt  Style Resources gt       lt  Style gt   lt  UserControl Resources gt     and   lt ListBox ItemsSource   Binding Path FirstNames            ItemContainerStyle   StaticResource myLBStyle   gt      You just override the style of the listboxitem  see the  TargetType is ListBoxItem

User · Answer

I ve tried various solutions and none worked for me  after some more research I ve found a solution that worked for me here https   gist github com LGM-AdrianHum c8cb125bc493c1ccac99b4098c7eeb60     lt Style x Key  quot  ListBoxItemStyle quot  TargetType  quot ListBoxItem quot  gt               lt Setter Property  quot Template quot  gt                   lt Setter Value gt                       lt ControlTemplate TargetType  quot ListBoxItem quot  gt                           lt Border Name  quot  Border quot                                  Padding  quot 2 quot                                  SnapsToDevicePixels  quot true quot  gt                               lt ContentPresenter   gt                           lt  Border gt                           lt ControlTemplate Triggers gt                               lt Trigger Property  quot IsSelected quot  Value  quot true quot  gt                                   lt Setter TargetName  quot  Border quot  Property  quot Background quot  Value  quot Yellow quot   gt                                   lt Setter Property  quot Foreground quot  Value  quot Red quot   gt                               lt  Trigger gt                           lt  ControlTemplate Triggers gt                       lt  ControlTemplate gt                   lt  Setter Value gt               lt  Setter gt           lt  Style gt     lt ListBox ItemContainerStyle  quot  DynamicResource  ListBoxItemStyle  quot                   Width  quot 200 quot  Height  quot 250 quot                   ScrollViewer VerticalScrollBarVisibility  quot Auto quot                   ScrollViewer HorizontalScrollBarVisibility  quot Auto quot  gt               lt ListBoxItem gt Hello lt  ListBoxItem gt               lt ListBoxItem gt Hi lt  ListBoxItem gt           lt  ListBox gt   I posted it here  as this is the first google result for this problem so some others may find it useful

User · Answer

You need to use ListBox ItemContainerStyle   ListBox ItemTemplate specifies how the content of an item should be displayed   But WPF still wraps each item in a ListBoxItem control  which by default gets its Background set to the system highlight colour if it is selected   You can t stop WPF creating the ListBoxItem controls  but you can style them -- in your case  to set the Background to always be Transparent or Black or whatever -- and to do so  you use ItemContainerStyle   juFo s answer shows one possible implementation  by  hijacking  the system background brush resource within the context of the item style  another  perhaps more idiomatic technique is to use a Setter for the Background property

[wpf] Change background color for selected ListBox item

Examples related to wpf

Examples related to styles