CODEWITHSUNDEEP
.netxamlmaui
MaxT
MaxT

Reputation: 3

I can't seem to hide the navigation bar with my .net MAUI app

I'm using .net MAUI to make an application. I'm working on a login page, which also acts as the root page of the navigation stack I'm using for navigation. Here's my page's XAML:

`<?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="ProcedureScheduler.Pages.LoginPage"
             Shell.NavBarIsVisible="false">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <VerticalStackLayout
            Grid.Column="1"
            Grid.Row="1">
            <Entry x:Name="UsernameEntry"
                HorizontalOptions="Center"/>
            <Label Text="Username"
                HorizontalOptions="Center"/>
            <Entry x:Name="PasswordEntry"
                HorizontalOptions="Center"
                IsPassword="true"/>
            <Label Text="Password" 
                HorizontalOptions="Center"/>
            <Button
                x:Name="LoginButton"
                Text="Login"
                HorizontalOptions="Center"
                Clicked="LoginButtonClicked" />
        </VerticalStackLayout>
    
    </Grid>
</ContentPage>`

And here's the AppShell xaml:

`
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="ProcedureScheduler.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ProcedureScheduler"
    xmlns:pages="clr-namespace:ProcedureScheduler.Pages">
</Shell>
`

As you can see, I tried using the "Shell.NavBarIsVisible" property, but that didn't seem to do anything. I also tried using it on other pages of my application, and also had no results. Here's a picture of the login screen:

A login screen with the navigation bar at the top

Upvotes: 0

Views: 1995

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

From the docs Disable the navigation bar:

While Shell.NavBarIsVisible can be set on a subclassed Shell object, it's typically set on any pages that want to make the navigation bar invisible. For example, the following XAML shows disabling the navigation bar from a ContentPage.

So you need integrate the LoginPage into a Shell app, your AppShell.xaml should like below:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="ProcedureScheduler.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ProcedureScheduler"
    xmlns:pages="clr-namespace:ProcedureScheduler.Pages">


    <ShellContent Title="LoginPage"                           
                  ContentTemplate="{DataTemplate Pages:LoginPage}" 
                  Route="LoginPage"/>

</Shell>

App.xaml.cs:


public partial class App : Application
{
      public App()
      {
            InitializeComponent();

            MainPage = new AppShell();
           //MainPage = new NavigationPage(new LoginPage());
      }
}

Set the Shell.NavBarIsVisible="false" in LoginPage.xaml:

<?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="ProcedureScheduler.Pages.LoginPage"
             Shell.NavBarIsVisible="false">

 
</ContentPage>

Output:

enter image description here

Upvotes: 1

Related Questions