1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfShimmer sample with Xamarin CollectionView

SfShimmer sample with Xamarin CollectionView

Hi

I would like to use the SFShimmer control all over the app especially when we load list of items.

We use the xamarin collectionView all over and looking at various examples I am not sure how the shimmer control should be used when using a collectionView.

Would it be possible to load an example on how to use the SFShimmer control with a collection view or point me to a blog or article. We use xaml no code behind.

Many thanks



11 Replies
ET Eswaran Thirugnanasambandam Syncfusion Team August 26, 2021 03:21 PM UTC

Hi Mobileguy, 
 
Thanks for contacting Syncfusion support. 
 
Based on your requirement we have prepared a sample by loading shimmer inside the CollectionView data template and you can download it from the below link.  
  
  
Please let us know if you need any assistance.  
  
Regards, 
Eswaran 


MO mobileguy August 27, 2021 06:41 AM UTC

Hi 

thank you very much for your sample .Perfect!


ET Eswaran Thirugnanasambandam Syncfusion Team August 27, 2021 02:08 PM UTC

Hi Mobileguy, 
 
Thanks for your update, 
 
Let us know if you need further assistance. 
 
Regards, 
Eswaran 


MO mobileguy September 7, 2021 08:52 AM UTC

Hi  Eswaran ,

Thanks for the sample and works perfectly however when I try without hardcoding the "IsActive" with 5 seconds but actually setting it to either true of false in the call , the shimmer stays loaded all the time,


I have attached a small sample (just android) and you can see yourself?

On 1 page the shimmer does not load at all , and on the other the shimmer despite being set to false is still there.

Am I missing the obvious , the "IsActive" should be used to switch on or off


Many thanks



Attachment: ShimmerCol_b3c4d4e9.zip

ET Eswaran Thirugnanasambandam Syncfusion Team September 8, 2021 01:50 PM UTC

Hi Mobileguy,  
  
Thanks for your update. 
 
We checked the reported problems with the provided sample, and both are sample level problems. 
 
Query 1: Despite being set to false is still there  
It is due to the IsActive property is bounded wrongly in the sample, the IsActive property is not a model property. So, we can’t bind it directly in the data template. This problem can be resolved by defining the source of binding as collection view as mentioned in the below code snippet.  
 
[Xaml] 
<shimmer:SfShimmer x:Name="shimmer"  
                   VerticalOptions="Fill"  
                   IsActive="{Binding Path=BindingContext.IsActive, Source={x:Reference CollectionView}}"  > 
 
Query 2: The shimmer does not load at all 
 
There is no need to assign the view model to DataType while using compile binding. As a result, eliminating the code below fixes the problem.   
xmlns:viewModels="clr-namespace:ShimmerCol.ViewModels;assembly=ShimmerCol" 
x:DataType="viewModels:ShimmerCollectionViewPageViewModel" 
  
We have modified the sample to resolve both the issues and please get the sample from the below link. 
 
 
Please let us know if you need any further assistance.  
  
Regards, 
Eswaran 


MO mobileguy September 9, 2021 01:38 PM UTC

hi Eswaran,

thank you so much for your sample and clarification.

The one thing I dont get it is why we need "  Device.StartTimer(TimeSpan.FromSeconds" unless I understand it wrongly we are actually hardcoding how long we want the shimmer to last

I was expecting the shimmer to start when Active=true and ending with Active=false but without using any timer!

Some calls it might take a split second others 2 secs others 3 seconds, hence I was expecting the IsActive to act like the "IsBusy" flag if you like


Am I missing something here?

thanks again for wonderful support





ET Eswaran Thirugnanasambandam Syncfusion Team September 10, 2021 05:31 AM UTC

Hi Mobileguy,  
  
Thanks for your update. 
 
When checking the provided sample, the data for the collection view is loaded relatively early (within 1 second). So, we can’t able to see the shimmer animation when loading the page. That’s why we have introduced some delays to show shimmer animation, before changing the IsActive property to false. 
 
If the application takes some time to load the data, then there is no need to impose a delay. We can directly set the IsActive property to True or False based on the data loaded. 
 
Regards, 
Eswaran. 


MO mobileguy September 10, 2021 07:20 AM UTC

Hi there,

thanks for your reply  , that makes perfect sense.

It is not my intention to drag this thread and grateful that you answer but to put to the test I simply added 

an await task.delay(5000) at the top the method and removed the Device.StartTimer  but the shimmer didnt load.


Regards

mobileguy



ET Eswaran Thirugnanasambandam Syncfusion Team September 14, 2021 08:16 AM UTC

Hi Mobileguy 
 
Thanks for your update, 
 
We checked the reported problem “The shimmer animation is not visible when using Task.Delay” and we would like to inform you that, the shimmer is placed inside the collection view’s ItemTemplate. So, the shimmer control will be initialized only after the collection view ItemsSource is updated. But in the provided sample, the ItemsSource properly gets updated only after the provided Delay. So, the shimmer control is not initialized and its animation not showing when the page is loaded. 
 
The shimmer animation can be made visible if we use Device.StartTimer in the finally method as provided in the last update. 
 
Regards, 
Eswaran 


MO mobileguy September 21, 2021 04:32 AM UTC

Hi Eswaran,

thank you for your reply.Unless I totally misunderstood the concept of the shimmer control, I think the current implementation is flawed, let me explain why.

In Xamarin as you know we have a familiar concept of "IsBusy" now it's typical that when you perform an action/call at the beginning of your method you declare "IsBusy=true" and when done becomes "IsBusy=False"

Using this concept above I was expecting the shimmer control to adhere to this rule and therefore the "IsActive" flag was actually dictating the showing of the shimmer control in the same way as "IsBusy" works with other controls.

From what you are saying only when the ItemsSource is updated the shimmer control comes into play.


Given what you said and my understanding I truly dont see how this control can actually work in a real world application.


Many thanks for your time.






VR Vignesh Ramesh Syncfusion Team September 21, 2021 02:53 PM UTC

Hi Mobileguy 
 
When the data of the item is delayed, the above approach of setting shimmer view to the collection view's item will be effective. 
 
However, if your requirement is to display the shimmer view before the collection view of ItemsSource is generated, you can achieve it by placing the CollectionView as the Content of Shimmer and set CustomView of Shimmer similar to the item design which are to be loaded in CollectionView. You can disable the  IsActive property, once the ItemsSource of the CollectionView is generated. 
 
Please refer the below User Guide links to know more details about Content and CustomView support of Shimmer control. 
 
Please find the modified sample and tested video from the below link. 
 
 
 
Please check the sample and let us know if you need any further assistance.  
  
Regards, 
Vignesh Ramesh.

Loader.
Up arrow icon