Remove Highlight Effect from ListViewItem

Question

In a ListView there are ListviewItems where they must not change appearance when the mouse is over them or they are selected.

I tried to accomplish that with this style and did somewhat succeed:

<Style x:Key="ItemContainerStyle1" TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Focusable" Value="False" />
        </Trigger>
    </Style.Triggers>
</Style>

But the it raised a new issue. When the background is set to "Transparent" I am now able to see this hover/glossy effect that is shown at the picture below, when the mouse is over a list view item.

enter image description here

I have tried to solve the problem with this attempt, but with no luck.

<Style TargetType="{x:Type ListViewItem}">
    <Style.Resources>
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#00000000"/>
      <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#00000000"/>
    </Style.Resources>
</Style>

Anyone have an idea how to remove this hover effect?

If anyone needs just list of controls (without a table), use `ItemsControl` https://stackoverflow.com/a/17853517/6131611 — Pavel, Oct 23 '18 at 22:46

Matteo B. · Accepted Answer · 2015-10-08T11:39:57.757

139

I don't know if this is the only solution but I did it as follows (by setting the Template property of the ListViewItems):

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border
                         BorderBrush="Transparent"
                         BorderThickness="0"
                         Background="{TemplateBinding Background}">
                        <GridViewRowPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="Auto" Margin="0" Content="{TemplateBinding Content}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.ItemContainerStyle>

EDIT:

Or as Grant Winney suggests (I did not test that myself):

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <ContentPresenter />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.ItemContainerStyle>

edited Oct 08 '15 at 11:39

answered May 10 '13 at 21:41

Matteo B.

3,906
2
29
43

Thanks, this solved my problem :) Been using two days on this! I was wondering if you knew a good book or some good homepages to get knowledge about styling? – RooKie- May 11 '13 at 08:40
Only [msdn](http://msdn.microsoft.com/en-US/), http://wpftutorial.net/ and Google, sorry.. maybe anybody else has an idea. – Matteo B. May 11 '13 at 09:07
8

I tested @GrantWinney's solution, and it works well. – J3soon Mar 06 '16 at 11:57
Total life saver @Matmarbon. I used Grant Winney's solution, also. In the end, I needed a ListView to contain items in the width of the window, where a Scrollviewer would not suit - I didn't need any of the hover/tap styling, so thank you very much +1 :) – Geoff James May 10 '16 at 10:12
7

Best answer! The second one is the best, the first one made my entire component disappear. – Abraão Caldas Aug 30 '16 at 18:40
First solution works for ListView with GridView, second one works with ListView without GridView. – Dawid Jablonski Aug 02 '19 at 07:54
@Grant as per your suggestion. I implemented your solution in my ListView. My listview is having a custom item template. On applying your solution, Highlight effect gets disabled but it does not apply foreground and background properties applied on my ListViewItem. Can you please what should be added/removed in your solution while using custom ItemTemplate in ListView? Thanks. – xyzWty Sep 03 '19 at 05:45
@Matmarbon On applying your solution it disables the highlight effect of the selected item in list view, but it somehow makes the foreground of text inside ListViewItem transparent. The text inside the ListViewItem is not visible. How can I make it visible? – xyzWty Sep 03 '19 at 05:48
@GrantWinney 's Solution is what have been working for me. – Avrohom Oct 27 '19 at 13:32
@GrantWinney 's solution works great for me! It removes the MouseOver and Selected effects, which is exactly what I needed (it can be used to simulate line-by-line animation of text). The first one made the contents of my ListView disappear. – CodingNinja Sep 22 '21 at 01:00

score 6 · Answer 2 · answered Oct 19 '16 at 15:47

This work:

<Style TargetType="{x:Type ListViewItem}">  
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
            <Grid Background="{TemplateBinding Background}">
                <Border Name="Selection" Visibility="Collapsed" />
                <!-- This is used when GridView is put inside the ListView -->
                <GridViewRowPresenter Grid.RowSpan="2"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

This is the only option that works when you are using a GridView. Thank you! — Daniel, Feb 06 '19 at 19:16

score 5 · Answer 3 · edited Oct 16 '18 at 01:36

5

For me, worked well, like this:

<ListView.ItemContainerStyle>
  <Style TargetType="ListViewItem">
    <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
      </Trigger>
    </Style.Triggers>
  </Style>
</ListView.ItemContainerStyle>

edited Oct 16 '18 at 01:36

Glenn Slayden

17,543
3
114
108

answered Jun 11 '16 at 10:33

Simão Ferreira

177
2
5

score 4 · Answer 4 · answered Jan 17 '17 at 10:30

Did not the question but this worked for me .

<Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
                            </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

This vesrion works in my case, having a nested listview. – Felice Pollano Jan 31 '23 at 11:37 — Felice Pollano, Jan 31 '23 at 11:37

score 4 · Answer 5 · answered Aug 26 '17 at 15:26

I had the same problem, but none of the answers helped me. Searching on the web i found this solution and it worked:

        <ListView.Resources>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <GridViewRowPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.Resources>

score 3 · Answer 6 · edited Jan 29 '20 at 17:20

This answer is similar to that by Big Kev but for a GridView which needs the GridViewRowPresenter instead of the ContentPresenter.

I liked Kev's answer best because it removed the default hover highlighting and still gives control over the style using the IsMouseOver Trigger which the other answers did not.

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
            <Border Name="Border" BorderBrush="{TemplateBinding BorderBrush}" 
                                  BorderThickness="{TemplateBinding BorderThickness}" 
                                  Background="{TemplateBinding Background}">
                <GridViewRowPresenter Content="{TemplateBinding Content}"
                                      Margin="{TemplateBinding Padding}" />
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

score 0 · Answer 7 · answered Jan 15 '18 at 09:23

Try this one it worked for me.

                        <Style TargetType="{x:Type ListBoxItem}">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                        <ContentPresenter HorizontalAlignment="Left" Margin="2,3,2,3" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

score 0 · Answer 8 · answered Apr 02 '21 at 10:41

I just added code this in ControlTemplate Trigger :

<Trigger Property="IsMouseOver" Value="True">
     <Setter Property="Background" Value="Transparent"/>
     <Setter Property="Foreground" Value="{DynamicResource White_200}"/>
</Trigger>

Here is full Example for ListViewItem Template Style;

<ListView x:Name="ListViewMenu" ItemsSource="{Binding Path=SubItems}" 
                      Background="Transparent" Foreground="White" BorderThickness="0"
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                      ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      Height="210">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Foreground" Value="#808182" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListViewItem}">
                                    <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="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                                        </Trigger>
                                        <MultiTrigger>
                                            <MultiTrigger.Conditions>
                                                <Condition Property="IsSelected" Value="true"/>
                                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                                            </MultiTrigger.Conditions>
                                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
                                        </MultiTrigger>
                                        <Trigger Property="IsEnabled" Value="false">
                                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                        </Trigger>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Background" Value="Transparent"/>
                                            <Setter Property="Foreground" Value="{DynamicResource White_200}"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=Name}" Padding="20 5" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

Remove Highlight Effect from ListViewItem

8 Answers8

Linked