如何使用活动指示器，直到列表视图加载 Xamarin 窗体

Question

我正在从 Web 服务绑定listview，现在需要一些时间listview加载时间取决于互联网连接，我需要继续运行activity indicator直到加载listview。 这是我的代码

XAML

<ListView x:Name="ReportListView" ItemsSource="{Binding ReportList}"
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="9" HorizontalOptions="StartAndExpand" Orientation="Vertical" BackgroundColor="Lavender">
<Label Text="{Binding ReportName}" FontSize="Medium" WidthRequest="10000" TextColor="Blue" Style="{DynamicResource ListItemTextStyle}" />
</StackLayout
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ActivityIndicator HorizontalOptions="Center" VerticalOptions="Center" IsRunning="False" IsVisible="False" x:Name="activity"/>

我像这样工作，这绝对不正确

。.cs

activity.IsVisible = true;
activity.IsRunning = true;
wait.IsVisible = true;
progressControl.IsVisible = true;
ReportListView.IsVisible = false;
Task.Delay(5000);
BindingContext = new MainViewModel();
activity.IsVisible = false;
activity.IsRunning = false;
wait.IsVisible = false;
progressControl.IsVisible = false;
ReportListView.IsVisible = true;

使用此代码activity indicator运行 5 秒并消失，listview负载取决于网络连接。 如何在活动指示器一直运行到加载listview工作？

Answer 1

一种常见的方法是将ActivityIndicator的IsVisible属性绑定到视图模型的某些IsBusy或IsLoading属性。

XAML：

<ListView x:Name="ReportListView" ItemsSource="{Binding ReportList}">
...
</ListView>
<ActivityIndicator IsRunning="{Binding IsBusy}" IsVisible="{Binding IsBusy}" />

视图模型：

bool isBusy;
public bool IsBusy
{
get => isBusy; 
set 
{ 
isBusy = value; 
OnPropertyChanged(); 
}
}
async Task LoadItemsAsync()
{
try
{
IsBusy = true;
// Call your web service here
var items = await service.LoadSomthingAsync();
}
catch (Exception ex)
{
// Handle exception
}
finally
{
IsBusy = false;
}
}

在这种情况下，每次将IsBusy设置为true时，应用程序将显示一个加载指示器。

Answer 2

在 xaml 中，应将活动指示器的 IsRunning 属性绑定到列表视图

<ListView x:Name="ReportListView" ItemsSource="{Binding ReportList}"
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="9" HorizontalOptions="StartAndExpand" Orientation="Vertical" BackgroundColor="Lavender">
<Label Text="{Binding ReportName}" FontSize="Medium" WidthRequest="10000" TextColor="Blue" Style="{DynamicResource ListItemTextStyle}" />
</StackLayout
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ActivityIndicator HorizontalOptions="Center" VerticalOptions="Center" 
IsRunning="{Binding Source={x:Reference ReportListView}, Path=IsLoading}" 
x:Name="activity"/>

然后，在代码隐藏中，在初始化时，将IsVisible、IsEnabled和IsRunning设置为 true

For example
public ListViewPage()
{
InitializeComponent();
activity.IsVisible = true;
activity.IsRunning = true;
activity.IsEnabled = true;
}

然后，您可以处理隐藏您的活动指示器，如下所示

protected override void OnAppearing()
{
ReportListView.ItemsSource = //your items;
reportIndicator.IsVisible = false;
reportIndicator.IsRunning = false;
reportIndicator.IsEnabled = false;
base.OnAppearing();            
}