Animated imaged on selected item of SfListView

[Karro]

Hello,

I have a SfListView, its item templaet is DataTemplate which is a custom control of type ContentView. In the ContetView I have an image (checkbox image) that I want to  show/hide (per animation FadeIn or Out) when an item is selected in the SfListView.

I have seen some suggestions to add a boolean property e.g. IsSelected in my model and bind it to the visibility of the image, this works fine but how to add animations just before the visibilty changes from true to false and vise versa into this process? I have tried to do that in the OnPropertyChanged/PropertyChanging event of the image visibility but this is too late, at this point the value has already already been evaluated and the image is instantly visible/invisible so the animations won't be noticed.

Any ideas how to make this work in a MVVM friendly way?

I have attached a sample code to demonstrate the requirments.

Best regards

Attachment: App1_60a8459e.zip

[Lakshmi Natarajan]

Hi Mohammed, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Animated imaged on selected item of SfListView” from our side. We would like to inform you that you can achieve your requirement by using the Converters. Please refer to the following code snippets for animating the selected item, 

 

XAML: Bind converter to the IsEnabled property of the Image. 

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

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

             xmlns:converter="clr-namespace:App1.Helper" 

             x:Class="App1.Views.CustomControl"> 

    <ContentView.Resources> 

        <ResourceDictionary> 

            <converter:AnimateImage x:Key="AnimateImage"/> 

        </ResourceDictionary> 

    </ContentView.Resources> 

     

  <Frame HasShadow="True" 

         Padding="0" 

         BorderColor="Gray"> 

    <Grid HorizontalOptions="FillAndExpand" Margin="16"> 

      <Label HorizontalOptions="Start" VerticalOptions="Center" 

             Text="{Binding Name}" /> 

            <Image x:Name="image"  

             IsEnabled="{Binding IsSelected, Converter={StaticResource AnimateImage}, ConverterParameter={x:Reference image}}" 

             Source="iCheck.png" 

             HorizontalOptions="End" 

             VerticalOptions="Center" 

             WidthRequest="25"   

             HeightRequest="25" > 

            </Image> 

        </Grid> 

  </Frame> 

</ContentView> 

 

Converter: Animate the image based on IsSelected value. 

public class AnimateImage : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        var element = parameter as Image; 

        if ((bool)value) 

        { 

            element.Opacity = 0; 

            element.FadeTo(1, 2000, Easing.SinIn); 

            return true; 

        } 

        else 

        { 

            element.FadeTo(0, 2000, Easing.SinOut); 

            return false; 

        } 

    } 

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        throw new NotImplementedException(); 

    } 

} 

 

We have modified the shared sample and attached the sample and vide in the following link, 

SampleWithVideo: https://www.syncfusion.com/downloads/support/forum/164393/ze/App1123754999 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[Karro]

Thank you Lakshmi for the quick response.

I am afraid that your sample doesn't work as expected. When you scroll the list you will notice that the check image is shortly visible then starting to disappear. The converter is performing the animation here because the binding to IsSelected is re-evaluated when the sflistview recycles the items template. My purpose is to do the animation only when the user selects/unselects an item in the list.

I have attached a short .gif from your sample

Attachment: scroll_c2d1f579.zip

[Lakshmi Natarajan]

Hi Mohammed, 

 

Sorry for the inconvenience caused. 

 

We have checked the reported scenario “Animated imaged on selected item of SfListView” at our side. We would like to inform you that we could reproduce the reuse scenario at our side. Also, you can overcome the reported scenario by handling the animation using GestureRecognizer instead of the SelectionChanged. Please refer to the following code snippets to achieve your requirement, 

 

XAML: Add TapGestureRecognizer for the element loaded in the ItemTemplate. 

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

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

             x:Class="App1.Views.CustomControl"> 

  

        <Frame HasShadow="True" 

         Padding="0" 

         BorderColor="Gray"> 

            <Grid HorizontalOptions="FillAndExpand" Margin="16"> 

 

            <Grid.GestureRecognizers> 

                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/> 

            </Grid.GestureRecognizers> 

                 

                <Label HorizontalOptions="Start" VerticalOptions="Center" 

             Text="{Binding Name}" /> 

                <Image x:Name="image"  

             Source="iCheck.png" 

             IsVisible="{Binding IsSelected}" 

             HorizontalOptions="End" 

             VerticalOptions="Center" 

             WidthRequest="25"   

             HeightRequest="25" > 

                </Image> 

            </Grid> 

        </Frame> 

</ContentView> 

 

C#: Animate the Image and then update the IsSelected property. 

private async void TapGestureRecognizer_Tapped(object sender, EventArgs e) 

{ 

    if (!Item.IsSelected) 

    { 

        image.Opacity = 0; 

        image.FadeTo(1, 2000, Easing.SinIn); 

        Item.IsSelected = true; 

    } 

    else 

    { 

        await image.FadeTo(0, 2000, Easing.SinInOut); 

        Item.IsSelected = false; 

    } 

} 

 

We have attached the tested sample in the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/164393/ze/App1-174155078 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan