XBoxReveal HTML5 Windows Phone Sample: Multiple Resolutions

May 6, 2013 — 3 Comments

In a previous article I wrote about writing an XBox Reveal Count Down Timer for Windows Phone using HTML5 & CSS. By the end of the article we ended up with the following

finalImage

During testing for the sample, I was testing on the Windows Phone Emulator running at 720p running at 720×1280 and everything looks fine.  The challenge is, Windows Phone comes in multiple resolutions so running it on WVGA which is 480×800 you get the following output

wxga-xboxreveal

If you catch it, you will notice the alignment of the image is a little off and is too far down. The next few steps will go through a couple of ways to fix that.

Optimizing Images

Windows Phone 8 comes with multiple resolutions and MSDN’s article Multi-resolution apps For Windows Phone 8 is a great reference and recommended read.

A couple of methods that can be used which are

  1. Javascript code to set the appropriate image depending on the size
  2. Using ScriptNotify and InvokeScript to communicate between C# & JavaScript

In our example, we are going to use option #2 as it will allow me to show how to communicate between C# and Javascript. I do have a previous article on ScriptNotify and InvokeScript on Windows Phone but this is a pretty good time to update that sample as it was written in 2010.

The MSDN article Multi-resolution apps For Windows Phone 8 has a great little helper class called ResolutionHelper which helps determine the current resolution your app is running in. Add the following class to MainPage.xaml.cs outside of the MainPage partial class (NOTE: you can add a new class file and will leave that to you to decide)

In the MainPage.Browser_Loaded() method, add the following code to the end

Notice how at the end of the code, Browser.InvokeScript is called passing in the image to set. Because of this we need to update our JavaScript.  Open up Html/js/index.js and add the following code which will essentially set the image passed in from C#

We also need to change our phone.css to the following by removing

and adding

Before this will work, you will need to add some images to be loaded. Download the following images and add them to /Html/images/ directory.

  1. WVGA
  2. WXGA
  3. 720p 

Run the app on the different emulators and the right sizes should be loaded but now our alignment is way off.

Fixing Alignment

Next thing we will do is fix the alignment for the count down timer and the Multi-resolution apps For Windows Phone 8 article on MSDN will help. Windows Phone comes in three resolutions

  1. WVGA with a resolution of 480×800
  2. WXGA with a resolution of 769×1280
  3. 720p with a resolution of 720×1280

To fix our alignment issues we will be updating the timer.css file using CSS3 Media Queries which has been supported in IE since version 9 and Windows Phone 8 has the IE10 browser.

Add the following CSS to the end of the timer.css file

NOTE: I purposely split the CSS for all screen sizes so readers can see how to split things up. Ideally if things are common, as the font sizes are, you want to update it from one spot only.

Now if you run the app in all three emulators, you will see the alignment issue fixed on the screen.

allEmus

Till this point when you use the app you would have noticed that you can scroll the page with your finger vertically and horizontally which is not the best experience.  In the next part of this series we’ll look at fixing that issue and getting the app ready for the store for submission.

Trackbacks and Pingbacks:

  1. XBoxReveal HTML5 Windows Phone Sample: WebBrowser Control | Mark Arteaga - May 6, 2013

    […] HTML5 & Windows Phone: Multiple Resolutions […]

  2. XBoxReveal HTML5 Windows Phone Sample: Store Certification | Mark Arteaga - May 7, 2013

    […] XBoxReveal HTML5 Windows Phone Sample: Multiple Resolutions […]

  3. XBoxReveal HTML5 Windows Phone Sample: Multiple Resolutions - May 7, 2013

    […] /* 0) { ratingctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating = result['Rating']; SetCurrentRating('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_pnlHolder', result['Rating'], "disabled fullStar", "disabled emptyStar", true); if(votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating!=null) { votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating ++; SetVotesCount('ctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating_lblUsersRated', '(' + votesCountctl00_cphMiddle_cphContent_tr3w45fwwvre_itemRating + ' votes)'); } SetRatingCookie('r', 'i33771', '1'); } else if (result['Status'] == 1) { alert('The session has expired. Please refresh the page to be able to vote!'); } } /* ]]> */ (0 votes) 0 comments   /   posted by Silverlight Show on May 07, 2013 Tags:   windows-phone , html5 , mark-arteaga Read original post at Mark Arteaga's Blog […]

Leave a Reply