Creating a Common Loading Page for Xamarin Forms

A common pitfall I see in Xamarin Forms is adding a Loading page icon for every page. This is one of the problems that plagued the current Home Control Flex application. Instead of having to loading icon on each page you can crate a base page that has a loading screen on each. You can do this using the ContentPropertyAttribute on your base page as shown below.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LoadingPage"
x:Name="ContentPage">
<ContentPage.Content>
<AbsoluteLayout>
<ContentView Content="{Binding Source={x:Reference ContentPage},Path=MainContent}"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
</ContentView>
<!– Your Busy Indicator (Check out syncfusion's busy indicator) –>
<ContentView Content="{Binding Source={x:Reference ContentPage}, Path=LoadingView}"
IsVisible="{Binding Source={x:Reference ContentPage},Path=IsBusy}"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>

view raw
BaseContentPage.xaml
hosted with ❤ by GitHub

[ContentProperty(nameof(MainContent))]
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LoadingPage : ContentPage
{
public LoadingPage()
{
InitializeComponent();
}
public static readonly BindableProperty MainContentProperty =
BindableProperty.Create(nameof(MainContent), typeof(View), typeof(LoadingPage));
public static readonly BindableProperty LoadingContentProperty =
BindableProperty.Create(nameof(LoadingView), typeof(View), typeof(LoadingPage));
public View LoadingView
{
get => (View) GetValue(LoadingContentProperty);
set => SetValue(LoadingContentProperty, value);
}
public View MainContent
{
get { return (View) GetValue(MainContentProperty); }
set { SetValue(MainContentProperty, value); }
}
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
if (MainContent == null)
{
return;
}
SetInheritedBindingContext(MainContent, BindingContext);
}
}

One thought on “Creating a Common Loading Page for Xamarin Forms

Leave a Reply