Skip to content
Published 2 June 2019

Hi everyone, recently i have developed a mobile application using Xamarin.Forms and in this application i had to load items in a subsection of my user interface but i have encountered problem was that, during the items loading i have used a full screen loading in view with an ActivityIndicator inside, and in the user experience it is not a good decision to freeze entire application instead of the concerned subsection, in the next i will show you how i resolved the problem using the EasyLoading package developed by Steven.

Let’s see

I will show you a demo application that show a list of employees in two cases with a full screen loading and subsection loading.

With full screen loading With localized loading

How work EasyLoading ?

EasyLoading has a simple concept, add an attached property called LoadingLayout.IsLoading on the parent container of the subsection you want and bind to your boolean property located in the ViewModel, every time the boolean property value is changed on true the loading content is shown and every time the value is changed to false the loading content is hidden.

How can you do it ?

The first step is to install the EasyLoading package developed by Steven Thewissen (https://github.com/sthewissen/Xamarin.Forms.EasyLoading)

Install-Package Xamarin.Forms.EasyLoading

Define the namespace in your XAML file like this

xmlns:el="clr-namespace:Xamarin.Forms.EasyLoading;assembly=Xamarin.Forms.EasyLoading"

After that, add LoadingLayout.IsLoading on your desired container like in the employees list demo application.

<Grid el:LoadingLayout.IsLoading="{Binding IsLoading}" BackgroundColor="White" Grid.Row="1">
           <el:LoadingLayout.LoadingTemplate>
               <DataTemplate>
                   <Grid BackgroundColor="White" Margin="0,150,0,0">
                       <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                           <ActivityIndicator Color="#1abc9c" IsRunning="{Binding IsLoading}" VerticalOptions="Center"/>
                           <Label Text="Loading..." FontSize="15" TextColor="Black" HorizontalOptions="Center" />
                       </StackLayout>
                   </Grid>
               </DataTemplate>
           </el:LoadingLayout.LoadingTemplate>

           <CollectionView ItemsSource="{Binding EmployeeList}">
               <CollectionView.ItemTemplate>
                   <DataTemplate>
                       <ContentView Padding="10">
                           <Frame HeightRequest="50"
                               IsClippedToBounds="True">
                               <StackLayout Orientation="Horizontal">
                                   <Label FontFamily="{StaticResource MaterialFontFamily}" VerticalOptions="Center" TextColor="CadetBlue" Text="&#xf004;" FontSize="35"/>
                                   <Label Text="{Binding Name}" TextColor="Black" FontAttributes="None" FontSize="18" VerticalOptions="Center"/>
                               </StackLayout>
                           </Frame>
                       </ContentView>
                   </DataTemplate>
               </CollectionView.ItemTemplate>
           </CollectionView>
       </Grid>

The good things with EasyLoading is that, you can do all you want and there is more properties

Property What it does Extra info
IsLoading Bind this to a property that indicates when to show/hide the loader.  
LoadingTemplate A data template that contains what is shown when loading. A DataTemplate object.
LoadingTemplateSelector A template selector to dynamically show a specific loader. A DataTemplateSelector object.
RepeatCount Repeats the LoadingTemplate by a given amount. Ideal to use to show a list of items loading.

Hope that this post was useful for you, to the next post !

 

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *