CODEWITHSUNDEEP
wpfxamllistbox
Aero Chocolate
Aero Chocolate

Reputation: 1497

How to disable highlighting on listbox but keep selection?

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>

Upvotes: 40

Views: 51617

Answers (8)

user5504444
user5504444

Reputation: 1

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>

Upvotes: 0

maerzman
maerzman

Reputation: 111

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>

Upvotes: 7

Louis Kottmann
Louis Kottmann

Reputation: 16618

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

Upvotes: 47

Wayne Lo
Wayne Lo

Reputation: 3719

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

Upvotes: 73

JeFawk
JeFawk

Reputation: 81

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.

Upvotes: 1

Dustin Poole
Dustin Poole

Reputation: 11

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!

Upvotes: 1

Dean Chalk
Dean Chalk

Reputation: 20451

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>

Upvotes: 6

decyclone
decyclone

Reputation: 30830

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.

Upvotes: 0

Related Questions