How to Set backGround Image to Navigation Page Bar in Xamarin forms

Question

I'm looking to set BackgroundImage to the NavBar in NavigationPage Xamarin.Forms app but I can't find an answer. Dose anybody know how to do it? I can change the Color property but I need the company logo in the top bar.

Answer 1

Since it is not supported by the Xamarin.Forms framework, you'll need to create a custom renderer for NavigationBar (the class to render is as far as I understand is NavigationRenderer or NavigationPageRenderer).

Then in the render class in android add a drawable image and in iOS a UIImage to the top bar.

Edit - I thought of another solution - without using custom renders, you can achieve this by removing the existing bar, by setting in each page this command:

NavigationPage.SetHasNavigationBar(this, false)

And creating a custom navigation bar which is wrapped in a grid, it should look something like this:

<Grid>
   <Image Source="BackgroundImage.png"/> <!-- This should fill the grid -->
   <Image Source="back_button" HorizontalOptions="StartAndExpand" Aspect="AspectFit" >
      <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding NavigateBackCommand}"/>
      </Image.GestureRecognizers>
    </Image>
</Grid>