Forum Xamarin Xamarin.Forms

How to make the navigation bar background color transparent?

I have added this code to the app.xaml. However, it doesn't work.

<Style TargetType="NavigationPage">
                    <Setter Property="BarBackgroundColor" Value="Transparent"/>
                    <Setter Property="BarTextColor" Value="White"/>

Best Answer


  • Well, thanks. It seems very complicated for me. Then, can we remove at least the unnecessary border on iOS?

  • Dear @AdamMeaney,

    Thanks for the response. I am sorry, I am a very new student in Xamarin classes. Do we have to write ios:NavigationPage.HideNavigationBarSeparator="true" between the <NavigationPage> tags?

    When I want to paste it in the ContentPage it gives this error:

    Error: 'ios' is an undeclared prefix.

    Here are the full codes:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="" xmlns:x="" x:Class="MyApp.Views.HomePage" ios:NavigationPage.HideNavigationBarSeparator="true">
            <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Image Source="background.png" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill" />
                <ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
                    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭

    You want to set that property on your NavigationPage.

    That might be in Xaml, but most likely you defined the NavigationPage in code, so use the code example from a bit further down.

  • That's my fault. You are right @AdamMeaney , I have a file which has <NavigationPage> tags in it. However, the issue still persists although I have pasted the related property in the <NavigationPage> tags.

    Here are the full codes:

    <?xml version="1.0" encoding="utf-8"?>
    <MasterDetailPage xmlns="" xmlns:x="" xmlns:local="clr-namespace:My.App" x:Class="My.App.MainPage">
            <ContentPage Title="Menu" BackgroundColor="#0a82b8" Icon="menu.png">
                <StackLayout Orientation="Vertical">
                    <ListView x:Name="navigationDrawerList" RowHeight="55" SeparatorVisibility="None" BackgroundColor="#ffffff" ItemSelected="OnMenuItemSelected">
                                    <!-- Main design for our menu items -->
                                    <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="20,10,0,10" Spacing="20">
                                        <Label Text="{Binding Title}" FontSize="Large" VerticalOptions="Start" HorizontalOptions="CenterAndExpand" TextColor="#28DDFF" FontAttributes="Bold" />
            <NavigationPage ios:NavigationPage.HideNavigationBarSeparator="true">

    The issue is the same:

    Error: 'ios' is an undeclared prefix.

    Here is the tutorial which I followed for the MasterDetail Navigation.

    Do you have any idea?

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭✭
    edited September 2018

    Add the namespace to the MasterDetailPage tag.

  • Now, it says me:

    Error: Position 22:25. No property, bindable property, or event found for 'HideNavigationBarSeparator', or mismatching type between value and property.

  • LandLuLandLu Member, Xamarin Team Xamurai

    @MadameGreenPea You can also place this code in your AppDelegate.cs to hide this separator line:
    UINavigationBar.Appearance.ShadowImage = new UIImage();.

Sign In or Register to comment.