如何覆盖XAMARIN.FORMS的加载视图

Question

选择任何列表视图时如何使用覆盖活动指示器。

<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

假设您没有使用MVVM（看起来不像），并且您在Page这相当简单

将ActivityIndicator和ListView放在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>

我添加了一个包装您的ListView的AbsoluteLayout 。 ListView设置为占据AbsoluteLayout的整个区域。 此外，我在顶部添加了一个ActivityIndicator ，该指示器居中且具有默认大小（ AbsoluteLayout.LayoutFlags="PositionProportional"和AbsoluteLayout.LayoutBounds=".5,.5,-1,-1" ）。

如您在此处看到的，当页面忙时， Page公开了IsBusy属性，您可以设置该属性，即检索数据或其他内容。 我已经将ActivityIndicator的IsRunning属性绑定到IsBusy ，每当Page指示忙时，该ActivityIndicator显示出来。

在您的后台代码中，例如从检索您的数据的async方法中设置IsBusy

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

编辑

既然您想知道，如何在后台禁用ListView ：

您可以叠加一个BoxView

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

将其放在ListView和ActivityIndicator ，它应拦截ListView否则会收到的所有事件。 仅在显示ActivityIndicator显示。