如何覆盖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, ie 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.