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

You need to use absolute layout. Follow the following hierarchy of the layout:

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">

        <!--< Your control design goes here >-->

    </StackLayout>

    <StackLayout IsVisible="{Binding IsBusy}" Padding="12"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">

        <ActivityIndicator IsRunning="{Binding IsBusy}" Color ="#80000000"/>

        <Label Text="Loading..." HorizontalOptions="Center" TextColor="White"/>

    </StackLayout>

</AbsoluteLayout>

With this the activity indicator will be overlaid in the middle of a stack layout.