Sunday, 18 January 2015

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…

Original Marked Up

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...

IMG_1302

IMG_1303


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

48 comments:

http://www.superiorpaper.net/ said...

I think that it will not be a difficult task for you and you will get it done efficiently in no time. I will also use it as practice and will show you my work as well.

Oliver Maurice said...
This comment has been removed by the author.
Oliver Maurice said...

You could also check this site for some helpful tips about compare and contrast essay writing. Check them out

Michael Jones said...


Students could often find it tough to write their academic tasks. It could lead to they not getting desired grades in the academics. Opting for our
Assignment help could be ideal for such students and they can get a complete assignment solution from us.

petterson said...

I like the helpful information you provide in your articles. I’ll bookmark your blog and check again here regularly. I’m quite certain I will learn a lot of new stuff right here! Best of luck for the next!
cheap-dissertation-writing-service

james cook said...

Great post! I am actually getting ready to across this information, is very helpful my friend. Also great blog here with all of the valuable information you have. Keep up the good work you are doing here.
myassignmenthelp reviews

Jijo said...

Did you know the number of courses offered in the Universities here? The number is over 30,000. Is not it amazing? From science to business, everything and every subject personal statement help and essay writing service is taught here.

Jijo said...

Persuing MBA from international universities, here we provide best MBA Help at affordable prices. Buy Term Papers for your MBA online and get higher grades in your academics.

alvin hopkins said...

In finance dissertation a wrong selection of topic, the writer may have thought about scrapping the content and starting all over again from the scratch. Thus, a lot of time will be wasted to find finance dissertation topics.To make it easier for you, we have listed 30 brilliant topics, which can make the whole process of writing finance dissertation much easier.

Raihan Mohammad said...

Best Homework Helper is home to more than 3000 online live college homework tutors who are quite impressive in solving various primary homework related issues. In fact, some of these tutors hold a PhD degree, which clearly shows how competent they are at handling various school and college homework problems.

Students Assignment Help said...

Best and skilled writers at Students Assignment Help are providing Buy assignment Singapore services. We never miss any of the deadlines. Our professional writers are available online always for students help. To get homework help services from us email us at info@studentsassignmenthelp.com

MyAssignmentHelpAu said...

This post is not just informative but impressive also. The post is so convincing that it created an urge to choose Assignment Help services. You can email us at Info@Myassignmenthelpau.Com or Phone Number: +61-2-8005-8227

Students Assignment Help said...

Students Assignment Help provides the expert assignment help services outstandingly to the college students. Our online assignment writers are qualified, and you can hire our online assignment writers at info@studentsassignmenthelp.com

Adam Hebrew said...

The students have very little idea of how they can complete these assignments within a proper time. This is why they go to the Dissertation Writing services that will solve their queries. It has been observed in many cases that the students do not have the sufficient time to write the thesis or make the proper background research work for themselves. This is why the professional experts help the students to write the dissertations.

Dave Leena said...

If you are in need for online writing assistance for an intricate thesis topic, then avail our assignment writing service in U.S. and save your time to relax and do your studies properly. Our assignment help online service in USA has earned huge popularity among both domestic and international students. There’s no better place in the USA than MyAssignmenthelp. Contact us now to buy assignments online in the USA Leave your tensions to us and enjoy your free time.

Harrison Aiden said...

Thank you for posting such a great blog! I found your website perfect for my needs. It contains wonderful and helpful posts. Keep up the good work. Thank you for this wonderful Blog!
Visit: Homework Help

Saivy Hopkins said...

UAE Assignment Help will be delighted to take your worries, anxieties and stress far away from you and make it easy for you to complete your papers as quickly as you want. Turning to custom assignment help uae is the best solution to end your problems and if you find custom thesis writing stressful and time consuming, then you do not need to worry because you are not alone. Our custom thesis writing service using their knowledge and expertise developed over years to make sure that the thesis our customers will get the best.

Vikash Singh said...

I like your working style. Your blog is interesting and informative to me. This article is really good for all newbie here. Thank you for sharing with us! Good luck!. Get more info on top 10 YouTube downloader

Vikash Singh said...

