Xamarin Forms–Using background images on iOS

Following on from my last post on creating A Light status bar for iOS, I wanted to go one step further and add in a full-screen background image to my application. This is very easy without a navigation bar, but with one it’s a bit more involved so I thought a blog post would be in order.

If you have no navigation bar then all you really need to do is create an image of the right size (for each physical phone you want to support, such as 4S, 5S, 6, 6 Plus), add images to the resources directory and use them in code or XAML. With a navigation bar it’s a bit more involved as you need to split your source image into two separate images (one for the navigation bar and one for the remainder of the screen).

Then when you have the images defined you need to hook the images to the correct controls, and this is where it gets a little more complex. With a NavigationPage we need to set the navigation bar’s background to an image – but we can’t do this in regular Xamarin Forms code as the property is only available in a custom renderer, so we’ll need to create one.

First off though we need an image – I chose one I took in 2006 whilst on holiday with my family – this is the last time we were all together and it was a beautiful day. Anyhow, I extracted four images in total as shown in the following…

The red outline contains the navigation bar image (640px * 128px) and the background image (640px * 1008px) – these are both for an iPhone 5S which is what I have to develop on at the moment.

The green outline contains the two images for the landscape view, the navigation bar being 1136px * 64px, and the background image being 1136px * 576px. The navigation bar is shorter by default in landscape mode as the status bar is switched off. I believe it’s possible to override this and display the status bar, but I don’t need that so haven’t looked into it further.

I named those images as follows…

• PortraitNavBar@2x.png
• PortraitBackgrouns@2x.png
• LandscapeNavBar@2x.png
• LandscapeBackground@2x.png

With that done I then needed to write a bit of code. First up I had to ensure that the correct background image was shown for the content page – this was simply a job of overriding the OnSizeAllocated member of my content page…

    protected override void OnSizeAllocated (double width, double height)
    {
        base.OnSizeAllocated (width, height);

        if (width < height)
            this.BackgroundImage = "PortraitBackground.png";
        else
            this.BackgroundImage = "LandscapeBackground.png";

    } 

The OnSizeAllocated method is called when the size changes on the phone and it provides the size of the page, so this seemed like a reasonable place to determine which image to load up.

Then I needed to add in a custom render so added a deriver navigation page as shown below…

    public class CustomNavigationPage : NavigationPage
    {
        public CustomNavigationPage (Page content) : base(content)
        {
        }
    }

With that defined I could then add the renderer. The purpose of this renderer is to render the background image of the navigation bar...

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(XamFormsTestbed.iOS.Renderers.CustomNavigationPageRenderer))]

namespace XamFormsTestbed.iOS.Renderers
{
    public class CustomNavigationPageRenderer : NavigationRenderer
    {
        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            var img = UIImage.FromBundle ("PortraitNavBar.png");
            this.NavigationBar.SetBackgroundImage (img, UIBarMetrics.Default);

            img = UIImage.FromBundle ("LandscapeNavBar.png");
            this.NavigationBar.SetBackgroundImage (img, UIBarMetrics.Compact);
        }
    }
} 

Originally I'd tried responding to size changes here, but then read an article that discussed the above mechanism and it appeared to work.

With all that in place I can now display a background image in the navigation bar and also have a correctly formatted image for both landscape and portrait orientations...

And there you have it – a full background image with a navigation bar. Hopefully this will help someone with their application.