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

You can try using github.com/stormlion227/SNavigation.Forms. Not sure if it will work in your case — AbsoluteSith
@AbsoluteSith Please post it as an answer, thank you for your help it worked — Elias Nawfal
Also, thank you @PriyankaAgrawal I made it half on NavigationBar & half on page great tip — Elias Nawfal
@EliasNawfal Could you post your solution ? I tried the SNavigation to do the same widthout success — doxsi

Elias Nawfal Elias Nawfal · Accepted Answer · 2018-11-20T19:02:27

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

Displaying Image on navigation bar and page xamarin forms

1 Answers