Removing WPF ListView/GridView highlight chrome

Question

I have WPF ListView with GridView view and I want to remove any trace of row highlight.

This useful piece of code can be found in one answer on this site:

     <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
           <Setter Property="Control.Focusable" Value="False"/>
           <Style.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                 <Setter Property="Background" Value="{x:Null}" />
                 <Setter Property="BorderBrush" Value="{x:Null}" />
              </Trigger>
           </Style.Triggers>
        </Style>
     </ListView.ItemContainerStyle>

However, while this change helps to remove most of the highlight, it does not remove the horizontal bar that still appears when mouse moves over the ListView row. How do I remove it?

I have dealt with the similar problem involving Button and found a solution that changes Button template by removing its chrome.

In this case of ListView/GridView I am unable to find the corresponding chrome and template to change.

Answer 1

If you have the Windows SDK installed, you can find the XAML source for all default styles (assuming you installed the samples) in:

%ProgramFiles%\Microsoft SDKs\Windows\v6.1\Samples\WPFSamples.zip

The zip file contains a folder Core which contains AeroTheme, LunaTheme etc which contain the source for default styles. Unfortunately these files are pretty large (~8500 lines for Aero) and not very well structured or formatted (IMO).

The default control template for a ListViewItem looks like this:

<ControlTemplate TargetType="{x:Type ListViewItem}">
  <Border CornerRadius="2" SnapsToDevicePixels="True"
          BorderThickness="{TemplateBinding BorderThickness}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          Background="{TemplateBinding Background}">
    <Border Name="InnerBorder" CornerRadius="1" BorderThickness="1">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition MaxHeight="11" />
          <RowDefinition />
        </Grid.RowDefinitions>

        <Rectangle Name="UpperHighlight" Visibility="Collapsed" Fill="#75FFFFFF" />
        <GridViewRowPresenter Grid.RowSpan="2" 
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
      </Grid>
    </Border>
  </Border>

  <ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="{StaticResource ListItemHoverFill}" />
      <Setter Property="BorderBrush" Value="#FFCCF0FF" />
      <Setter TargetName="UpperHighlight" Property="Visibility" Value="Visible" />
    </Trigger>

    <Trigger Property="IsSelected" Value="True">
      <Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
      <Setter Property="BorderBrush" Value="#FF98DDFB" />
      <Setter TargetName="InnerBorder" Property="BorderBrush" Value="#80FFFFFF" />
      <Setter TargetName="UpperHighlight" Property="Visibility" Value="Visible" />
      <Setter TargetName="UpperHighlight" Property="Fill" Value="#40FFFFFF" />
    </Trigger>

    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="True" />
        <Condition Property="Selector.IsSelectionActive" Value="False" />
      </MultiTrigger.Conditions>

      <Setter Property="Background" Value="{StaticResource ListItemSelectedInactiveFill}" />
      <Setter Property="BorderBrush" Value="#FFCFCFCF" />
    </MultiTrigger>

    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="True" />
        <Condition Property="IsMouseOver" Value="True" />
      </MultiTrigger.Conditions>

      <Setter Property="Background" Value="{StaticResource ListItemSelectedHoverFill}" />
      <Setter Property="BorderBrush" Value="#FF98DDFB" />
    </MultiTrigger>

    <Trigger Property="IsEnabled" Value="False">
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

Your best bet for removing all highlighting is probably to replace the ControlTemplate with you own that just includes the GridViewRowPresenter (maybe in a single Border). Don't forget to include the Trigger that greys the items when the control is disabled.

Answer 2

I'm not in front of a Windows PC to test this right now but I had a similar issue with listboxes which I fixed by putting the following into my Window.Resources

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

Not sure if it will work with your listview though.

Answer 3

Using your code, I'm not seeing any line at all. What's your default theme right now? Luna, Aero, etc.? It could be that yours is different than mine, therefore a difference in chrome. Are there any other particular settings on your ListView?

Style Snooper or Show Me The Template might help you track down the visual element responsible for the line you're seeing. You may also be interested in re-templating your ListView to get the effect you want.