Xamarin.Forms How do I disable click animation on ListView

Question

I am currently developed an app that use a ListView. This app is created with Xamarin.Forms and was originally mend to be used on Android and iOS. However we have decided to prepare a UWP project as well.

The problem is, when clicking on an item from the listview, a click animation happened in UWP applications:

See this image what I mean by the animation: example UWP click animation

However this animation doesn't look well in our project.

The problem is: How can the click animation on a listview item been disabled ? We just want to become a listview without any animations. Just a plain flat list, while keeping eventHandlers.

In another Stackoverflow forum, they told us to disable the control. But that renders the control completely useless since we can't get the selecteditem + it disables scrolling.

I also found this useful forum, however this instructions are for UAP (Win8 app): https://nicksnettravels.builttoroam.com/post/2014/05/25/Remove-TapMouse-Down-Animations-on-GridView-and-ListView-for-Windows-81.aspx

Can someone please share an example or sample code how to disable the animation?

Answer 1

You need to create a custom list view renderer and apply a custom style on it.

Create a derived ListView:

namespace MyApp.Controls
{
    public class MyListView : Xamarin.Forms.ListView
    {
    }
}

In your views change the ListView to your derived control:

 <?xml version="1.0" encoding="utf-8" ?>
 <ContentView
      xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      xmlns:controls="clr-namespace:MyApp.Controls"
      x:Class="MyApp.MyView">
      <controls:MyListView 
           ItemsSource="{Binding ListSource}"
           SelectionMode="None"
           SeparatorVisibility="None">
          // ...
          // template
          // ..
    </controls:CustomListView>
</ContentView>

In your UWP project create a list view render:

[assembly: ExportRenderer(typeof(MyListView), typeof(MyListViewRenderer))]
namespace MyApp
{
    class MyListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if (Control is Windows.UI.Xaml.Controls.ListView listView)
            {
                listView.ItemContainerStyle = (Windows.UI.Xaml.Style)MyApp.App.Current.Resources["CustomListViewItem"];
            }
        }
    }
}

Now you'll need to define the above CustomListViewItem style. The default styles for windows controls are defined in the generic.xaml file, and can be found on your following local path:

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.18362.0\Generic

