how to make the top nav bar invisible when using shell?

I'm trying to use shell , but I want to customize y top nav bar , I tried to find something to change the bachground color and the title color but I didn't find anything, so I thought I can get the navigation bar invisible and do my own but the normal method woudn't work because I think we are not using NavigationPage.
does any one has an idea about this.
thnx.

Answers

  • yelinzhyelinzh Member, Xamarin Team Xamurai

    To change the bachground color and the title color, you can add a layout in ContentPage as follows

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage ...>
        <StackLayout>
            <StackLayout BackgroundColor="Blue">
                <Label Text="stackLayout label" HorizontalOptions="Center"/>
                <Button Text="btn"/>
            </StackLayout>
            ...
        </StackLayout>
    </ContentPage>
    

    And if you want to remove the nav bar, add code in ContentPage

    NavigationPage.HasNavigationBar="False"
    
  • SoniaDevRootSoniaDevRoot Member ✭✭

    I used NavigationPage.HasNavigationBar="False" but it doesn't work when using shell

  • yelinzhyelinzh Member, Xamarin Team Xamurai

    Would you mind sharing a basic demo that could reproduce this issue?

  • SoniaDevRootSoniaDevRoot Member ✭✭
    edited March 8

    here is what Ive done so far:
    I used this code as my shell page for the code:

    <?xml version="1.0" encoding="utf-8" ?>
    <Shell xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:local="clr-namespace:Mobile.Views"
           FlyoutBehavior="Disabled"
           Route="home"
           RouteScheme="app"
           x:Class="Mobile.Views.Page1">
        <ShellItem Route="tabs"
                   Style="{StaticResource BaseStyle}"
                   Title="Bottom Tab Sample">
            <ShellSection Icon="Home.png">
                <ShellContent x:Name="home">
                    <local:Home/>
                </ShellContent>
            </ShellSection>
            <ShellSection Route="details" Icon="category.png">
                <ShellContent Route="detailTicket" x:Name="details"/>
            </ShellSection>
            <ShellSection Route="Cart" Icon="ticket.png">
                <ShellContent Route="TicketsList" x:Name="tickets"/>
            </ShellSection>
            <ShellSection Route="Profile" Icon="account.png">
                <ShellContent Route="ContentProfile" x:Name="profile"/>
            </ShellSection>
        </ShellItem>
    </Shell>
    

    and this is what ive done to change the nav bar color

       <Shell.TitleView>
            <StackLayout Style="{x:Static Style:GeneralStyles.navBarSpaceStyle}">
                <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                    <Label Style="{x:Static Style:GeneralStyles.navBarTitleStyle}" Text="{Binding Title}" />
                </StackLayout>
            </StackLayout>
        </Shell.TitleView>
    

    but with this code the part whe the arrow did't change.

  • yelinzhyelinzh Member, Xamarin Team Xamurai
    edited March 8

    1.Try to use Shell.ItemTemplate to customize each ShellItem appearance (as follows), you can chang nav bar in ContentView.

    <Shell.ItemTemplate>
        <DataTemplate>
            <ContentView HeightRequest="32">
                <ContentView.Padding>
                    <Thickness Left="32"
                               Top="16" />
                </ContentView.Padding>
                <Label Text="{Binding Title}" />
            </ContentView>
        </DataTemplate>
    </Shell.ItemTemplate> 
    

    2.Shell provides the ability to hook into the navigation routing before it has completed, and after it has completed.
    Refer to https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell?tabs=android#intercepting-navigation

  • SoniaDevRootSoniaDevRoot Member ✭✭
    edited March 14

    thx for the help @yelinzh but I found this solution it worked perfectly :smile:
    <Shell.Resources> <ResourceDictionary> <Style x:Key="BaseStyle" TargetType="Element"> <Setter Property="Shell.ShellTabBarUnselectedColor" Value="LightGray" /> <!--For the Title and the icon in the bottom bar--> <Setter Property="Shell.ShellTitleColor" Value="#FF3C3934" /> <!--For the header--> <Setter Property="Shell.ShellBackgroundColor" Value="#FF3C3934" /> <!--For the bottom tab--> <Setter Property="Shell.ShellTabBarBackgroundColor" Value="White" /> </Style> </ResourceDictionary> </Shell.Resources>

  • yelinzhyelinzh Member, Xamarin Team Xamurai

    Congrats and thanks very much for sharing the solution.
    And I make some modifications to the format of your answer

       <Shell.Resources>
            <ResourceDictionary>
                <Style x:Key="BaseStyle" TargetType="Element">
                    <Setter Property="Shell.ShellTabBarUnselectedColor" Value="LightGray" />
                    <!--For the Title and the icon in the bottom bar-->
                    <Setter Property="Shell.ShellTitleColor" Value="#FF3C3934" />
                    <!--For the header-->
                    <Setter Property="Shell.ShellBackgroundColor" Value="#FF3C3934" />
                    <!--For the bottom tab-->
                    <Setter Property="Shell.ShellTabBarBackgroundColor" Value="White" />
                </Style>
            </ResourceDictionary>
        </Shell.Resources>
    
  • HasanAjouzHasanAjouz FRMember ✭✭

    @SoniaDevRoot
    so at the end you didn't find a way to hide the navigation bar?
    because for me i didn't find till now.
    i want to hide it on some pages.

  • HasanAjouzHasanAjouz FRMember ✭✭

    i found a solution .
    Shell.SetNavBarIsVisible(this, false);

  • HasanAjouzHasanAjouz FRMember ✭✭

    or this in xaml:
    Shell.NavBarIsVisible="False"

Sign In or Register to comment.