Activity Indicator and Absolute Layout issue

[williambuchanan2]

Description

I am having a lot of trouble getting ActivityIndicator to show. I have come to the conclusion it is a bug because it shouldn't be this hard...

The advice I have seen online is that I need an AbsoluteLayout for this to work, and that the ActivityIndicator goes as the last item in the layout. However it just doesn't show.

Steps to Reproduce

Open and run solution in the repo listed below. Click Absolute Layout Problem button. Click the Create Account button - this should cause the ActivityIndicator to show. Nothing happens.

Link to public reproduction project repository

https://github.com/williambuchanan2/MauiNavigation https://github.com/williambuchanan2/MauiNavigation/blob/45dbbf6dd4683832fdb1d2e72abb71dac0456767/Views/NewPage8.xaml#L70

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

Android 11 - 13, iOS 16

Did you find any workaround?

No

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[cat0363]

I'm not sure where you want the ActiveIndicator to appear, but maybe you need to fix it like this. If you want it to be centered on the screen, you need AbsoluteLayout.LayoutBounds to be 0.5,0.5,AutoSize,AutoSize and AbsoluteLayout.LayoutFlags to be PositionProportional.

<StackLayout x:Name="aiLayout" IsVisible="{Binding Loading}"  Margin="0" Padding="0" AbsoluteLayout.LayoutBounds="0.5,0.5,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="Gray" Opacity="0.5" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" >
    <ActivityIndicator x:Name="ai" IsRunning="{Binding Loading}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Color="Black"/>
</StackLayout>

Mimicking something with Thread.Sleep(5000) is wrong. Stop the main thread.

Class8.cs should at least look like this:

private async Task Delay()
{
    await Task.Delay(5000);
}

[RelayCommand]
private async void CreateAccountPressed()
{
    Loading = true;
    try
    {
        await Delay();
    }
    finally
    {
        Loading = false;
    }
}

The problem that the ActiveIndicator is not displayed on the screen is in the implementation method. Below is the execution result.

Is it a .NET MAUI bug?

[williambuchanan2]

Hi @cat0363 I just tried your suggestion but it doesn't work. I can get it to show on top of some controls, which is what I am doing at the moment, but it's behaviour is very inconsistent and it seems like it will only show itself under certain conditions.

It would be better if you could just call it and it fills the screen, without needing to worry about positioning and structure of page.

[cat0363]

If you want to spread out to fill the screen, this is not the way to layout. I would do something like this:

    <Grid Margin="0" Padding="0">
        <ScrollView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0" Padding="0">

            <VerticalStackLayout VerticalOptions="Center">
                <Label  Text="Page 8" VerticalOptions="Center"  HorizontalOptions="Center" />
                <Button Text="Next" Command="{Binding NextButtonPressedCommand}" />

                <StackLayout WidthRequest="60">
                    <Frame HeightRequest="60" WidthRequest="60" CornerRadius="30" Padding="0" Margin="0,10,0,0" HorizontalOptions="Center">
                        <Image Source="login_icon_transbg.png" Aspect="AspectFit" />
                    </Frame>
                </StackLayout>

                <Grid RowSpacing="5"  Margin="20,10,20,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="1" Text="Welcome!" TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" HorizontalOptions="Center" FontSize="Title" FontAttributes="Bold" Padding="0"/>
                    <Label Grid.Row="2" Text="Create your account!" TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" HorizontalOptions="Center" FontSize="Subtitle" FontAttributes="Bold" Padding="0"/>

                </Grid>

                <Entry Text="{Binding FirstName}" Placeholder="Firstname"  WidthRequest="350"/>
                <Entry Text="{Binding LastName}" Placeholder="Last Name" WidthRequest="350"/>
                <Entry Text="{Binding UserNameEmail}" Placeholder="Email"  WidthRequest="350"/>
                <Entry Text="{Binding Mobile}" Placeholder="Mobile"  WidthRequest="350"/>
                <Entry Text="{Binding Postcode}" Placeholder="Postcode"  WidthRequest="350"/>
                <Entry Text="{Binding Password}" Placeholder="Password" IsPassword="True"  WidthRequest="350"/>
                <Entry Text="{Binding PasswordVerify}" Placeholder="Verify Password" IsPassword="True"  WidthRequest="350"/>

                <Button  Style="{DynamicResource featureButton}" VerticalOptions="End" Margin="0, 20, 0,0" HeightRequest="50"
                            Text="Create Account"  Command="{Binding CreateAccountPressedCommand}" 
                          AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"/>

                <HorizontalStackLayout  Margin="0,10,0,0" Padding="0" HorizontalOptions="CenterAndExpand">
                    <Label Text="Already have an account?" Style="{StaticResource Key=linkLabel}" Margin="3" TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>
                    <Button  Style="{StaticResource Key=linkButton}"  Text="Sign in" Command="{Binding LoginButtonPressedCommand}"
                            TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"/>

                </HorizontalStackLayout>
                <Border x:Name="KeyboardFix" HeightRequest="200" Stroke="Transparent" BackgroundColor="Transparent"/>

            </VerticalStackLayout>

        </ScrollView>

        <AbsoluteLayout x:Name="aiLayout" IsVisible="{Binding Loading}" Margin="0" Padding="0" BackgroundColor="Gray" Opacity="0.5" >
            <AbsoluteLayout.GestureRecognizers>
                <TapGestureRecognizer />
            </AbsoluteLayout.GestureRecognizers>
            <StackLayout  Margin="0" Padding="0" AbsoluteLayout.LayoutBounds="0.5,0.5,AutoSize,AutoSize"
                     AbsoluteLayout.LayoutFlags="PositionProportional" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" >
                <ActivityIndicator x:Name="ai" IsRunning="{Binding Loading}" HorizontalOptions="Center" VerticalOptions="Center" Color="Black"/>
            </StackLayout>
        </AbsoluteLayout>

    </Grid>

Even if the ActiveIndicator can be displayed as intended, the controls behind it can be manipulated. This is because the operation is transparent. I would like to suppress the operation with InputTransparent, but there is a bug, so I work around this by adding an empty TapGesture to the AbsoluteLayout.

However, since the Tab and Navigation areas can be operated, if you want to display the ActiveIndicator, you will need to implement it with a Popup.

[williambuchanan2]

Yes that worked as well. Uh I have tried so many combinations to make it work.

Thanks again...

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on android platform with sample project. MauiNavigation-main.zip