Ripple effect not smooth

[Rayhane]

Hi,

The ripple animation is not smooth or not finished when pushing a page. For example If I push an empty page with less content it work fine but if there is many icons the animation isn't smooth.

I use the ripple effect from visual as material :https://www.syncfusion.com/kb/11468/how-to-work-with-material-visual-for-custom-listview-in-xamarin-forms-sflistview

I shared a sample.

Attachment: sample_183efc14.rar

[Lakshmi Natarajan]

Hi Rayhane, 

 

We have checked the reported query “Ripple effect not smooth” from our end. Currently, we are analyzing the reported query at our side. We will check the reported scenario and update you further details in two business days (June 17, 2020). We appreciate your patience until then. 

 

Regards, 

Lakshmi Natarajan 

[Lakshmi Natarajan]

Hi Rayhane, 

 

Thank you for your patience. 

 

We have checked the reported query “Ripple effect is not smooth” from our end. We would like to inform you that the ItemTapped event and effects are the synchronous process and both actions will be triggered at the same time when the ListViewItem is tapped. This is the expected behavior of the SfListView.  

 

Also, we suggest you to achieve your requirement using any of the following ways, 

1. Trigger the page navigation process asynchronously.
2. Use custom EffectsView

 

Trigger the page navigation process asynchronously 

private async void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

    await Task.Delay(350); 

    await App.Current.MainPage.Navigation.PushAsync(new NewPage()); 

} 

 

Use custom EffectsView 

Xaml: Change the visual as Default to disable the ListView’s default effects. Add custom EffectsView inside the SfListView.ItemTemplate. 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 

             xmlns:local="clr-namespace:ListViewXamarin" 

             xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" 

             xmlns:effectsView="clr-namespace:Syncfusion.XForms.EffectsView;assembly=Syncfusion.Core.XForms" 

             x:Class="ListViewXamarin.MainPage" 

             Visual="Default"> 

    <ContentPage.BindingContext> 

        <local:ViewModel /> 

    </ContentPage.BindingContext> 

     

    <Grid RowSpacing="0" ColumnSpacing="0" Padding="0" Margin="0"> 

        <sync:SfListView x:Name="listView" AutoFitMode="Height" ItemsSource="{Binding BookInfo}" SelectionBackgroundColor="#d3d3d3"> 

            <sync:SfListView.ItemTemplate> 

                <DataTemplate> 

                    <effectsView:SfEffectsView AnimationCompleted="SfEffectsView_AnimationCompleted"> 

                        <Grid Padding="0,12,8,0"> 

                            <Grid.RowDefinitions> 

                                <RowDefinition Height="Auto" /> 

                                <RowDefinition Height="1" /> 

                            </Grid.RowDefinitions> 

                            <StackLayout Orientation="Vertical" Padding="8,0,8,10" VerticalOptions="Start" Grid.Row="0"> 

                                <Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="16" TextColor="#000000" /> 

                                <Label Text="{Binding BookAuthor}" Grid.Row="1" FontSize="14"  Opacity=" 0.67" TextColor="#000000" /> 

                                <Label Text="{Binding BookDescription}" Opacity=" 0.54" TextColor="#000000" FontSize="13"/> 

                            </StackLayout> 

                            <BoxView Grid.Row="1" HeightRequest="1" Opacity="0.75" BackgroundColor="#CECECE" /> 

                        </Grid> 

                    </effectsView:SfEffectsView> 

                </DataTemplate> 

            </sync:SfListView.ItemTemplate> 

        </sync:SfListView> 

    </Grid> 

</ContentPage> 

 

Code behind: Trigger AnimationCompleted event for the EffectsView to navigate to another page. 

private void SfEffectsView_AnimationCompleted(object sender, EventArgs e) 

{ 

    Navigation.PushAsync(new NewPage()); 

} 

 

You can also refer to our user guidance document regarding the EffectsView from the following links, 

https://help.syncfusion.com/xamarin/effects-view/getting-started 

https://help.syncfusion.com/xamarin/effects-view/events#animationcompleted-event 

 

Please let us know if you need further assisitance. 

 

Regards, 

Lakshmi Natarajan 

[Rayhane]

Hi, 

Thank you, your sample is nice, but How do I get the selected item in this case. The selection changed event / item Tapped aren't triggered in this case. I could add a behavior to the effect view, then trigger the ripple effect programmatically howewer it doesn't match with my requirement (Cannot get the tapped position in this case)

[Lakshmi Natarajan]

Hi Rayhane, 

 

Thank you for the update. 

 

We would like to inform you that when any interactable control loaded inside the SfListView. the touch will be handled by the child itself and ListView does not get the notification of the touch. This is the expected behavior. 

 

Meanwhile, you can achieve your requirement using SelectedItemTemplate to show the effects. Please refer the following code snippets for more reference, 

 