Your resource is so interesting and informative for me and this article explained everything in detail. You have done superb job thanks for sharing this kind of stuff with us and also We're excited about our exclusive report on the top augmented reality development companies of 2018. Have a look at the at theaugmented reality app development companies

satyendra singh said...

Good news. Appreciate this post. Thank you for compiling and sharing it.
We provide breaking coverage for the Mobile App Marketing and update.

MyAssignmentHelpAu said...

This post is not just informative but impressive also. The post is so convincing that it created an urge to choose My Assignment Help services. You can email us at Info@Myassignmenthelpau.Com or Phone Number: +61-2-8005-8227

Jacob said...
This comment has been removed by the author.
Jacob said...

Myassignmenthelp.com can,as we are best case study help provider. Our team of expert case study writers are available online to provide proper guidance and case study help online. Submit requirements and get online case study help now

Mihra Malik said...

Well written Article. Love to read.Black magic specialist in Mumbai

Mia Ryan said...

when they fall short of drafting a paper, seeking study help from the professionals is a wise decision. So if you are looking for professional help in your academics, MyAssignmenthelp.com is the perfect solution for getting study help.

Students Assignment Help said...

Dedicated writers at Students Assignment Help are providing essay writers NZ services to the students without missing the deadlines. Our professional and expert writers are available online every time for help.

Amy Willor said...


A high-standard post with all imperative information about Assignment Help UK services. Looking forward to avail the premium services.

Nathan William said...

You may not have the exact level of proficiency required to modulate such reports and therefore, hiring a CDR writing services, is a clever idea. CDR reports reflect you competency standard to meet the relevant engineering jobs in the islands of Oceania. For the migrants, chances of rejection increase if the report is shabby and inappropriate. Only an expert touch guarantees that your CDR is absolutely appealing and impressive. Cdr Engineers Australia must be a clean and precise report without even a single mistake. For immigrants, expert service is the best option in order to ensure that the report is free from errors. Experts, having good hold on the language, prepare the drafts with utmost proficiency.

UKDissertationHelp said...

The above post has given reliable and genuine information about Assignment Help Australia. Looking forward to avail their eminent services.

Unknown said...

2014 yılında kurulan Holiganbet bahis sitesi, spor bahisleri, canlı bahisler, casino, canlı casino ve tombala oyunları sunmaktadır. Holiganbet'e kayıt olarak 200TL  bonus kazanabilirsiniz. Holiganbet

Vdcasino bahis sitesi 2015 yılından beri güvenilir casino ve slot oyunları sunmaktadır. Vdcasino yeni üyelerine 1000TL hoş geldin bonusu vermektedir. Vdcasino

Asyabahis bahis şirketi yeni üyelerine 20TL deneme bonusu veriyor. Sekabet güvencesi ile açılan Asyabahis, Curacao lisansı ile yayın yapıyor. Asyabahis

Sekabet'in yeni bahis sitelerinden olan Pinbahis 2000TL hoş geldin bonusu veriyor. Pinbahis sitesinden güvenilir bahis yapabilirsiniz. Pinbahis

Betconstruct altyapısına geçiş yapan Wonodds yeni giriş adresi konusunda sıkıntı yaşıyor. 500TL hoş geldin bonusu Wonodds tarafından veriliyor. Wonodds

Pronet Gaming altyapısının en eski sitelerinden olan Betcup güvenilir bahis imkanı sağlar. Betcup ile anında para kazanmaya başlayın. Betcup

Vadibet bahis sitesi Bethub altyapısı ile güvenilir illegal bahis ve canlı bahisler sunmaktadır. Vadibet

Grandbetting bahis firması 2015 yılından beri güvenilir hizmet sunmakla birlikte 400TL hoş geldin bonusu sunmaktadır. Grandbetting

Grandbetting67 üzerinden canlı bahis, spor bahisleri, casino ve canlı casino oyunlarını deneyim edin. Grandbetting giriş güncellemesi olduğunda anında haberdar olun. Grandbet

Students Assignment Help said...

Students Assignment Help provides the best assignment help Darwin from its excellent and highly qualified assignment writers who are qualified from the top universities of UK, Singapore, and USA. They are fluent in providing any type of academic assignments. We never miss the deadline. For any query or help email us at info@studentsassignmenthelp.com

