Xamarin.Forms - How to overlay an ActivityIndicator in the middle of a StackLayout programmatically

Question

I want to overlay my ActivityIndicator in the middle of my form but I\'m not entirely sure how I can go about this, I assume I need to wrap my stack layout in a relative lay

Answer 1

There's an acceptable answer but I wrote an extensions for all contentpage and think it could be nice.

public static void AddProgressDisplay (this ContentPage page)
{
    var content = page.Content;

    var grid = new Grid();
    grid.Children.Add(content);
    var gridProgress = new Grid { BackgroundColor = Color.FromHex("#64FFE0B2"), Padding = new Thickness(50) };
    gridProgress.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
    gridProgress.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
    gridProgress.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
    gridProgress.SetBinding(VisualElement.IsVisibleProperty, "IsWorking");
    var activity = new ActivityIndicator
    {
        IsEnabled = true,
        IsVisible = true,
        HorizontalOptions = LayoutOptions.FillAndExpand,
        IsRunning = true
    };
    gridProgress.Children.Add(activity, 0, 1);
    grid.Children.Add(gridProgress);
    page.Content = grid;
}

Remark: IsWorking must be member of ViewModel (implemented INotifyPropertyChanged) property.

Call extension page ctor last statement.

this.AddProgressDisplay();