How to remove hover style for ListView rows?

5.9k views Asked by At

I'm using Modern UI, and I have a ListView containing a Gridview. When I hover over or select a row, there is a background color applied to the row. How can I remove this style?

<ListView ... >
    <ListView.Resources>
        <SolidColorBrush x:Key="ItemBackgroundHover" Color="Transparent" />
        <Style TargetType="ListViewItem">
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="True">
                    <Setter Property="Background" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListView.Resources>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Action">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                    ...

enter image description here

2

There are 2 answers

3
Mike Strobel On BEST ANSWER

In your ListView.Resources, override the ItemBackgroundHover brush resource:

<SolidColorBrush x:Key="ItemBackgroundHover" Color="Transparent" />

Do the same for ItemBackgroundSelected if you don't want the selected item to be highlighted.

You may also need to override the foreground brushes if you support the Modern Light theme. You can see the brushes that get applied here.

This won't work if you replace Modern UI's ListViewItem style with your own, but you could base yours off of theirs, and it should work:

<Style TargetType="ListViewItem"
       BasedOn="{StaticResource {x:Type ListViewItem}}">

Also, based on your screenshot, you probably don't need to be using a ListView, as you appaerntly don't care about selecting items. You could use a simple ItemsControl.


To remove the button chrome, you can create a style like this:

<Style x:Key="GlyphButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border>
          <ContentPresenter x:Name="ContentSite" />
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="ContentSite"
                    Property="Margin"
                    Value="1,1,-1,-1" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
0
freiguy1 On

The older answers here didn't work for me. I was forced to override the ListView.ItemContainerStyle:

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

I found and modified the code from here which was mentioned in the other answer by Mike Strobel. The majority of changes I made was removing the trigger section.