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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use SfShimmer in Sflistview Itemtemplate?

Thread ID:

Created:

Updated:

Platform:

Replies:

148755 Nov 2,2019 04:45 AM UTC Dec 10,2019 01:35 PM UTC Xamarin.Forms 5
loading
Tags: SfShimmer
Emil
Asked On November 2, 2019 04:45 AM UTC

I dont see any example how to use sfshimmer with sflistview itemtemplate?

Rachel A [Syncfusion]
Replied On November 4, 2019 06:35 AM UTC

Hi Emil, 
 
Greetings from Syncfusion. 
 
We have prepared sample by loading shimmer inside list view item template and you can download it from the below link. 
 
 
Please let us know if you need any assistance. 
 
Thanks, 
Rachel. 


Emil
Replied On November 24, 2019 05:59 PM UTC

Your solutions is not helpful because i dont load the data one by one using for each loop. mostly people load data from remote or using sqlite.


Rachel A [Syncfusion]
Replied On November 26, 2019 12:45 PM UTC

Hi Emil, 
  
Query: I want to display shimmer before data is loaded and remove it once data is displayed. 
We have achieved your requirement, please find the modified sample and reference video. 
  
  
   
Thanks, 
Rachel. 


Emil
Replied On December 8, 2019 04:41 PM UTC

Hi Rachel,

this is also not working. in your sample, sfshimmer is showing after the data is loaded which makes no sense.
basically in the sample, MonkeysViewModel code below should be like below.      await Task.Delay(5000); is a simulation of sqlite call or webservice call which takes 5 secs, during this call shimmer needs to be shown and once MonkeysGrouped is filled, it should disappear. But sfShimmer is totally depends on ListView Itemsource, if Itemsource is not raised, sfshimmer will be never displayed. 

  protected async override void ViewIsAppearing(object sender, EventArgs e)
        {
            base.ViewIsAppearing(sender, e);

            if (isFirstTimeLoaded)
            {
                IsLoaded = false;

                await Task.Delay(5000);
                Monkeys = MonkeyHelper.Monkeys;
                MonkeysGrouped = MonkeyHelper.MonkeysGrouped;
                RaisePropertyChanged("MonkeysGrouped");
 
                IsLoaded = true;
                isFirstTimeLoaded = false;
            }
        }

Rachel A [Syncfusion]
Replied On December 10, 2019 01:35 PM UTC

Hi Emil, 
  
Sorry for the miscommunication. 
  
We have achieved your requirement by placing the StackLayout having SfShimmer above the SfListView and set the StackLayout opacity to zero once the ItemsSource collection is filled until then shimmer will be shown. Please find the modified code snippet and Sample. 
  
And, we have added the shimmer inside the StackLayout based on the application screen height. We have stopped to add the Shimmer once the StackLayout height exceeds the application screen height. You can change this condition in the OnAppearing method if you don’t need the full screen size. 
  
Code Snippet: 
  
MonkeysPage.xaml.cs: 
  
protected override void OnAppearing() 
{ 
            base.OnAppearing(); 
  
            SizeRequest customViewSize = GetCustomView().Measure(this.Width, this.Height, MeasureFlags.None); 
            var shimmerLayoutHeight = Math.Floor(App.ScreenHeight/ customViewSize.Request.Height); 
  
            for (int i = 0; i < shimmerLayoutHeight; i++) 
            { 
                SfShimmer shimmer = new SfShimmer() { WaveColor = Color.White }; 
                
                shimmer.CustomView = GetCustomView(); 
                shimmerLayout.Children.Add(shimmer); 
            } 
} 
  
  
private View GetCustomView() 
{ 
            Grid grid = new Grid() 
            { 
                HeightRequest = 100, 
                HorizontalOptions = LayoutOptions.Start, 
                Margin = new Thickness(20) 
            }; 
  
            SfBorder firstLabel = new SfBorder() 
            { 
                HeightRequest = 20, 
                WidthRequest = 180, 
                BorderWidth = 0, 
                BackgroundColor = Color.Gray 
            }; 
  
            SfBorder secondLabel = new SfBorder() 
            { 
                HeightRequest = 20, 
                WidthRequest = 180, 
                BorderWidth = 0, 
                BackgroundColor = Color.Gray 
            }; 
  
            StackLayout stack = new StackLayout() { Spacing = 10 }; 
            stack.Children.Add(firstLabel); 
            stack.Children.Add(secondLabel); 
            grid.Children.Add(stack); 
  
            return grid; 
        } 
 } 
  
  
  
  
public MonkeysPage() 
{ 
            InitializeComponent(); 
  
            shimmerLayout = new StackLayout() { BackgroundColor = Color.Transparent }; 
            shimmerLayout.SetBinding(StackLayout.IsVisibleProperty, new Binding() { Path = "IsLoaded", Converter = new BoolToInverseConverter()}); 
            contentGrid.Children.Add(shimmerLayout, 0, 0); 
} 
  
  
We have attached the modified sample, please download it form the below location. 
  
Sample: 
  
Please let us know whether the above solution will fulfil your requirement. 
 
Thanks, 
Rachel. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

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
Live Chat Icon