We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use effects view in ListView (SfListView) Xamarin.Forms


You can integrate the SfEffects in Xamarin.forms SfListView by loading the SfEffectsView as the content of ItemTemplate or SelectedItemTemplate.

Xaml: SfEffectsView added as the content of SelectedItemplate with Scale and Selection effects.

<sync:SfListView x:Name="listView"
                AutoFitMode="Height" 
                SelectionMode="Single"
                ItemsSource="{Binding BookInfo}">
    <sync:SfListView.SelectedItemTemplate>
        <DataTemplate>
            <Grid>
                <effects:SfEffectsView x:Name="effectsView"
                                       SelectionColor="LightSeaGreen"
                                       FadeOutRipple="True"
                                       RippleAnimationDuration="1000"
                                       IsSelected="True">
                    <effects:SfEffectsView.Behaviors>
                        <local:Behavior/>
                    </effects:SfEffectsView.Behaviors>
                    <StackLayout>
                        <Label Text="{Binding BookName}" FontSize="21"
                               FontAttributes="Bold"/>
                        <Label Grid.Row="1" Text="{Binding BookDescription}"
                               FontSize="15"/>
                    </StackLayout>
                </effects:SfEffectsView>
            </Grid>
        </DataTemplate>
    </sync:SfListView.SelectedItemTemplate>
</sync:SfListView>

 

C#: Programmatically apply effects to the SelectedItem.

 

public class Behavior : Behavior<SfEffectsView>
{
    protected override void OnAttachedTo(SfEffectsView bindable)
    {
        bindable.SelectionChanged += Bindable_SelectionChanged;
        base.OnAttachedTo(bindable);
    }
 
    private void Bindable_SelectionChanged(object sender, EventArgs e)
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            var effectsView = sender as SfEffectsView;
            effectsView.ScaleFactor = 0.85;
            effectsView.ApplyEffects(SfEffects.Scale);
        });
    }
    protected override void OnDetachingFrom(SfEffectsView bindable)
    {
        bindable.SelectionChanged -= Bindable_SelectionChanged;
        base.OnDetachingFrom(bindable);
    }
}

 

Output

 

EffectsView

 

Download the sample from GitHub.

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Oliver Neis
Mar 30, 2021

Hi,

can we show the animation even if we select the items in codeBehind by adding them to listView? --> listView.SelectedItems.Add(item); The animation will not show in my case. Only the color and style changes are setted.

Thanks!

Maria

Reply
Sridevi Sivakumar [Syncfusion]
Mar 31, 2021

Hi Oliver Neis,

We have checked the reported query and we would like to inform you that the effect is applying properly when we selected the item through code behind.

We have prepared a sample and video for your requirement, please have a sample from the below link

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

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video133525592

Regards, Sridevi S.

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile