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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With