Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing WPF ListView/GridView highlight chrome

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.

like image 685
Tony Avatar asked Aug 09 '09 19:08

Tony


2 Answers

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.

like image 112
Phil Devaney Avatar answered Nov 13 '22 12:11

Phil Devaney


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.

like image 23
Martin Doms Avatar answered Nov 13 '22 14:11

Martin Doms