For Microsoft Kool-Aid Drinkers, Non-paid MS Evangelists written by a Senior Consultant, Passionate about Tech

Metro Studio, Part 3 – Background

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

Okay, so we have gone over how to use Metro Studio, by SyncFusion,  to create splash screens, Metro Studio, Part 1 – Splash Screen, and icons/tiles, Metro Studio, Part 2 – Icons and Tiles.  Now, let’s use the parallax effect in our application.  The best part is that it is already built into the controls that come with the Windows Phone SDK.  It is called the Panorama control and allows us to easily set a property defining the background image that it uses.

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.

NewCertificate

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

EditSplashScreen

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

RenameToBackground

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

MakeChanges

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:

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

Second, grab the code from below and paste it into your application.

   1: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   2:             <phone:Panorama>
   3:                 <phone:Panorama.Background>
   4:                     <ImageBrush Stretch="None" ImageSource="/Assets/Background.png" Opacity="0.15"/>
   5:                 </phone:Panorama.Background>
   6:
   7:                 <phone:PanoramaItem Header="First">
   8:                     <TextBlock TextWrapping="Wrap">
   9:                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
  10:                     </TextBlock>
  11:                 </phone:PanoramaItem>
  12:                 <phone:PanoramaItem Header="Second">
  13:                     <TextBlock TextWrapping="Wrap">
  14:                         Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.
  15:                     </TextBlock>
  16:                 </phone:PanoramaItem>
  17:                 <phone:PanoramaItem Header="Third">
  18:                     <TextBlock TextWrapping="Wrap">
  19:                         Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit.
  20:                     </TextBlock>
  21:                 </phone:PanoramaItem>
  22:             </phone:Panorama>
  23:
  24:         </Grid>

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 swipe through 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?

MainPanorama

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!

 
Comments
 
Comments

No comments yet.

Leave a Reply

You must be logged in to post a comment.