Remove the mouse over effect on a ListView in WPF

Question

How can I get ride of the pale blue mouse over effect on my ListView?

When I touch the screen a pale blue selector appears and stays in the middle of the screen as I scroll up and down (but the selected item which is highlighted in a darker blue doesn't change). I'm guessing it's the mouse over effect as the same happens effect appears when I use the mouse.

How to resolve?

I use a DataTemplate for the items collection.

Code

<ListView Grid.Row="1"
              Margin="10"                  
              HorizontalContentAlignment="Stretch"
              ItemsSource="{Binding Source={StaticResource MyData}}"
              ItemTemplate="{StaticResource MyItemTemplate}"
              ScrollViewer.CanContentScroll="False"
              ScrollViewer.PanningMode="VerticalOnly"
              ScrollViewer.PanningRatio="0.5">
    </ListView>

And here is my item template:

<DataTemplate x:Key="MyItemTemplate">
        <Grid Margin="10,5">                
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Border BorderBrush="Gray"
                    BorderThickness="1"
                    Grid.RowSpan="2"
                    CornerRadius="5" />                
            <TextBlock Text="{Binding Name}"
                       FontSize="20"
                       VerticalAlignment="Center"
                       Grid.Row="0"
                       Margin="10" />
            <Border Background="#FFB9B9B9"
                    Grid.Row="1"
                    CornerRadius="5"
                    Margin="10,0,10,4">
            <StackPanel HorizontalAlignment="Stretch"                            
                        Orientation="Horizontal"                            
                        Grid.Row="1">                    
                <TextBlock VerticalAlignment="Center"
                           Text="Status: "
                           Margin="5,5,0,5" />
                <TextBlock VerticalAlignment="Center"
                           Text="{Binding CompletionStatus}" />
                <TextBlock VerticalAlignment="Center"
                           Text="% complete, " />
                <TextBlock VerticalAlignment="Center"
                           Text="Upload status: " />
                <TextBlock VerticalAlignment="Center"
                           Text="{Binding UploadStatus}" />
                <TextBlock VerticalAlignment="Center"
                           Text="last Modified: " />
                <TextBlock VerticalAlignment="Center"
                           Text="{Binding LastModified}" />
            </StackPanel>
            </Border>
        </Grid>
    </DataTemplate>

Richard E · Accepted Answer · 2013-06-20T15:10:42.323

EDIT:

The only way I could get this to work was to redefine the ListViewItem ControlTemplate. Give the code below a try and see if it resolves your issue:

ListViewItem Style:

<Style x:Key="LvItemStyle" TargetType="ListViewItem">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ListViewItem">
            <Border x:Name="border" Background="Transparent">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Disabled" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected" />
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="border"
                                                              Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                    <EasingColorKeyFrame KeyTime="0" Value="LightBlue" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="SelectedUnfocused">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="border"
                                                              Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                    <EasingColorKeyFrame KeyTime="0" Value="SkyBlue" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <ContentPresenter/>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

ListView:

    <Grid Background="DarkGray">
    <ListView Grid.Row="1"
          Margin="10"                  
          HorizontalContentAlignment="Stretch"
          ItemsSource="{Binding MyItems}"
          ItemTemplate="{StaticResource LvDataTemplate}"
          ItemContainerStyle="{StaticResource LvItemStyle}"
          ScrollViewer.CanContentScroll="False"
          ScrollViewer.PanningMode="VerticalOnly"
          ScrollViewer.PanningRatio="0.5">
    </ListView>
</Grid>

I have hardcoded the colors for the Selected VisualStates for demonstration purposes. Ideally you would get these from a resource file.

Hi Richard, thanks for the reply. Your first example makes no difference. Have you been able to get that to work? Your 2nd example works but that applys to the whole listview so I need to get your first example to work. — Sun, Jun 19 '13 at 11:06
I'm afraid I don't have a Windows 8 box available to me at the moment to test on. If you don't get an answer beforehand I will take a look later. — Richard E, Jun 19 '13 at 12:16
Hi Richard. This works like a dream. Thank you so much for your time and effort — Sun, Jun 25 '13 at 07:33

score 8 · Answer 2 · edited Jun 11 '16 at 11:45

8

For me it worked well, like this:

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

edited Jun 11 '16 at 11:45

thesecretmaster

1,950
1
27
39

answered Jun 11 '16 at 10:27

Simão Ferreira

177
2
5

3

Please include some information about WHY this will work, and not just saying "Here is the good code" – thesecretmaster Jun 11 '16 at 10:32

Remove the mouse over effect on a ListView in WPF

2 Answers2

Linked