Xamarin Forms Shimmer’s using Xamarin.Forms.Skeleton

Skeleton text is a popular strategy that help to load a content properly by rendering a blank placeholder that roughly matches the size of the expected content. This was made popular by Facebook, but is now used on many popular apps and websites. Today we are going to implement shimmer’s inside Xamarin forms APP.
Plugin Used : Xamarin.Forms.Skeleton (Add it inside all the project’s : Shared ,  Android and iOS)

Step 1 :
At first inside our MainPage.xaml we are going to create a list view :

Step 2  :
We are going to wrap the content’s inside the item template :

Full Source Code of MainPage.xaml :

Step 3 : (MainPage.xaml.cs)
Then we are going to bind our View With View Model’s  :

Step 4 : (MainPageViewModel.cs)
Then we are going to grab some list of fake product’s and bind it to the list. After that we are going to give a delay of (3000 m.s) which is 3 sec. Which is going to display a skeleton of content’s for 3 second’s. Then after 3 sec our content’s that we get from the API are going to be displayed.
So Full source code :

Step 5 : (Products.cs)
I have created a folder named Model’s and placed Product.cs class inside it. This class is getting called in order to create observable collection of Product’s to be delivered to the List.

Show up the code :

Full Video Implementation : https://www.youtube.com/watch?v=dRDnGKpdZLY
Output’s  :

Before : 

After : 

1,752 total views, 3 views today

Leave a Reply