Xamarin views are overlapped by the UINavigationBar when set to be translucent

Question

I have a Xamarin.Forms app and want to set the NavigationBar to be translucent. But when I do, I get a strange behavior with the Xamarin views:

ListViews or TableViews behave correctly. But when I wrap them in a RefreshView, they are overlapped by the UINavigationBar.

-- TRANSLUCENCY WITHOUT REFRESHVIEW: OKAY

<ContentPage>
    <ListView>
        ...
    </ListView>
</ContentPage>

-- TRANSLUCENCY WITHOUT REFRESHVIEW: BUGGY

<ContentPage>
    <RefreshView>     <----
        <ListView>
            ...
        </ListView>
    </RefreshView>
</ContentPage>

Am I missing something?

• Repro on GitHub: https://github.com/awaescher/xamarin-repro
• How to make a translucent NavigationBar: https://xamgirl.com/transparent-navigation-bar-in-xamarin-forms/

Answer 1

We can use navigationPage.BarBackgroundColor = Color.Transparent to achieve that .

NavigateFromMenu method modified as follow :

case (int)MenuItemType.TranslucentWithoutRefreshView:
    MenuPages.Add(id, CreateTranslucentNavigationPage(new TranslucentWithRefreshPage(),false));
    break;
case (int)MenuItemType.TranslucentWithRefreshView:
    MenuPages.Add(id, CreateTranslucentNavigationPage(new TranslucentWithRefreshPage(),true));
    break;

Then in CreateTranslucentNavigationPage method :

private Xamarin.Forms.NavigationPage CreateTranslucentNavigationPage(Xamarin.Forms.Page page, bool value)
{
    var navigationPage = new Xamarin.Forms.NavigationPage(page);
    if (value)
    {
        navigationPage.BarBackgroundColor = Color.Transparent;
        navigationPage.BarTextColor = Color.Black;
    }
    //Xamarin.Forms.PlatformConfiguration.iOSSpecific.NavigationPage.SetIsNavigationBarTranslucent(navigationPage, true);
    return navigationPage;
}

The effect :