How to disable highlighting on listbox but keep selection?

Question

I am having trouble finding how to not allow my ListBox to highlight the item selected. I know that I didn't add a trigger to highlight the item.

<ListBox Name="CartItems" ItemsSource="{Binding}"
         ItemTemplate="{StaticResource TicketTemplate}" 
         Grid.Row="3" Grid.ColumnSpan="9" Background="Transparent"
         BorderBrush="Transparent">
</ListBox>

score 73 · Answer 1 · answered Apr 15 '15 at 20:38

73

        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="IsSelected" Value="{Binding Content.IsSelected, Mode=TwoWay, RelativeSource={RelativeSource Self}}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>

answered Apr 15 '15 at 20:38

Wayne Lo

3,689
2
28
28

The answer by @Baboon doesn't work in WIndows Phone 8.1 - this one does. Great. – samjudson Oct 07 '15 at 19:25
This answers works if you already has defined `ListBox.ItemContainerStyle` – JwJosefy Oct 13 '15 at 21:51
5

I have been searching through most of the answers out there with no luck. This was the ONLY solution that worked for me with a list box item template. – T James Dec 21 '16 at 17:04

Louis Kottmann · Accepted Answer · 2016-06-30T15:37:59.157

47

Late answer, but there's a much better and simpler solution:

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

This allows you to have a LisBox that looks just like an itemscontrol, but has support for selection.

Edit: How it works
This alters "colors of the system", in other words your windows theme, only for this ListBox and its children (we actually want to target the ListboxItem).

For example hovering a ListboxItem usually gives it a deep blue background, but here we set it to transparent (HighlightBrushKey).

Edit (30 June 2016):
It seems for latest Windows version this is not enough anymore, you also need to redefine InactiveSelectionHighlightBrushKey

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

Thanks to @packoman in the comments

edited Jun 30 '16 at 15:37

answered Jan 23 '12 at 16:44

Louis Kottmann

16,268
4
64
88

Hello, can you please explain to me how this works exactly? It has me pretty confused because I thought that all you were doing was defining solidcolorbrushes to be used later in the listbox, not doing any actual changes with that code snippet. – Clement Hoang Aug 19 '13 at 01:37
1

@ClementHoang I added an explanation. – Louis Kottmann Aug 19 '13 at 07:44
x:Static doesn't work with windows store apps, is there's a replacement for that? – smohamed Feb 09 '14 at 09:25
2

But, still, if I'd set focus on other element, I can see selection. :/ – Mateusz Dembski Dec 19 '14 at 14:55
This does not work for me, see [this question](http://stackoverflow.com/questions/38042016/overriding-systemcolors-in-local-resources-dictionary). Any idea? – Jonas Sourlier Jun 29 '16 at 06:58
@cheeesus sorry I haven't been programming WPF in years – Louis Kottmann Jun 29 '16 at 18:08
1

@Baboon You might consider updating your answer. I was having the same problem as Mateusz Dembski, in that if the ListBox is not focused you will see the gray highlighting of selected items. The solution for this seems to be adding `` to the lines from your answer. Though I did not exhaustively test it yet ... Got it from here: http://stackoverflow.com/questions/38042016/overriding-systemcolors-in-local-resources-dictionary – packoman Jun 30 '16 at 09:26
1

This did not work, even with the edit added. I had an ItemContainerStyle set which probably causes this not to work. – JeremyK Apr 09 '17 at 17:19
Does this override any future styles you apply on IsSelected? – CyberFox Aug 11 '17 at 04:02
Doesn't work on `Windows 10`. At least not when targeting `.NET 6`. Those dreaded blue colors keep coming... – l33t Feb 01 '22 at 16:39

score 6 · Answer 3 · answered Dec 03 '10 at 09:50

removing the highlighting completely feels very odd, as you dont know if you've selected anything, but here's a version of the control template that uses WhiteSmoke (which is very subtle) instead of Blue

<Window.Resources>
    <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, 
            RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment,
             RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Padding" Value="2,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 
                            Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="Background" TargetName="Bd" Value="WhiteSmoke"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <ListBox HorizontalAlignment="Left" VerticalAlignment="Top" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}">
        <ListBoxItem Content="Item1"/>
        <ListBoxItem Content="Item2"/>
        <ListBoxItem Content="Item3"/>
        <ListBoxItem Content="Item4"/>
        <ListBoxItem Content="Item5"/>
        <ListBoxItem Content="Item6"/>
    </ListBox>
</Grid>

score 5 · Answer 4 · answered Nov 24 '19 at 15:39

here's what worked for me.

<Style x:Key="ListBoxNoHighlight" TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Transparent"/>
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="Transparent"/>                   
            </Trigger>
        </Style.Triggers>
    </Style>

Thanks! The only solution that works on `Windows 10`, targeting `.NET 6`. — l33t, Feb 01 '22 at 16:39

score 1 · Answer 5 · answered Jun 07 '12 at 03:44

1

In the Properties tab, there is an Enabled Field with 2 options, true and false. By turning this to false, the Listbox remains white and selection is not avaliable. Just figured this out!

answered Jun 07 '12 at 03:44

Dustin Poole

11
1

score 1 · Answer 6 · answered Mar 06 '14 at 14:27

I'm talking about a trick I did in my WP8 app.

I added a transparent frame image above it (the image's border was seen, think of it like a picture frame). The scroll was functional, any manipulation event was firing just that the Listbox items weren't selected anylonger.

<Grid 
        Grid.Row="0" 
        Margin="10,15"
        Background="#FF008F88">
        <ListBox 
            x:Name="listBox_content" 
            Margin="20,15"
            VirtualizingStackPanel.VirtualizationMode="Recycling">
        </ListBox>

        <!-- TV image, middle is transparent so the ListBox can be seen -->
        <Image 
                x:Name="image_tv" 
                Source="/Assets/Images/tvFrame.png" 
                Stretch="Fill"/>
        <!---->
    </Grid>

I guess this could work with a full transparent image set to Fill as well.

score 0 · Answer 7 · answered Dec 03 '10 at 08:48

0

You will have to re-template ListBoxItem. In the default template, it has a trigger that highlights itself when IsSelected property is true. You just have to create a template that does not have that trigger.

answered Dec 03 '10 at 08:48

decyclone

30,394
6
63
80

Here (http://msdn.microsoft.com/en-us/library/cc278062%28VS.95%29.aspx) is a page that lists templates of ListBox and ListBoxItem. You can use them. – decyclone Dec 03 '10 at 08:50

user5504444 · Answer 8 · 2023-01-18T11:04:57.627

I think you need to create a custom control template for the ListBoxItem, and include the trigger to change the background color to "Transparent" when the item is selected. Here is an example of how you can do this:

<ListBox x:Name="MyListBox">
    <ListBox.Resources>
        <ControlTemplate x:Key="ListBoxItemControlTemplate" TargetType="ListBoxItem">
            <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" TargetName="Bd" Value="Transparent"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ListBox.Resources>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template" Value="{StaticResource ListBoxItemControlTemplate}"/>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

How to disable highlighting on listbox but keep selection?

8 Answers8

Linked