Xaml: Use SelectedItemTemplate and load EffectsView. 

<sync:SfListView x:Name="listView" AutoFitMode="Height" ItemsSource="{Binding BookInfo}" SelectionBackgroundColor="#d3d3d3"> 

    <sync:SfListView.ItemTemplate> 

        <DataTemplate> 

            <Grid Padding="0,12,8,0"> 

                <Grid.RowDefinitions> 

                    <RowDefinition Height="Auto" /> 

                    <RowDefinition Height="1" /> 

                </Grid.RowDefinitions> 

                <StackLayout Orientation="Vertical" Padding="8,0,8,10" VerticalOptions="Start" Grid.Row="0"> 

                    <Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="16" TextColor="#000000" /> 

                    <Label Text="{Binding BookAuthor}" Grid.Row="1" FontSize="14"  Opacity=" 0.67" TextColor="#000000" /> 

                    <Label Text="{Binding BookDescription}" Opacity=" 0.54" TextColor="#000000" FontSize="13"/> 

                </StackLayout> 

                <BoxView Grid.Row="1" HeightRequest="1" Opacity="0.75" BackgroundColor="#CECECE" /> 

            </Grid> 

        </DataTemplate> 

    </sync:SfListView.ItemTemplate> 

    <sync:SfListView.SelectedItemTemplate> 

        <DataTemplate> 

            <effectsView:SfEffectsView x:Name="effectsView" IsSelected="True"> 

                <effectsView:SfEffectsView.Behaviors> 

                    <local:EffectsViewBehavior/> 

                </effectsView:SfEffectsView.Behaviors> 

                <Grid Padding="0,12,8,0"> 

                    <Grid.RowDefinitions> 

                        <RowDefinition Height="Auto" /> 

                        <RowDefinition Height="1" /> 

                    </Grid.RowDefinitions> 

                    <StackLayout Orientation="Vertical" Padding="8,0,8,10" VerticalOptions="Start" Grid.Row="0"> 

                        <Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="16" TextColor="#000000" /> 

                        <Label Text="{Binding BookAuthor}" Grid.Row="1" FontSize="14"  Opacity=" 0.67" TextColor="#000000" /> 

                        <Label Text="{Binding BookDescription}" Opacity=" 0.54" TextColor="#000000" FontSize="13"/> 

                    </StackLayout> 

                    <BoxView Grid.Row="1" HeightRequest="1" Opacity="0.75" BackgroundColor="#CECECE" /> 

                </Grid> 

            </effectsView:SfEffectsView> 

        </DataTemplate> 

    </sync:SfListView.SelectedItemTemplate> 

</sync:SfListView> 

 

EffectsViewBehavior: To apply the effects manually using SelectionChanged event. 

public class EffectsViewBehavior : Behavior<SfEffectsView> 

{ 

    #region Fields 

    SfEffectsView EffectsView; 

 

    #endregion 

 

    protected override void OnAttachedTo(SfEffectsView bindable) 

    { 

        EffectsView = bindable as SfEffectsView; 

        EffectsView.SelectionChanged += EffectsView_SelectionChanged; 

        EffectsView.AnimationCompleted += EffectsView_AnimationCompleted; 

 

        base.OnAttachedTo(bindable); 

    } 

 

    private void EffectsView_AnimationCompleted(object sender, EventArgs e) 

    { 

        var args = ((sender as SfEffectsView).BindingContext as BookInfo).TappedEventArgs; 

        App.Current.MainPage.Navigation.PushAsync(new NewPage()); 

    } 

 

    private void EffectsView_SelectionChanged(object sender, EventArgs e) 

    { 

        EffectsView.ApplyEffects(); 

    } 

} 

 

Create property in model class to get the ItemTappedEventArgs and assign the EventArgs in the ItemTapped event. 

Model: 

public ItemTappedEventArgs TappedEventArgs 

{ 

    get { return tappedEventArgs; } 

    set 

    { 

        tappedEventArgs = value; 

        OnPropertyChanged("TappedEventArgs"); 

    } 

} 

 

Behavior: 

private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 

{ 

    (e.ItemData as BookInfo).TappedEventArgs = e; 

} 

 

We have prepared a sample based on your requirement and attached in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1551741204027421 

 

You can refer the following document related to this requirement from the following link, 

KB link: https://www.syncfusion.com/kb/11031/how-to-use-effects-view-in-listview-sflistview-xamarin-forms 

UG link: https://help.syncfusion.com/xamarin/effects-view/events#selectionchanged-event 

 

Regards, 

Lakshmi Natarajan 

 

[Rayhane]

It was exactly my requirement. 

Thank you for your help ! 

[Lakshmi Natarajan]

Hi Randy, 

  

Thank you for the update. 

  

We are glad that our solution meets your requirement. Please let us know if you need any further update. As always we are happy to help you out. 

  

Regards, 

Lakshmi Natarajan