I have a login screen that I want a activitymonitor to show up when I click the button. But I click the button and it doesn't show not real sure why.

Here is C#

On button click activityIndicator.IsVisible = true;

        WebApiService ws = new WebApiService(); 

         var response = await ws.LoginAsync(Username.Text, Password.Text, UUID);

        activityIndicator.IsVisible = false;
        if (response.ResultCode == AuthenticationResultCodeEnum.SUCCESS)
        {
         // do something with the result
        }
        }

Here is my Xaml

<StackLayout >
            <Label x:Name="Version" HeightRequest="50" VerticalTextAlignment="Start" HorizontalTextAlignment="End" Margin="0,30,20,0">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer
                Tapped="OnTapGestureRecognizerTapped"
                NumberOfTapsRequired="2" />
                    </Label.GestureRecognizers>
                </Label>
                <Image Source="LEDShield_Small.png" Margin="0,0,0,30"></Image>
                <StackLayout Padding="20,0,20,0">
                    <Label Text="MI DNR Username" FontAttributes="Bold"></Label>
                    <Entry x:Name="Username" Placeholder="Username" IsSpellCheckEnabled="False" IsTextPredictionEnabled="False"></Entry>
                    <Label Text="MI DNR Password" FontAttributes="Bold"></Label>
                    <Entry x:Name="Password"  Placeholder="Password" IsPassword="True"></Entry>
                    <Button x:Name="SigninButton" Text="Sign In" IsEnabled="False" HeightRequest="50"></Button>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="200" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="End">
                            <Label x:Name="RememberMeLabel"  HeightRequest="10" Margin="0" VerticalTextAlignment="Center" Text="Keep Me Signed In">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding RememberMeLabelCommand}" />
                                </Label.GestureRecognizers>
                            </Label>
                            <CheckBox HeightRequest="50"   VerticalOptions="Center" x:Name="RememberMe" IsChecked="{Binding IsRememberMeChecked}" Color="Green"></CheckBox>
                        </StackLayout>

                        <Label Grid.Row="0" Grid.Column="0" Margin="25" Text="Forgot Password" HorizontalOptions="Center" TextDecorations="Underline"   >
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1" />
                            </Label.GestureRecognizers>
                        </Label>
                    </Grid>
                </StackLayout>
   
            <Button x:Name="ResetRequestButton" IsVisible="false" Text="This account has been locked. Click here to to send a password reset request."></Button>
            <ActivityIndicator IsRunning="true" x:Name="activityIndicator"  Color="Green" VerticalOptions="Center" />
        </StackLayout>

CodePudding user response：

I use this class for ActivityIndicator:

public class ProgressSplash : Grid, IDisposable
{
    public static ProgressSplash Show(Layout<View> parent)
    {
        return new ProgressSplash(parent);
    }

    ActivityIndicator ai;
    Layout<View> parent;

    private ProgressSplash(Layout<View> parent)
    {
        this.parent = parent;
        HorizontalOptions = LayoutOptions.Fill;
        VerticalOptions = LayoutOptions.Fill;
        BackgroundColor = Color.FromHex("#40000000"); 

        ai = new ActivityIndicator();
        ai.HorizontalOptions = Device.RuntimePlatform == Device.UWP ? LayoutOptions.Fill : LayoutOptions.CenterAndExpand;
        ai.VerticalOptions = LayoutOptions.CenterAndExpand;
        ai.Opacity = 1;

        if (parent is Grid)
        {
            if (((Grid)parent).RowDefinitions.Count > 1)
                Grid.SetRowSpan(this, ((Grid)parent).RowDefinitions.Count);
            if (((Grid)parent).ColumnDefinitions.Count > 1)
                Grid.SetColumnSpan(this, ((Grid)parent).ColumnDefinitions.Count);
        }

        parent.Children.Add(this);
        Children.Add(ai);
        ai.IsVisible = true;
        ai.IsRunning = true;
    }

    public void Dispose()
    {
        ai.IsRunning = false;
        ai.IsVisible = false;

        if (parent.Children.Contains(this))
            parent.Children.Remove(this);
    }
}

And there is how to use it:

using (var prc = ProgressSplash.Show(grdMain))
{
    // ... do something slow
}

Where "grdMain" is main container on the page, which is Grid (it works with it only).

CodePudding user response：

I'm not sure where ActivityIndicator tries to show, when inside a StackLayout.

Consider using it this way:

<Grid ...>
    <StackLayout ...>
        ...
    </StackLayout ...>

    <ActivityIndicator x:Name="activityIndicator" IsRunning="False"
                       ...
                       VerticalOptions="Center" />
</Grid>

In button click:

    activityIndicator.IsRunning = true;

EXPLANATION:

The layout is a single-cell grid, with two children laid on top of each other.
First child is your "normal" content, inside a StackLayout.
Second child is ActivityIndicator, initially not running (so not visible).

When you set IsRunning to true, it shows up.

TECH NOTE: The reason to do this with IsRunning instead of IsVisible, is to avoid forcing page to perform a layout.