Remove Highlight Effect from ListViewItem

mskydt86 picture mskydt86 · May 10, 2013 · Viewed 47.2k times · Source

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?

Answer

Matmarbon picture Matmarbon · May 10, 2013

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>