How to Overlay Loading View for XAMARIN.FORMS

Question

How to use overlay Activity indicator when select any list view.

<ListView x:Name="lstView" ItemsSource="{Binding Items}"
        ItemTapped="Handle_ItemTapped"

        ItemSelected="Handle_ItemSelected">
     <ListView.Header>
         <Label Text="Store Allocation" BackgroundColor="White" TextColor="Black" FontAttributes="Bold" HorizontalOptions="Fill" HorizontalTextAlignment="Center" />

     </ListView.Header>
     <ListView.ItemTemplate>
         <DataTemplate>
             <TextCell Text="{Binding Title}"  Height="200" Detail="{Binding Detail}" DetailColor="Black" TextColor="Red"  />
        </DataTemplate>
    </ListView.ItemTemplate>

</ListView>

Answer 1

Assuming you are not using MVVM (does not look like) and you are on a Page it's fairly easy

Put an ActivityIndicator as well as the ListView in an AbsoluteLayout

<ContentPage x:Name="Page" ...>
    <AbsoluteLayout VerticalOptions="Fill">
        <ListView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
            <!-- ... -->
        </ListView>
        <ActivityIndicator IsRunning="{Binding Path=IsBusy, Source={x:Reference Page}}" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,.5,-1,-1" />
    </AbsoluteLayout>
</ContentPage>

I've added an AbsoluteLayout wrapping your ListView. The ListView is set up to take the whole area of the AbsoluteLayout. Furthermore I've added an ActivityIndicator on top, that is centered and has its default size (AbsoluteLayout.LayoutFlags="PositionProportional" and AbsoluteLayout.LayoutBounds=".5,.5,-1,-1").

As you can see here, Page exposes the IsBusy property, which you can set, when the page is busy, i.e. retrieving data or whatever. I've bound the IsRunning property of the ActivityIndicator to IsBusy, that the ActivityIndicator shows up whenever the Page indicates that it's busy.

From your code-behind, set IsBusy for example from an async method that retrieves your data

private async void Update()
{
    IsBusy = true;
    this.Data = await GetData();
    IsBusy = false;
}

EDIT

Since you wanted to know, how to disable the ListView in the background:

You could overlay a tranparent BoxView

<BoxView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"
    BackgroundColor="Transparent"
    InputTransparent="false"
    IsVisible="{Binding Path=IsBusy, Source={x:Reference Page}}" />

Put this between your ListView and your ActivityIndicator and it should intercept all events the ListView would receive otherwise. Is is shown only when the ActivityIndicator is shown.