Xamarin.Forms: How to hide the Navigation Bar Separator on iOS devices?

Question

I have changed the default color of the navigation bar by using these codes in app.xaml as I am unable to make it transparent on iOS devices:

<Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor" Value="#0a82b8" />
            <Setter Property="BarTextColor" Value="#ffffff" />
</Style>

Now, there is an unnecessary navigation bar separator on iOS:

On Microsoft's official website, it says these codes can be helpful:

This platform-specific hides the separator line and shadow that is at the bottom of the navigation bar on a NavigationPage. It's consumed in XAML by setting the NavigationPage.HideNavigationBarSeparator bindable property to false:
<NavigationPage ...
                xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
                ios:NavigationPage.HideNavigationBarSeparator="true">

</NavigationPage>
Alternatively, it can be consumed from C# using the fluent API:
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

public class iOSTitleViewNavigationPageCS : Xamarin.Forms.NavigationPage
{
    public iOSTitleViewNavigationPageCS()
    {
        On<iOS>().SetHideNavigationBarSeparator(true);
    }
}

Source: Hiding the Navigation Bar Separator on a NavigationPage

The problem is that when I want to paste the ios:NavigationPage.HideNavigationBarSeparator="true" property into the <NavigationPage>tag, it gives this error:

No property, bindable property, or event found for 'HideNavigationBarSeparator', or mismatching type between value and property.

My full codes are:

<?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 xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
            ios:NavigationPage.HideNavigationBarSeparator="true">
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

Here is the tutorial which I followed for the MasterDetail navigation. The file which has <NavigationPage> tag is named as MainPage.xaml

Bruno Caceiro Bruno Caceiro · Accepted Answer · 2018-09-29T07:14:17

You can use a custom renderer to hide that shadow:

[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationPage))]
namespace CustomNavigationPage.iOS
{
    public class CustomNavigationPage : NavigationRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            NavigationBar.SetBackgroundImage(new UIKit.UIImage(), UIKit.UIBarMetrics.Default);
            NavigationBar.ShadowImage = new UIKit.UIImage();
        }
    }
}

Xamarin.Forms: How to hide the Navigation Bar Separator on iOS devices?

3 Answers