Nicoara
Nicoara

Reputation: 390

How to remove the navigation bar of a ContentPage when using Shell

I have a registration/login page set up and I use shell to navigate between them but i want to remove the header (I am not sure if that's it's name)

That blue header at the top witch is used for flyout menu

I have tried adding

NavigationPage.HasNavigationBar="false"

this in my login page but with no effect. Maybe because my xaml pages are not defined as navigation pages.

Here is my Login.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodel="clr-namespace:Appointments.ViewModels"  
             x:DataType="viewmodel:RegLogViewModel"
             x:Class="Appointments.Views.RegisterPage"
             NavigationPage.HasNavigationBar="false">

    <ContentPage.BindingContext>
        <viewmodel:RegLogViewModel/>
    </ContentPage.BindingContext>

    <Grid
            RowDefinitions="130,300,*,70">


        <Label
            Grid.Row="0"
            Text="REGISTRATION"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            FontSize="40"
            />

        <StackLayout
            Grid.Row="1">

            <Entry Placeholder="username" Text="{Binding Name}"/>
            <Entry Placeholder="email" Text="{Binding Email}"/>
            <Entry Placeholder="password" Text="{Binding Password}"/>
            <Entry Placeholder="confirm password" Text="{Binding PasswordConfirmation}"/>
            <Entry Placeholder="phone number" Text="{Binding Phone}"/>

            <StackLayout Orientation="Horizontal">
                <Label 
                    Text="This account is for a hairstylist"
                    FontSize="20"/>
                <Switch/>
            </StackLayout>

        </StackLayout>

        <Button
            Grid.Row="2"
            Text="Register"
            FontSize="Large"
            VerticalOptions="Center"
            HorizontalOptions="CenterAndExpand"
            CornerRadius="10"
            Padding="20,0"
            BackgroundColor="Aquamarine"
            Command="{Binding LoginCommand}"
            
            />

        <Label
            Grid.Row="3"
            Text="Already a user? Login"
            FontSize="20"
            TextDecorations="Underline"
            HorizontalOptions="Center"
            VerticalOptions="Center"
>

            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding GoToLoginCommand}"/>
            </Label.GestureRecognizers>

        </Label>

    </Grid>

</ContentPage>

I guess you only need the ContentPage definition

And i have register a route to this page in my AppShell.xaml.cs and in my AppShell.xaml i've set ShellContent to the actual page and that's it.

Upvotes: 0

Views: 1215

Answers (1)

Cfun
Cfun

Reputation: 9721

Since you are using Shell, instead of setting the attached proeprty NavigationPage.HasNavigationBar you need to set Shell.NavBarIsVisible:

<ContentPage ...
       Shell.NavBarIsVisible="False"

Related question

How can you restrict/control the navigation routes the user can visit based on login status/role?

Upvotes: 4

Related Questions