Different Image in ItemTemplate and SelectedItemTemplate causing flickering & delay in loading images and styles.

[Uday Bhaskar]

I have normal Image and Hover Image and also different Text Color in ItemTemplate and SelectedItemTemplate. But when Selected the templates are not loading smoothly, I can see lot of flickering and delay in applying the intended template. Its not a proper User Experience. What can we do to have smooth experience of Item Selections. FYI., Since this is a listview for menu, On Selection I am navigating to a new content Page.

Below is my listview code.

<syncfusion:SfListView

                    x:Name="listView"

                    HorizontalOptions="CenterAndExpand" IsScrollBarVisible="False" AutoFitMode="None"

                    ItemSpacing="1" ItemSize="100"

                    ItemsSource="{Binding UserMenu}"

                    SelectedItem="{Binding SelectedMenu, Mode=TwoWay}"

                    SelectionGesture="Tap"

                    SelectionMode="Single"

                    VerticalOptions="CenterAndExpand">

                    <syncfusion:SfListView.LayoutManager>

                        <syncfusion:GridLayout SpanCount="3" />

                    </syncfusion:SfListView.LayoutManager>

                    <syncfusion:SfListView.ItemTemplate>

                        <DataTemplate>

                            <Frame

                                Padding="5"

                                CornerRadius="3"

                                HasShadow="True">

                                <Grid RowSpacing="3">

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto" />

                                        <RowDefinition Height="Auto" />

                                    </Grid.RowDefinitions>

                                    <Image

                                        Grid.Row="0"

                                        Aspect="AspectFit"

                                        HorizontalOptions="Center"

                                        Source="{Binding MenuIcon}"

                                        VerticalOptions="Center" />

                                    <Label

                                        Grid.Row="1"

                                        Font="{StaticResource SmallFont}"

                                        FontAttributes="Bold"

                                        FontFamily="Roboto"

                                        HorizontalOptions="Center"

                                        HorizontalTextAlignment="Center"

                                        Text="{Binding DisplayName}"

                                        TextColor="#65696F"

                                        VerticalOptions="Center"

                                        VerticalTextAlignment="Center" />

                                </Grid>

                            </Frame>

                        </DataTemplate>

                    </syncfusion:SfListView.ItemTemplate>

                    <syncfusion:SfListView.SelectedItemTemplate>

                        <DataTemplate>

                            <Frame

                                Padding="5"

                                BackgroundColor="#eceff4"

                                CornerRadius="3"

                                HasShadow="True">

                                <Grid RowSpacing="3">

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto" />

                                        <RowDefinition Height="Auto" />

                                    </Grid.RowDefinitions>

                                    <Image

                                        Grid.Row="0"

                                        Aspect="AspectFit"

                                        HorizontalOptions="Center"

                                        Source="{Binding SelectedMenuIcon}"

                                        VerticalOptions="Center" />

                                    <Label

                                        Grid.Row="1"

                                        Font="{StaticResource SmallFont}"

                                        FontAttributes="Bold"

                                        FontFamily="Roboto"

                                        HorizontalOptions="Center"

                                        HorizontalTextAlignment="Center"

                                        Text="{Binding DisplayName}"

                                        TextColor="#731549"

                                        VerticalOptions="Center"

                                        VerticalTextAlignment="Center" />

                                </Grid>

                            </Frame>

                        </DataTemplate>

                    </syncfusion:SfListView.SelectedItemTemplate>

                    <syncfusion:SfListView.Behaviors>

                        <prismBehaviors:EventToCommandBehavior

                            Command="{Binding MenuItemTappedCommand}"

                            EventArgsConverter="{StaticResource sfSelectionChangedEventArgsConverter}"

                            EventName="ItemTapped" />

                    </syncfusion:SfListView.Behaviors>

                </syncfusion:SfListView>

[Dinesh Babu Yadav]

Hi Uday, 

 

Thank you for contacting Syncfusion Support. 

 

When the template is changed i.e., replacing the ItemTemplate by SelectedItemTemplate over the item at runtime when the selection is performed, it took few milliseconds(depends on platforms) to create the content from the SelectedItemTemplate in Xamarin framework when leads to flickering effect in the view. You can overcome this by customizing your data model and the view in the ItemTemplate property by using custom converters as like following code example. 

 

Code Example[XAML]: 

<ContentPage.Resources> 

        <ResourceDictionary> 

            <local:SelectionBoolToImageConverter x:Key="BoolToImageConverter"/> 

            <local:SelectionBoolToBackgroundColorConverter x:Key="BoolToBackgroundColorConverter"/> 

            <local:SelectionBoolToTextColorConverter x:Key="BoolToTextColorConverter"/> 

            <DataTemplate x:Name="ItemTemplate"  x:Key="ItemTemplate"> 

                <Grid x:Name="grid" RowSpacing="0" ColumnSpacing="0" 

                      BackgroundColor="{Binding Path=IsSelected, Converter={StaticResource BoolToBackgroundColorConverter}}"> 

… 

                        <Grid Grid.Column="1" 

                  RowSpacing="1" 

                  Padding="10,0,0,0" 

                  VerticalOptions="Center"> 

                            <Grid.RowDefinitions> 

                                <RowDefinition Height="*" /> 

                                <RowDefinition Height="*" /> 

                            </Grid.RowDefinitions> 

                            <Label LineBreakMode="NoWrap" 

                     TextColor="{Binding Path=IsSelected, Converter={StaticResource BoolToTextColorConverter}}" 

                     Text="{Binding SongTitle}"/> 

… 

                            </Grid> 

                        </Grid> 

                        <Image Grid.Column="2" 

                   Source="{Binding Path=IsSelected, Converter={StaticResource BoolToImageConverter}}"/> 

                    </Grid> 

                    <StackLayout Grid.Row="1" BackgroundColor="#E4E4E4" HeightRequest="1"/> 

                </Grid> 

            </DataTemplate> 

        </ResourceDictionary> 

</ContentPage.Resources> 

 

Code Example[C#]: 

…  

private void ListView_SelectionChanged(object sender, ItemSelectionChangedEventArgs e) 

{ 

  for (int i = 0; i < e.AddedItems.Count; i++) 

  { 

     var item = e.AddedItems[i]; 

     (item as MusicInfo).IsSelected = true; 

  } 

  for (int i = 0; i < e.RemovedItems.Count; i++) 

  { 

     var item = e.RemovedItems[i]; 

     (item as MusicInfo).IsSelected = false; 

  } 

} 

…  

public class SelectionBoolToImageConverter : IValueConverter 

{ 

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

  { 

     if ((bool)value) 

        return ImageSource.FromResource("CustomSelection.Images.Selected.png"); 

     else 

        return ImageSource.FromResource("CustomSelection.Images.NotSelected.png"); 

  } 

} 

 

public class SelectionBoolToBackgroundColorConverter : IValueConverter  

{ 

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

  { 

    if ((bool)value) 

        return Color.FromHex("#eceff4"); 

    else 

        return Color.Transparent; 

  } 

} 

 

public class SelectionBoolToTextColorConverter : IValueConverter  

{ 

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

  { 

     if ((bool)value) 

         return Color.FromHex("#731549"); 

     else 

         return Color.FromHex("#65696F"); 

  } 

} 

 

In the above code example, IsSelected property is maintained in the data model class and it is updated whenever the selection is performed in the SelectionChanging event. And, it is bind to the required view in the ItemTemplate property to listen the changes in the custom converters. 

 

For your reference, we have attached the sample and you can download it from the below link. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/137922/ze/CustomSelection-308034199  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav