Displaying Image on navigation bar and page xamarin forms

Question

Using Xamarin Forms 2.5.0.122203, I want to achieve to add an image that is half over navigation bar and another half in the page like this image

I tried Negative margin and it only worked on UWP. Unfortunately, iOS and Android cut image. I was thinking of creating a custom navigation bar but the thing is UWP has this bug that doesn't hide native Navigation right.

Any solution?

Thank you

Answer 1

I ended up Copying SNavigation.Forms to my projects. After following their documentation.

In the Page I override

protected override void OnBindingContextChanged()
    {
        if (BindingContext == null)
        {
            return;
        }
        base.OnBindingContextChanged();
        SNavigationPage.SetNavContent(this, new LogoHeader()
        {
            BindingContext = BindingContext,
        });
    }

The LogoHeader is the intended layout to be postioned in the Navigation (Better use a Grid)

Visually I have one Navigation Header but technically it is cut in half. It took a lot of time to get the perfect result because you have to remove all navigation shadows from Android and iOS but it is a reliable solution