CODEWITHSUNDEEP
c#xamarinxamarin.forms
waqas waqas
waqas waqas

Reputation: 237

how to work with activity indicator until listview loaded xamarin form

I am binding listview from web service, now some time listview take time to load depend on internet connection, i need activity indicator keep running until listview is load. here is my code

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

i am working like this which is absolutely not correct

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

with this code activity indicator run for 5 sec and disappear and listview load depends on network connection. How can i work where activity indicator keep running until listview load?

Upvotes: 0

Views: 5971

Answers (2)

Sayo Komolafe
Sayo Komolafe

Reputation: 1008

In your xaml, you should bind the IsRunning property of your ActivityIndicator to your listview

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

Then, in your code behind, on initialization, set the IsVisible, IsEnabled and IsRunning to true

For example

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

You can then handle hiding your activityIndicator as below

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

        base.OnAppearing();            
    }

Upvotes: 0

Valeriy Kovalenko
Valeriy Kovalenko

Reputation: 165

A common approach is to bind the IsVisible property of the ActivityIndicator to some IsBusy or IsLoading property of your view model.

XAML:

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

ViewModel:

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

In this case, each time when you set IsBusy to true, the app will show a loading indicator.

Upvotes: 3

Related Questions