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
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to use SfShimmer in Sflistview Itemtemplate?

How to use SfShimmer in Sflistview Itemtemplate?

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

7 Replies
RA Rachel A Syncfusion Team 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. 


EM Emil 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.


RA Rachel A Syncfusion Team 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. 


EM Emil 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;
            }
        }

RA Rachel A Syncfusion Team 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. 


OB Obulor August 15, 2021 08:19 AM UTC

Hi,

I am also looking for implementations samples of sfshimmer in sflistview, it appears my account does not have permission to download the attached zip file.


ET Eswaran Thirugnanasambandam Syncfusion Team August 16, 2021 09:37 AM UTC

Hi Obulor, 
 
Thanks for your update.  
 
Please get the sample from the below link. 
 
 
Regards, 
Eswaran 


Loader.
Up arrow icon