Overlay Loading View for XAMARIN.FORMS

Almost every mobile app has to display some kind of a loading sequence once in a while through the application life cycle.

It’s no surprise that many of you starting with Xamarin.Forms looking for a loading panel solution and often ending up with Xamarin’s activity indicator. In this guide I would like to show you an activity indicator with the overlay functionality.

When I first started my journey with Xamarin.Forms, I knew that it can be a challenge even for an experienced XAML coder like me.

Such an experience often helps in understanding the essence of design techniques in Xamarin.Forms. However, it may also cause problems.

If you have a WPF background like me, you may end up trying to solve problems the old way. However, your old habits may lead you to bigger issues. For example, if you have a collection of data to present in a list view, choosing the most efficient layout view for your data template isn’t always a straightforward job.

That’s why Xamarin Api Guide should be your solid reference before you start coding a layout in Xamarin.Forms. It’s worth your time. By the way a kudo goes to Xamarin team for the official Xamarin Api guide. It covers any topic one could possibly imagine.

If you’re a Xamarin.Forms fan and you like to code XAML in general then you came to the right place.

Let’s get our hands dirty by creating an overlay loading panel in Xamarin.Forms.

After an online research I found out that there is already a solution in the official Xamarin guide. Unfortunately, it is intended only for Xamarin.iOS. In this guide you’ll find a complete Xamarin.Forms cross-platform solution.

The feature we’re going to create will work on iOS, Android and Windows phone. First, we need a control template which will be the base for our view.

And now let’s create a content view which we will use later in our target page.

public class Loading : ContentView
{
        private const double OpacityLevelWhenOverlayed = 0.3;
        private const int OpacityLevelWhenFullyVisible = 1;
 
                // This can be any view type you like just make sure it is the type you use in your target page
        private static readonly VisualElement DefaultGrid = new Grid { AutomationId = "defaultGrid"};
        public static readonly BindableProperty MainPanelProperty = BindableProperty.Create("MainPanel", typeof(VisualElement), typeof(Page), DefaultGrid);
 
        public VisualElement MainPanel => (VisualElement)GetValue(MainPanelProperty);
 
        public Loading()
        {
            ControlTemplate = (ControlTemplate)Application.Current.Resources.FirstOrDefault(x => x.Key == "LoadingControlTemplate").Value;
 
            PropertyChanged += (s, e) =>
            {
                if (e.PropertyName == "IsVisible")
                {
                    MainPanel.Opacity = IsVisible ? OpacityLevelWhenOverlayed : OpacityLevelWhenFullyVisible;
 
                    if (Application.Current.MainPage != null)
                    {
                        Application.Current.MainPage.IsEnabled = !IsVisible;
                    }
                }
            };
                }
}

We are almost there. Next we just have to use our view in the target page.

!--LOADING PANEL-->

                

Wrapping up

IsBusyIndicator property let us manipulate visibility property of the activity indicator. So before you actually see our solution working you have to set a proper value in your view model. If you are using MVVM otherwise use it directly in your codebehind.

As you have already noticed, we used a ContentView as a base class for our loading panel. ContentView can have any form you like and most importantly, it has a controltemplate property. I often like to use a combination of control template and contentview to create complex Xamarin.Forms views. I hope you create more awesome views with this technique and get back to me.