Within it you'll find the default list view item style which is called ListViewItemExpanded, you need to modify its style and load it to a resource dictionary. Here's a shortened version without the animation (save it to CustomListViewItem.xaml):

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    <Style x:Key="CustomListViewItem" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local" />
        <Setter Property="IsHoldingEnabled" Value="True" />
        <Setter Property="Padding" Value="0,0,0,0" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
        <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
        <Setter Property="AllowDrop" Value="False" />
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="FocusVisualMargin" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <Grid x:Name="ContentBorder"
              Control.IsTemplateFocusTarget="True"
              FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
              Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}"
              CornerRadius="{TemplateBinding CornerRadius}"
              RenderTransformOrigin="0.5,0.5">

                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="ContentBorderScale" />
                        </Grid.RenderTransform>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PointerOver">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BorderBackground"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Pressed">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BorderBackground"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <!--<PointerDownThemeAnimation TargetName="ContentPresenter" />-->
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Selected">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0:0:0"
                                            To="1" />
                                        <DoubleAnimation Storyboard.TargetName="BorderBackground"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PointerOverSelected">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0:0:0"
                                            To="1" />
                                        <DoubleAnimation Storyboard.TargetName="BorderBackground"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PressedSelected">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0:0:0"
                                            To="1" />
                                        <DoubleAnimation Storyboard.TargetName="BorderBackground"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0"
                                            To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled" />

                                <VisualState x:Name="Disabled">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                        Storyboard.TargetProperty="Opacity"
                        Duration="0"
                        To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="MultiSelectStates">
                                <VisualState x:Name="MultiSelectDisabled">

                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheckBoxTransform" Storyboard.TargetProperty="X">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="-32" KeySpline="0.1,0.9,0.2,1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectClipTransform" Storyboard.TargetProperty="X">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="32" KeySpline="0.1,0.9,0.2,1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.333" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="MultiSelectEnabled">

                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheckBoxTransform" Storyboard.TargetProperty="X">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectClipTransform" Storyboard.TargetProperty="X">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32" />
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1" />
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterGrid" Storyboard.TargetProperty="Margin">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="32,0,0,0" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="BorderBackground"
                            IsHitTestVisible="False"
                            Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                            Opacity="0"
                            Control.IsTemplateFocusTarget="True" />
                        <Grid x:Name="ContentPresenterGrid" Background="Transparent" Margin="0,0,0,0">
                            <Grid.RenderTransform>
                                <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
                            </Grid.RenderTransform>
                            <ContentPresenter x:Name="ContentPresenter"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}" />

                        </Grid>
                        <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
                             In the DataPlaceholder state, the Content is not loaded yet so we
                             approximate the size of the item using placeholder text. -->
                        <TextBlock x:Name="PlaceholderTextBlock"
                            Opacity="0"
                            Text="Xg"
                            Foreground="{x:Null}"
                            Margin="{TemplateBinding Padding}"
                            IsHitTestVisible="False"
                            AutomationProperties.AccessibilityView="Raw" />
                        <Rectangle x:Name="PlaceholderRect" Visibility="Collapsed" Fill="{ThemeResource ListViewItemPlaceholderBackground}" />
                        <Border x:Name="MultiSelectSquare"
                            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                            BorderThickness="2"
                            Width="20"
                            Height="20"
                            Margin="12,0,0,0"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left"
                            Visibility="Collapsed">
                            <Border.Clip>
                                <RectangleGeometry Rect="0,0,20,20">
                                    <RectangleGeometry.Transform>
                                        <TranslateTransform x:Name="MultiSelectClipTransform" />
                                    </RectangleGeometry.Transform>
                                </RectangleGeometry>
                            </Border.Clip>
                            <Border.RenderTransform>
                                <TranslateTransform x:Name="MultiSelectCheckBoxTransform" />
                            </Border.RenderTransform>
                            <FontIcon x:Name="MultiSelectCheck"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                Glyph="&#xE73E;"
                                FontSize="16"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                                Visibility="Collapsed"
                                Opacity="0" />
                        </Border>
                        <Border x:Name="MultiArrangeOverlayTextBorder"
                            Opacity="0"
                            IsHitTestVisible="False"
                            Margin="12,0,0,0"
                            MinWidth="20"
                            Height="20"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left"
                            Background="{ThemeResource SystemControlBackgroundAccentBrush}"
                            BorderThickness="2"
                            BorderBrush="{ThemeResource SystemControlBackgroundChromeWhiteBrush}">
                            <TextBlock x:Name="MultiArrangeOverlayText"
                  Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
                  Style="{ThemeResource CaptionTextBlockStyle}"
                  IsHitTestVisible="False"
                  Opacity="0"
                  VerticalAlignment="Center"
                  HorizontalAlignment="Center"
                  AutomationProperties.AccessibilityView="Raw" />
                        </Border>

                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Notice that <PointerDownThemeAnimation TargetName="ContentPresenter" /> is commented out in the pressed visual state.

Now load that resource to your app:

<Application
    x:Class="MyApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Styles/CustomListViewItem.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

You might need to further tweak the style, but basically this is it.

Btw this same method can be used to tweak the appearance of any native control in UWP.

Answer 2

Using a custom renderer. If you go to the part of the project of UWP and you use Control as a Windows.UI.Xaml.Controls.ListView there is a property IsItemClickEnabled

Answer 3

I think you can achieve that by using a custom renderer. Another option however is leveraging the package "FlowListView" in which there is a property called FlowTappedBackgroundColor by which you can set the background color of the cell when tapped, in your case as "Transparent".