.NET MAUI - Usando ActivityIndicator
 Hoje veremos como usar o ActivityIndicador no .NET MAUI.


O ActivityIndicator nos ajuda a informar ao usuário que seu aplicativo está realizando uma atividade prolongada, isso é feito visualmente por meio de uma animação.

 

A aparência do ActivityIndicador se adapta a plataforma onde esta rodando:

 

Suas propriedades mais importantes são :

Abaixo temos um exemplo de código XAML usado para exibir a view:

<ActivityIndicator x:Name="activity1" Color="Black" IsRunning="true" />

ou se preferir usar código C# :

ActivityIndicator activityIndicator = new ActivityIndicator
{
    IsRunning = true,
    Color = Colors.Pink
};

Vamos ver o recurso funcionando em uma página de Login criada em uma aplicação .NET MAUI no VS 2022 Preview.

Abra o VS 2022 Preview e crie um novo projeto - MauiAppLogin - usando o template :

 

Será criar a solução contendo apenas um projeto:

 

 

A seguir vamos usar a content page MainPage.xaml e alterar o seu código para :

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppLogin.MainPage">

    <ScrollView>
        <Grid>
            <StackLayout Background="black">
                <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand"
                             HorizontalOptions="FillAndExpand">
                    <Label Text="Nome do Usuário" TextColor="Yellow" FontSize="20" FontAttributes="Bold"/>
                    <Entry  Keyboard="Default" Placeholder="Informe o nome do usuário" PlaceholderColor="#CCC"
                            FontSize="20" TextColor="#555" />
                    <Label Text="Senha" TextColor="Yellow" FontSize="20" FontAttributes="Bold"/>
                    <Entry  Placeholder="Informe a senha" Keyboard="Numeric" IsPassword="True" FontSize="20"
                            PlaceholderColor="#CCC" TextColor="#555" />
                </StackLayout>
                <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
                    <Button x:Name="BtnLogin" Text="Fazer Login" BackgroundColor="White" TextColor="Black"  FontSize="Large"/>
                </StackLayout>
            </StackLayout>

            <!-- Definimos '{Binding IsBusy}' no code-behind -->
            <ActivityIndicator x:Name="activityIndicator1" IsRunning="{Binding IsBusy}"
                    VerticalOptions="Center" HorizontalOptions="Center" Color="BlueViolet" />
        </Grid>
    </ScrollView>

</ContentPage>

 

No arquivo MainPage.xaml.cs define o código a seeguir:
 

public partial class MainPage : ContentPage
{
      public MainPage()
      {
        InitializeComponent();
        // Define o binding context
        this.BindingContext = this;
        // Define a propriedade
        this.IsBusy = false;
        //Define o evento Click do botão de login
        BtnLogin.Clicked += BtnLogin_Clicked;
       }

    private async void BtnLogin_Clicked(object sender, EventArgs e)
    {
        //ativa o ActivityIndicator
        this.IsBusy = true;
        // aqui ficaria o seu código
        // para fazer a autenticação
        await DandoUmTempo(5000);
        Application.Current.MainPage = new NavigationPage(new Bemvindo());
    }

    //Dá uma pausa de 10 segundos
    async Task DandoUmTempo(int valor)
    {
        await Task.Delay(valor);
    }
}

Neste código definimos o BindingContext e a propriedade IsBusy como false de modo que o ActivityIndicator estará inativo.

No evento Clicked do botão de comando ativamos o ActivityIndicator, damos uma pausa de 5 segundos e apresentamos a página principal : Bemvindo.

Vamos criar no projeto uma nova Content Page chamada Bemvindo.xaml com o seguinte código :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppLogin.Bemvindo"
             BackgroundColor="Yellow"
             Title="Bemvindo">   

    <VerticalStackLayout HorizontalOptions="Center" VerticalOptions="Center">      

        <Label Text="Bem-Vindo à página Principal"
           TextColor="Black"
           FontSize="Large"
           VerticalOptions="Center"
           HorizontalOptions="Center" />       

    </VerticalStackLayout>   

</ContentPage>


Agora é só alegria...

 

 

Pegue o projeto aqui : MauiAppLogin.zip (sem as referências)

"Sei estar abatido, e sei também ter abundância; em toda a maneira, e em todas as coisas estou instruído, tanto a ter fartura, como a ter fome; tanto a ter abundância, como a padecer necessidade.
Posso todas as coisas em Cristo que me fortalece."
Filipenses 4:12,13

 



Isaías 9:6
Porque um menino nos nasceu, um filho se nos deu, e o principado está sobre os seus ombros, e se chamará o seu nome: Maravilhoso, Conselheiro, Deus Forte, Pai da Eternidade, Príncipe da Paz.

Isaías 9:6

Referências:

José Carlos Macoratti