How to disable highlighting on listbox but keep selection?
Asked Answered
R

8

40

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>
Reisfield answered 3/12, 2010 at 8:44 Comment(0)
S
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

Strega answered 23/1, 2012 at 16:44 Comment(10)
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.Niedersachsen
@ClementHoang I added an explanation.Strega
x:Static doesn't work with windows store apps, is there's a replacement for that?Neotype
But, still, if I'd set focus on other element, I can see selection. :/Highkey
This does not work for me, see this question. Any idea?Habitant
@cheeesus sorry I haven't been programming WPF in yearsStrega
@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 <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" /> to the lines from your answer. Though I did not exhaustively test it yet ... Got it from here: #38042516Nanettenani
This did not work, even with the edit added. I had an ItemContainerStyle set which probably causes this not to work.Conductor
Does this override any future styles you apply on IsSelected?Leix
Doesn't work on Windows 10. At least not when targeting .NET 6. Those dreaded blue colors keep coming...Inconspicuous
S
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>
Semipalatinsk answered 15/4, 2015 at 20:38 Comment(4)
The answer by @Baboon doesn't work in WIndows Phone 8.1 - this one does. Great.Comminate
This answers works if you already has defined ListBox.ItemContainerStyleSerg
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.Nadeau
What the IsSelected setter suppose to do here? I've removed it and it seams to work the same way, although I'm not selecting anything but just have a list of custom buttons.Lattie
S
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

Strega answered 23/1, 2012 at 16:44 Comment(10)
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.Niedersachsen
@ClementHoang I added an explanation.Strega
x:Static doesn't work with windows store apps, is there's a replacement for that?Neotype
But, still, if I'd set focus on other element, I can see selection. :/Highkey
This does not work for me, see this question. Any idea?Habitant
@cheeesus sorry I haven't been programming WPF in yearsStrega
@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 <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" /> to the lines from your answer. Though I did not exhaustively test it yet ... Got it from here: #38042516Nanettenani
This did not work, even with the edit added. I had an ItemContainerStyle set which probably causes this not to work.Conductor
Does this override any future styles you apply on IsSelected?Leix
Doesn't work on Windows 10. At least not when targeting .NET 6. Those dreaded blue colors keep coming...Inconspicuous
P
6

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>
Pending answered 3/12, 2010 at 9:50 Comment(0)
T
5

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>
Tupper answered 24/11, 2019 at 15:39 Comment(1)
Thanks! The only solution that works on Windows 10, targeting .NET 6.Inconspicuous
S
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!

Scholasticate answered 7/6, 2012 at 3:44 Comment(0)
M
1

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.

Matinee answered 6/3, 2014 at 14:27 Comment(0)
B
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.

Bezique answered 3/12, 2010 at 8:48 Comment(1)
Here (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.Bezique
D
0

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>
Declaratory answered 18/1, 2023 at 11:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.