Xamarin forms Activity Indicator Not Showing on Button click Even when Binding is true

Question

I have a Activity Indicator and have no issues with how it looks or anything like that, i just can't get it to to display on the button click.

There's a Lengthy Process that i need to go threw when Checking items out on the cart.

The Method Structure:

Button Clicked => Api Calls 
               => await IsinStock() 
               => Fetch Products 
               => await SingleCheck() || await VariableCheck() 
               => No Errors => AddOrder || Errors Display Error

My Indicators are being set to Active before API calls and Ends after checks are complete and it returns to add or show errors.

But it's just not displaying.

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
              xmlns:o="clr-namespace:Octane.Xamarin.Forms.VideoPlayer;assembly=Octane.Xamarin.Forms.VideoPlayer"
             xmlns:local="clr-namespace:Ecombeta"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             x:Class="Ecombeta.Views.Cart">
    <ContentPage.Content>
        <AbsoluteLayout>
            <Grid
                RowSpacing="0"
                AbsoluteLayout.LayoutFlags="All"
                AbsoluteLayout.LayoutBounds="0,0,1,1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <!--My Beautiful Ui Mark up here-->
            </Grid>

            <!--Loading Indicator-->
<AbsoluteLayout IsVisible="{Binding running}" AbsoluteLayout.LayoutFlags="All"
                AbsoluteLayout.LayoutBounds="0,0,1,1">
            <BoxView
                BackgroundColor="#80000000"
                AbsoluteLayout.LayoutFlags="All"
                AbsoluteLayout.LayoutBounds="0,0,1,1" />
            <StackLayout
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
                <Frame Padding="20,15"
                    CornerRadius="7"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"
                    BackgroundColor="Black"
                    HasShadow="false">
                    <StackLayout VerticalOptions="Center"
                        HorizontalOptions="Center">
                        <ActivityIndicator
                            IsRunning="{Binding running}"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Color="White" />
                        <Label Text="{Binding LoadingIndicatorMessage}"
                            x:Name="lblLoadingText"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            TextColor="White" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </AbsoluteLayout>

            <StackLayout Padding="5"  AbsoluteLayout.LayoutBounds="0,0,1,1"
                         AbsoluteLayout.LayoutFlags="All" BackgroundColor="White">

                <ListView x:Name="cartView"
                          HasUnevenRows="True"
                          SeparatorColor="Black"
                          VerticalOptions="FillAndExpand"
                          HorizontalOptions="FillAndExpand"
                          SeparatorVisibility="Default"
                          IsPullToRefreshEnabled="True"

                          ItemSelected="EvetClicked">
                    <ListView.Resources>
                        <ResourceDictionary>
                            <local:BgConverter x:Key="BgConverter" />
                        </ResourceDictionary>
                    </ListView.Resources>
                    <ListView.Header>

                        <Label Text="Shopping List" HorizontalOptions="Center" VerticalOptions="Center"
                               HorizontalTextAlignment="Center" Margin="0,0,0,15" TextColor="Black"
                               FontAttributes="Bold" FontSize="Title" />

                    </ListView.Header>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <StackLayout Orientation="Vertical">
                                        <Label TextColor="Black" x:Name="something" HorizontalOptions="CenterAndExpand"
                                               Text="{Binding ProductName}" FontSize="Subtitle" />
                                        <ffimageloading:CachedImage
                                            HeightRequest="150"
                                            WidthRequest="150"
                                            HorizontalOptions="CenterAndExpand"
                                            VerticalOptions="CenterAndExpand"
                                            DownsampleToViewSize="true"
                                            Source="{Binding ImgSource}" />
                                        <Label IsVisible="{Binding _virtual}" HorizontalTextAlignment="Center"
                                           TextColor="Black">
                                        <Label.FormattedText>
                                            <FormattedString>
                                                <Span Text="{Binding CartAtribKey }" FontAttributes="Bold" />
                                                <Span Text="{Binding CartAtribValue , StringFormat=' {0}' }"
                                                      FontSize="Small" />
                                            </FormattedString>
                                        </Label.FormattedText>
                                    </Label>
                                    <Label IsVisible="{Binding _virtual}" HorizontalTextAlignment="Center"
                                           TextColor="Black">
                                        <Label.FormattedText>
                                            <FormattedString>
                                                <Span Text="{Binding CartAtribKey1 }" FontAttributes="Bold" />
                                                <Span Text="{ Binding CartAtribValue1, StringFormat=' {0}'}"
                                                      FontSize="Small" />
                                            </FormattedString>
                                        </Label.FormattedText>
                                    </Label>
                                        <!--<Label HorizontalOptions="EndAndExpand" VerticalOptions="StartAndExpand" Text="{Binding PId, StringFormat='SKU {0:F0}'}" FontSize="Medium"></Label> -->
                                        <Label FontSize="Large" VerticalOptions="CenterAndExpand" TextColor="Black"
                                               HorizontalOptions="CenterAndExpand"
                                               Text="{Binding TotalDynamicPrice, StringFormat='Total R:{0,5:#,0.00}' }"
                                               FontAttributes="Bold" />
                                        <Label HorizontalOptions="CenterAndExpand" TextColor="Black"
                                               FontAttributes="Bold"
                                               Text="{Binding Source={x:Reference stepper}, Path=Value, StringFormat='Quantity {0:F0}'}"
                                               FontSize="Medium" />
                                        <StackLayout Orientation="Horizontal">
                                            <ImageButton HorizontalOptions="Center" VerticalOptions="Center"
                                                         HeightRequest="30" WidthRequest="30"
                                                         Source="https://mm-app.co.za/wp-content/uploads/2020/01/icons8-remove-64.png"
                                                         BindingContext="{Binding PId}" Clicked="Removevalue_Clicked" />
                                            <Stepper x:Name="stepper" Maximum="{Binding StockQuantity}"
                                                     Value="{Binding ProductQuantity}"
                                                     Minimum="{Binding MinQ}"
                                                     ClassId="{Binding PId}"

                                                      TabIndex="{Binding VariationId}"
                                                     HorizontalOptions="CenterAndExpand"
                                                     VerticalOptions="CenterAndExpand"
                                                     Increment="{Binding IncrementQ}"
                                                     ValueChanged="stepper_ValueChanged" />
                                        </StackLayout>
                                    </StackLayout>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <StackLayout Padding="0" Orientation="Horizontal" BackgroundColor="White">
                    <Button Margin="2" TextColor="white" BorderColor="#0088d3" BackgroundColor="#0088d3"
                            CornerRadius="10" Padding="10" VerticalOptions="CenterAndExpand"
                            HorizontalOptions="CenterAndExpand" Text="Buy Now!" Clicked="ImageButton_Clicked" />


                </StackLayout>
            </StackLayout>
          </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

