Xamarin.Forms：如何设置 NavigationPage 栏的背景图片

Question

I'm building a Xamarin.Forms app and I need to set the background of the nav bars to an image. Is this possible without creating something super custom? If not, what's the best way to go about it? Has anyone else done it already?

Here's what I need to do. Note the nav bar area with the back button, messaging icon, and "COMMENTARY" text.

Any ideas?

Answer 1

It's not possible with xamarin to change the navigation background image. You have to do that in native for each platform.

1. Android:

in Ressources/layout/Toolbar.axml remove background color and add:

android:background="@drawable/yourImage"

2. iOS

in AppDelegate.cs add:

UINavigationBar.Appearance.BarTintColor=UIColor.FromPatternImage(UIImage.FromFile("YOURIMAGE.png"));
// To change Text Colors to white here
UINavigationBar.Appearance.TintColor=UIColor.White;
// To change Title Text colors to white here
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes() { TextColor = UIColor.White});

3. Images

Don't forget to put your images in different ressources folders.

Hope this help you !

Answer 2

You can add a background image and buttons to Navigation bar. element can be used to customise the element. You could use AbsoluteLayout to achieve what you want (button, Text...etc)

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"                 
                 x:Class="MobileApp.Views.PhotoUploadPage">
   <NavigationPage.TitleView>
        <StackLayout>
            <Image Source="background_image.jpg"></Image>
        </StackLayout>
   </NavigationPage.TitleView>
   <ContentPage.Content>
           <StackLayout>
                <Label Text="Welcome to Multiple Photo Upload!"
                   VerticalOptions="CenterAndExpand" 
                   HorizontalOptions="CenterAndExpand" />
           </StackLayout>
   </ContentPage.Content>
</ContentPage>

https://forums.xamarin.com/discussion/139894/putting-an-image-on-navigation-bar