Two problems with the navigation bar in a second page in a MAUI project

Question

I have a MAUI application that has two pages, main page and configuration page.

To go to the configuration page, I have a button in the main page to navigate to it.

The configuration page shows the navigation bar, it is what I want, but it is shown with dalay, it passes about 1 second since the page is shown and the navigation bar is shown.

This is how I hide the navigation bar in the configuration page:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GTS.CMMS.RegistroHorario.UI.Maui.Views.ConfiguracionView"
             Title="CONFIGURACIÓN"
             Shell.NavBarIsVisible="false"
             Shell.BackgroundColor="MediumBlue">

I have realized that if I register the view as singleton instead of transient, then the behavior is as expected, the navigation bar is shown immediately.

Perhaps as solution I could register my views as singleton, but I would like to know which is the reason why the navigation bar is show with delay when the view is register as transient.

Also, and related with this problem, when I back to the main page with the arrow of the navigation or with the back button of the system, I can see for a very few instant, appears the navigation bar of the configuration in the main page, like a flash.

I don't have this problem when I use a button which command is this:

await Shell.Current.GoToAsync("..");

This second problem happens no matter if the view is registered as transient or not. It seems that there is a problem with the default way in which I back to the main page.

My configuration page is not a complex page, just is has 4 entry controls:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GTS.CMMS.RegistroHorario.UI.Maui.Views.ConfiguracionView"
             Title="CONFIGURACIÓN"
             Shell.NavBarIsVisible="True"
             Shell.BackgroundColor="MediumBlue">


    <Grid BackgroundColor="CornflowerBlue">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="AUTO"/>
        </Grid.RowDefinitions>


        <VerticalStackLayout BackgroundColor="Transparent" Margin="0,20,0,0">

            <Label 
            Text="Usario"
            VerticalOptions="Center" 
            HorizontalOptions="Center"
            Margin="0,10,0,0"/>

            <Entry Text="{Binding Usuario}" />

            <Label 
            Text="Contraseña"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

            <Entry Text="{Binding Password}" IsPassword="true" />



            <Label 
            Text="Direccion Servidor"
            VerticalOptions="Center" 
            HorizontalOptions="Center"
            Margin="0,50,0,0"/>

            <Entry Text="{Binding DireccionServicio}" />

            <Label 
            Text="Puerto Servidor"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

            <Entry Text="{Binding PuertoServicio}" Keyboard="Numeric" />
        </VerticalStackLayout>


        <Grid HorizontalOptions="End" VerticalOptions="End" Grid.Row="1"
              Margin="0,0,10,10"
              BackgroundColor="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="0.20*"/>
            </Grid.ColumnDefinitions>

            <ImageButton Source="guardar.png" HeightRequest="70" BackgroundColor="Transparent" VerticalOptions="End" HorizontalOptions="End" Grid.Column="1"
                     Command="{Binding GuardarCommand}"/>

            <Button Text="Volver" HeightRequest="70" Command="{Binding VolverCommand}"/>
        </Grid>
    </Grid>
</ContentPage>

I know that one solution it would be register the view as singleton, hide the navigation bar and put the back button in the top of the page, simulation the arrow of the navigation bar, but I would like to know why I have this behavior.

Thanks.

Answer 1

To begin with, the MauiAppBuilder.Services property has a number of ways to register objects with dependency injection. You need to know the difference between AddSingleton and AddTransient in the dependency injection.

Singleton:

• Only one service instance was created throughout the lifetime.
• Reused the same instance in future, wherever the service is required.
• Since it's a single lifetime service creation, memory leaks in these services will build up over time.
• Also, it has memory efficient as they are created once reused everywhere.

Transient:

• A new service instance is created for each object.
• This is a good approach for the multithreading approach because both objects are independent of one another.
• The instance is created every time they will use more memory and resources and can have a negative impact on performance.
• Utilize for the lightweight service with little or no state.

As stated above, when registering your page or service as Transient in the MauiAppBuilder.Services, the instance of the page or service will be created every time they will use more memory and resources and can have a negative impact on performance and that's why the navigation bar is show with delay. Compared to Singleton, since one service or page instance was created throughout the lifetimethe and it has memory efficient as they are created once reused everywhere so that the navigation bar is shown immediately like a flash.

Hopefully this clears that up a little bit.