Activity Indicator does not change visible property and show whole page

Question

I'm developing a xamarin forms app and I wanted to add to show "loading" states. But I'm facing that problem right now. When I open that page this bottom stacklayout shown but it never change anything and not show the my main page.

XAML :

ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:İdaServis.ViewModels"
         x:Class="İdaServis.View.SamplePage">

<ContentPage.BindingContext>
    <local:SamplePageViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content >
    <StackLayout >
        <Label Text="Sample Page"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />

       
    </StackLayout>
</ContentPage.Content>

<StackLayout IsVisible="{Binding Isloading}"   VerticalOptions="CenterAndExpand" HorizontalOptions="Center" >
    <Label Text="Yükleniyor..." TextColor="Black" FontSize="Medium" />

    <ActivityIndicator  Color="SpringGreen"  IsRunning="True" />
</StackLayout>

I write viewodel like this:

public class SamplePageViewModel : INotifyPropertyChanged
{

    private bool _isloading, showPage;
    
    public SamplePageViewModel ()
    {
        _isloading = true;
        showPage = false;
        manageLoadings();
    }

    private async void manageLoadings()
    {
        await Task.Delay(2500);
        _isloading = false;
        showPage = true;
        OnPropertyChanged();

    }

    public bool Isloading { get => _isloading; set { _isloading = value; OnPropertyChanged(); } }

    public bool ShowPage { get => showPage; set { showPage = value; OnPropertyChanged(); } }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Answer 1

I've found very simple method to achive this "loading popup". I'm going to use UserDialogs nuget package.

To show pop up :

UserDialogs.Instance.ShowLoading("Loading...");

To hide pop up :

UserDialogs.Instance.HideLoading();

You can use this code before api calls then hide it when you get result.

Answer 2

I think it has to do with the IsRunning property

<ActivityIndicator IsRunning="true" />

Also check the documentation https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/activityindicator

Answer 3

You did not set the right OnPropertyChanged method.

First, you need to set the name for the OnPropertyChanged method like this OnPropertyChanged("Isloading");.

Here is the right code you can refer to:

  public bool Isloading { get => _isloading; set { _isloading = value; OnPropertyChanged("Isloading"); } }

  public bool ShowPage { get => showPage; set { showPage = value; OnPropertyChanged("ShowPage"); } }

  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }

Second, you should modify the Isloading instead of the _isloading, also the ShowPage.

Here is the right code:

  private async void manageLoadings()
  {
      await Task.Delay(2500);
      Isloading = false;
      ShowPage = true;
      OnPropertyChanged();

  }

hen I open that page this bottom stacklayout shown but it never change anything and not show the my main page.

You need to put all the StackLayouts in the ContentPage.Content and do not put the elements outside the ContentPage.Content. The ContentPage can only be set once, if you set the elements out side the ContentPage.Content, it will cover the elements in the old ContentPage.Content.

Here is the code you can refer to:

  <ContentPage.Content >

      <StackLayout>
          <StackLayout IsVisible="{Binding ShowPage}">
              <Label Text="Sample Page"
                 VerticalOptions="CenterAndExpand" 
                 HorizontalOptions="CenterAndExpand" />
              <Button Clicked="Button_Clicked"></Button>
          </StackLayout>
          <StackLayout IsVisible="{Binding Isloading}"   VerticalOptions="CenterAndExpand" HorizontalOptions="Center" >
              <Label Text="Yükleniyor..." TextColor="Black" FontSize="Medium" />

              <ActivityIndicator  Color="SpringGreen"  IsRunning="True" />
          </StackLayout>
       </StackLayout> 
      
  </ContentPage.Content>