Search code examples
wpfxamllistviewmouseovertouchscreen

Remove the mouse over effect on a ListView in WPF


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>        

Solution

  • 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.