talha said...

I am very happy to read this. This is the kind of manual that needs to be given and not the random misinformation that’s at the other blogs. Appreciate your sharing this best posting. Assignment Help Australia

talha said...

Great site and a great topic as well I really get amazed to read this. It’s really good. I like viewing web sites which comprehend the price of delivering the excellent useful resource free of charge. brass swing chain

Unknown said...

As an established Australia assignment help organization, we always aim to increase the number of in-house experts we have so that we can offer you the perfect assignment writing help in conventional courses like Management, Law, Engineering, etc. We understand how important academic assessments are in developing a student's career and future opportunities, this is why we take extreme measures to ensure that all our solutions are best-in-class. During higher studies in colleges, students often have to prepare multiple documents, quizzes and surprise tests. This is the main reason why most students search for online assignment help over the internet and choose only the most proficient and trusted academic writing experts. Only while doing research and analysis the structure is altered a little. Our thesis help online providers are well adept in each of these structures, which is mainly evident by this information provided by them.

mycoursehelp said...

Thanks for sharing this blog post, such extraordinary data, Appreciate the positive input. I generally like these stuff. Similarly, we examined the substance on the pages of the site, including best Assignment Help writing service specific things, thanks and keep it up.

Adam Hebrew said...
This comment has been removed by the author.
Adam Hebrew said...

Such a nice blog post on this topic. Are you looking for Dissertation Writing Services? MyAssignmenthelp.co.uk is providing dissertation writing service company in the UK from the qualified expert. Our 3000+ dissertation writing experts are available 24x7 to help the UK students and bring forth the peerless dissertations end of the day without asking an amount that exceeds the budget.

MyAssignmentHelpSG said...


Blog Commenting: An unmatched and nonpareil post i have ever seen. The content is so appealing that it has created an impulse to avail Assignment Help Singapore services.

Amy Willor said...


A high-standard post with all imperative information about Assignment Help UK services. Looking forward to avail the premium services.

jedda cain said...

At EssayAssignmentHelp.com.au, you can have 3000+ writers available for you to write your quality assignments before deadline. Know more about assignment help.

Needcdrreport said...

Thanks for sharing your wealthy information. This is one of the excellent posts which I have seen. I go through your all of your blog, but this blog is the best one. It is really what I wanted to see hope in future you will continue for sharing such an excellent post. We also provide blog CDR Report.

Lillian said...

MyAssignmenthelp.com being one of the most active Assignment Help websites has a pool of over 4500+ assignment experts from Australia, UK and US. They are highly qualified and skilled professional writers who have vast experience in writing assignments, dissertations, essays, research papers, term papers etc. Each expert is chosen after rigorous testing and has to prove his academic credentials.

Singapore Assignment Help said...

Premium quality university assignment help services are available at SingaporeAssignmentHelp.com for all the students in Singapore. Our team of experts university assignment helper work according to students need and complete their work accurately

Nikki Heysen said...

StudentsAssignmentHelp.com is the website which is giving assignment writing services for students in all over the world. Our Student Assignment Help services at a low price as we know students cannot afford to pay high cost and all their work will be submitted well before the deadline.

Lillian said...

There are a number of write my academic essay services in the market that promise to solve all your problems, but they don’t. We understand what it takes to run a truly qualitative writing service, the credit going to our expert essay writer online for sure. It’s the combination of top quality essay writing, communication between the writers and customers, on-time delivery and reasonable prices.

Students Assignment Help said...

Students Assignment Help caters assignment help online services by our experience holder assignment writers. You can get assignment writing services from our excellent writers and assignment done on time at the cheapest price. So, email us for any assignmenthelp at info@studentsassignmenthelp.com

Adam Hebrew said...

Along with this, it should also be seen which type of document will be right for finding the appropriate information for an assignment assistance. For example, if the academic writer has to write a brief on a story or novel, he/she must know the whole story in detail, but if only a few facts are required, one can search for it online by using the right keyword.

Vikash Singh said...

I would like to thank you for the efforts you have made in writing this article and this article explained everything in detail. You have done a superb job thanks for sharing this kind of stuff with us. We have shortlisted emerging iot app development companies after performing a thorough research on their IoT services. Have a look