69

This is my XAML so far.

<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 box to the right. I assume there is a way to change the selection color, but I can't find it.

Improve this question

7 Answers 7

Reset to default
81 
<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 style of the listboxitem (see the: TargetType is ListBoxItem)

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This no longer applies for Windows-8 which uses static colors in the ControlTemplate triggers. You'd have to derive the base Style and specify the over-ridden brushes in those triggers or give the colors directly. stackoverflow.com/a/16820062/1834662
@Viv does this also apply to wpf in .net 4.5?
@Gusdor Yes with .net4.5 on Windows-7 the ControlTemplate uses SystemColors for states. However in Windows-8 it no longer does as explained Here. Difference seems more on per OS version than per .net version
58

Or you can apply HighlightBrushKey directly to the ListBox. Setter Property="Background" Value="Transparent" did NOT work. But I did have to set the Foreground to 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> </ListBox>
Improve this answer

1 Comment

this solution works for me, but @juFo's answer dosen't, because all the control gives transparnt, dons't see any text.
46

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.

Improve this answer

4 Comments

Ok, now it makes a lot more sense. Thanks.
It doesn't work if you just use a 'Setter' for the 'Background' property in 'IsSelected' is true in ItemContainerStyle. It still uses the system highlight color. :(
To change the Background color of selected ListBoxItem, you need to retemplate the ListBoxItem. ref: the comment in the accepted answer in here . VS 2012, .Net Framework 4.5.
Can you provide a working sample of a solution based on ListBox.ItemContainerStyle? It seems like it doesn't work, the only working solution (not based on system colors) is retemplating.
30

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.

<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 out.

Improve this answer

3 Comments

This helped me a lot. I didn't know what was the SystemColors brush used when the ListBox was not focused :) +1
This was critical to me for making the background transparent when selecting on right click. Thanks!
Use InactiveSelectionHighlightBrushKey instead of ControlBrushKey from .NET 4.5.
22

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

 <Style x:Key="_ListBoxItemStyle" TargetType="ListBoxItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border Name="_Border" Padding="2" SnapsToDevicePixels="true"> <ContentPresenter /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="true"> <Setter TargetName="_Border" Property="Background" Value="Yellow"/> <Setter Property="Foreground" Value="Red"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <ListBox ItemContainerStyle="{DynamicResource _ListBoxItemStyle}" Width="200" Height="250" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"> <ListBoxItem>Hello</ListBoxItem> <ListBoxItem>Hi</ListBoxItem> </ListBox>

I posted it here, as this is the first google result for this problem so some others may find it useful.

Improve this answer

4 Comments

This works. The Setter of above Style can also be placed directly inside of <ListBox><ListBox.ItemContainerStyle> ... </ListBox.ItemContainerStyle></ListBox> as an alternative.
The only solution works for my complicated ListItem DataTemplate. All above proposed solutions (included marked as accepted) just not work. Thank you, CuicaS!
Perfect. Worked with no issues.
I know this is old but I've literally spent hours trying to get this to work with data template and this as the first solution that worked. THANK YOU!!!
12

You have to create a new template for item selection 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>
Improve this answer

1 Comment

A good answer is more than a working answer, the OP should understand his mistake rather than just copy pasting it. Otherwise he/she'll be back a week later asking the same question in a different context...
9

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:

 <ScrollViewer> <ItemsControl> <ItemsControl.ItemTemplate> <DataTemplate> ... </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer>
Improve this answer

1 Comment

This is a clear case in which less is more... thank you for this suggestion, I was struggle in useless cheap hacks and I didn't realize that the solution was so simple... Thank you again

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.