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"/>
</Style>

Best Answer

Answers

  • 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="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.Views.HomePage" ios:NavigationPage.HideNavigationBarSeparator="true">
        <ContentView.Content>
            <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">
                        ....
                    </StackLayout>
                </ScrollView>
            </AbsoluteLayout>
        </ContentView.Content>
    </ContentPage>
    
  • 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="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:My.App" x:Class="My.App.MainPage">
        <MasterDetailPage.Master>
            <ContentPage Title="Menu" BackgroundColor="#0a82b8" Icon="menu.png">
                <StackLayout Orientation="Vertical">
                    <ListView x:Name="navigationDrawerList" RowHeight="55" SeparatorVisibility="None" BackgroundColor="#ffffff" ItemSelected="OnMenuItemSelected">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <!-- 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" />
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
            </ContentPage>
        </MasterDetailPage.Master>
        <MasterDetailPage.Detail>
            <NavigationPage ios:NavigationPage.HideNavigationBarSeparator="true">
            </NavigationPage>
        </MasterDetailPage.Detail>
    </MasterDetailPage>
    

    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.

    xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    
  • 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.