Is it possible to integrate SfEffects.Scale and SfEffects.Selection in SfListView

[paul aragones]

Hello, 

Just wondering if this is possible in SfListView when I selected an Item in SfListView? Thanks

Paul. 

[Chandrasekar Sampathkumar]

Hi Paul, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Using EffectsView inside ListView” from our end. We would like to let you know that you can achieve your requirement by adding EffectsView inside ItemTemplate of ListView.  

 

We have created a sample and attached the tested sample for your reference. You can download the same from the following link,  

Sample Link : SfListViewSample 

 

We hope this helps. Please let us know, if you would require any further assistance. 

 

Regards, 

Chandrasekar Sampathkumar 

 

[paul aragones]

Hello, 

Thanks a lot for the reply. I tried to integrate this example but unfortunately it doesn't work on what I would need:

Basically, I needed a 

1. Single touch option

2. I have an image on the list

Please see my code below:

           <syncListView:SfListView

                Padding="15,0"

                AutoFitMode="DynamicHeight"

                ItemsSource="{Binding Palettes}"

                SelectedItem="{Binding SelectedPalette}"

                SelectionMode="Single">

                <syncListView:SfListView.LayoutManager>

                    <syncListView:GridLayout SpanCount="3" />

                </syncListView:SfListView.LayoutManager>

                <syncListView:SfListView.SelectedItemTemplate>

                    <DataTemplate>

                        <syncEffectsView:SfEffectsView

                            FadeOutRipple="True"

                            IsSelected="True"

                            RippleAnimationDuration="1000"

                            ScaleFactor="0.45"

                            TouchDownEffects="Scale">

                            <StackLayout Spacing="0">

                            <Image

                                Aspect="AspectFit"

                                HeightRequest="71"

                                Source="{Binding SelectedPalette.Image}"

                                WidthRequest="100" />

                            <Label

                                HeightRequest="35"

                                HorizontalTextAlignment="Center"

                                Text="{Binding SelectedPalette.Title}"

                                TextColor="Black"

                                VerticalTextAlignment="Center" />

                        </StackLayout>

                        </syncEffectsView:SfEffectsView>

                    </DataTemplate>

                </syncListView:SfListView.SelectedItemTemplate>

                <syncListView:SfListView.ItemTemplate>

                    <DataTemplate>

                        <ContentView Padding="5" cm:View.Model="{Binding}" />

                    </DataTemplate>

                </syncListView:SfListView.ItemTemplate>

            </syncListView:SfListView>

What happens here is that i wanted to display the following when the item has been selected:

1. Scale down to 0.85

2. selected highlighted color. 

But I only see the highlighted color and not the scaling. 

Thanks in advance.

[Chandrasekar Sampathkumar]

Hi Paul, 

 

Thank you for the update. 

 

We have checked the reported query from our end. We would like to let you know that we are currently working on it and provide you further details on February 21, 2020. We appreciate your patience until then. 

 

Regards, 

Chandrasekar Sampathkumar 

 

[Jayaleshwari N]

Hi Paul, 

 

We have checked your reported query “Scale effect is not applied to the Selected item” form our end. We are loading SelectedItemTemaplate content to ListViewItem when tap on the item. As the Scale is rendering property and the effect is not applied to the selected item since effects will be applied when you interact the view. You can achieve your requirement by appling the effect programmatically in SelectionChanged event of SfEffectsView. 

 

Code snippet XAML: Setting IsSelected to true to raise the SelectionChanged event. 

 

<syncEffectsView:SfEffectsView 

        SelectionColor="Green" 

        FadeOutRipple="True" 

        IsSelected="True" 

        RippleAnimationDuration="1000" 

        ScaleFactor="0.45" 

        TouchDownEffects="Scale" 

        SelectionChanged="SfEffectsView_SelectionChanged" 

        /> 

 

Code snippet C#: Handling SelectionChanged event to apply the effect programmatically . 

 

private void SfEffectsView_SelectionChanged(object sender, EventArgs e) 

{ 

    Device.BeginInvokeOnMainThread(() => 

    { 

        var effectsView = sender as SfEffectsView; 

        effectsView.ScaleFactor = 0.45; 

        effectsView.ApplyEffects(SfEffects.Scale); 

    }); 

} 

 

You can refer the following User Guide documentation to know more about the events and methods available in SfEffectsView. 

Events: https://help.syncfusion.com/xamarin/effects-view/events  

Methods: https://help.syncfusion.com/xamarin/effects-view/methods  

 

Please let us know if this helps. 

  

Regards, 

Jayaleshwari N.