如何覆盖XAMARIN.FORMS的加载视图 [英] How to Overlay Loading View for XAMARIN.FORMS

问题描述

选择任何列表视图时如何使用叠加活动指示器.

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>

推荐答案

假设您没有使用MVVM(看起来不像)，而您使用的是Page，则相当简单

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

将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>

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

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").

您可以在此处，Page当页面忙时，即可以检索数据或其他内容时，公开您可以设置的IsBusy属性.我已经将ActivityIndicator的IsRunning属性绑定到IsBusy，只要Page表示忙时，就会显示ActivityIndicator.

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.

例如，从代码背后，设置IsBusy，方法是从async方法检索数据

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;
}

编辑

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

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

您可以叠加一个透明的BoxView

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}}" />

将此内容放在您的ListView和ActivityIndicator之间，它应该拦截ListView将会收到的所有事件.仅在显示ActivityIndicator时显示.

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.

这篇关于如何覆盖XAMARIN.FORMS的加载视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！