One of the coolest design elements of a Windows Phone application is the parallax effect that uses the background image to make the content pop out at the user. You probably won’t believe this, but yes, Microsoft had one of the coolest design concepts in their mobile platform before even Apple. Apple is just getting this effect in iOS 7. Over 2 years after Microsoft introduced it in Windows Phone 7.

So, our goal in this blog post is to create a background image as quickly as we can and use it in our application. Load up our app from Part 1 & 2 of this series. Then, load Metro Studio. Once you have Metro Studio opened, let’s add another certificate to our SplashScreen project. If you don’t remember how to do this, refer back to Parts 1 & 2.

Now, open the SpashScreen project so we can edit our addition.

Now that you are in the editor, double click on your new icon and rename it to Background.

Now, set the size to 480px, padding to 0px, background to transparent and icon color to #FFFFFFFF (white).

From here we simply need to export the file to our Assets folder in our Visual Studio project. Once it is in there, make sure you include it in your project, set the Build Action to Content and Copy to Output Directory to Copy if newer.

Now that we have the image included in the project, let’s sling some code to create a Panorama control with our cool new background. To make this simple, I will include my code and quickly go over it. Here it is…

First thing that you are going to have to do is make sure that you have the the phone controls namespace:

You can see from above that I added the Panorama control and set the background with an ImageBrush using our Background.png file we just created. An important thing to make sure don’t miss is the Opacity setting on the ImageBrush. This will fade the background image so that it isn’t overwhelming and make your content hard to read.

I also added three PanoramaItems that each include a TextBlock with a bunch of Lorem Ipsum text to help enhance the effect.

Okay, give it a try. Just swipethrough the PanoramaItems and you should see the effect in all of its glory. Notice too, that when you swipe through the last item and back to the first item, it snaps back to the beginning. How did it work? Pretty sweet huh?

Remember, this isn’t the most advanced background you could ever create for your application, but if you are looking for a simple background that represents and showcases your applications look and feel, Metro Studio can help you quickly and cleanly accomplish it.

Thanks and look for the last part of this series where I focus on creating and adding an application bar to our application. So, come back soon!

Ed Glogowski is a Senior Consultant who is passionate about technology. He currently is employed by ITR Mobility, a Minnesota based Cross Platform mobile development company. However, Ed also does freelance work on the side, with a focus on mobile development using Microsoft's technology stack.