private async void ImageButton_Clicked(object sender, EventArgs e)
{
    running = true;

    try
    {
        //You cant checkout if your not logged in There are no Guest Checkouts(I can But would rather not)
        if (Users.LoggedIn && _spamClick == false)
        {
            if (_orderlineitems == null)
                _orderlineitems = new List<OrderLineItem>();

            RestAPI rest = new RestAPI("http://xxxx/wp-json/wc/v2/","xxxxxxxxx","cs_xxxxxxxxxxx");

            var wc = new WCObject(rest);

            await IsInStock();
        }
        running = false;
    }
    (...)
}

public partial class Cart : ContentPage, INotifyPropertyChanged 

private bool _running;

public bool running
{
    get => _running;
    set
    {
        if (_running == value)
            return;
        _running = value;
        RaisePropertyChanged();
    }
}

Any Ideas?

Answer 1

According to your description, I remember you posted a similar question a few days ago, but you deleted this question.

You said that you wanted to display ActivityIndicator when Button click, I test your code and find that there are two StackLayouts, one contains ActivityIndicator, another contains ListView, I suggest you can swap the positions of two stacklayouts, like this:

 <AbsoluteLayout>
        <StackLayout
            Padding="5"
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All"
            BackgroundColor="White">

            <ListView
                x:Name="cartView"
                HasUnevenRows="True"
                HorizontalOptions="FillAndExpand"
                IsPullToRefreshEnabled="True"
                ItemsSource="{Binding products}"
                SeparatorColor="Black"
                SeparatorVisibility="Default"
                VerticalOptions="FillAndExpand">

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>

                            <StackLayout Orientation="Vertical">
                                <Label
                                    x:Name="something"
                                    HorizontalOptions="CenterAndExpand"
                                    Text="{Binding ProductName}"
                                    TextColor="Black" />
                                <Image
                                    HeightRequest="150"
                                    HorizontalOptions="CenterAndExpand"
                                    Source="{Binding ImgSource}"
                                    VerticalOptions="CenterAndExpand"
                                    WidthRequest="150" />
                            </StackLayout>

                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <Button
                x:Name="getproduct"
                Clicked="Getproduct_Clicked"
                Text="load product" />

        </StackLayout>
        <StackLayout
            x:Name="LoadingOverlay"
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All"
            BackgroundColor="White"
            HorizontalOptions="FillAndExpand"
            IsVisible="{Binding loading}"
            Opacity="0.5"
            VerticalOptions="FillAndExpand">
            <ActivityIndicator
                x:Name="TaskLoader"
                HorizontalOptions="CenterAndExpand"
                IsRunning="{Binding running}"
                IsVisible="{Binding running}"
                Scale="4"
                VerticalOptions="CenterAndExpand"
                Color="Red" />
        </StackLayout>
    </AbsoluteLayout>


  public partial class Page5 : ContentPage, INotifyPropertyChanged
{
    public ObservableCollection<product> products { get; set; }

    private bool _loading;
    public bool loading
    {
        get { return _loading; }
        set
        {
            _loading = value;
            RaisePropertyChanged("loading");
        }
    }

    private bool _running;
    public bool running
    {
        get { return _running; }
        set
        {
            _running = value;
            RaisePropertyChanged("running");
        }
    }
    public Page5()
    {
        InitializeComponent();

        products = new ObservableCollection<product>();

        loading = false;
        running = false;

        this.BindingContext = this;
    }

    private void loaddata()
    {
        products.Add(new product() { ProductName = "product 1", ImgSource = "a5.jpg" });
        products.Add(new product() { ProductName = "product 2", ImgSource = "a6.jpg" });
        products.Add(new product() { ProductName = "product 3", ImgSource = "a7.jpg" });
        products.Add(new product() { ProductName = "product 4", ImgSource = "a8.jpg" });
        products.Add(new product() { ProductName = "product 1", ImgSource = "a5.jpg" });
        products.Add(new product() { ProductName = "product 2", ImgSource = "a6.jpg" });
        products.Add(new product() { ProductName = "product 3", ImgSource = "a7.jpg" });
        products.Add(new product() { ProductName = "product 4", ImgSource = "a8.jpg" });
    }


    public event PropertyChangedEventHandler PropertyChanged;   
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    private async void Getproduct_Clicked(object sender, EventArgs e)
    {
        loading = true;
        running = true;

       await Task.Delay(5000);
        loaddata();
        loading = false;
        running = false;

    }
}
public class product
{
    public string ProductName { get; set; }
    public string ImgSource { get; set; }
}

There is screenshot: