Using the Device Panel
by kirupa |  9 November 2010

  Have questions? Discuss this Windows Phone 7 tutorial with others on the forums.

Unlike desktop and web applications, your Windows Phone applications can be viewed in multiple orientations, can be run in either a Light or Dark theme, and can be customized using various accent colors. Designing across all of these combinations of orientations and looks may seem like a daunting challenge.

While I am not going to dismiss the effort it would take for you to take all of those cases into account when designing your application, there are some features in Expression Blend that can help you out. The one I am going to focus on in this article is the Device Panel:

[ all hail the Device panel! ]

The Device Panel is a one-stop shop where you can preview inside Expression Blend what your application will look like in the various orientation and theme combinations a user may have set. In this short article, you will learn how to use the various features the Device Panel exposes to make your life easier.

Getting Started
Make sure you have everything up and running to do Windows Phone development. Once you are setup, go ahead and launch Expression Blend and create a new Windows Phone application.

Once you have launched Expression Blend, go ahead and display the Device Panel. The tab for this panel should be visible in the top-left group of panels:

[ the Device panel tab ]

If the panel or the tab for it is not there, go to Window | Device and make sure that the Device entry is checked:

[ the Window menu provides you quick access to all of the panels ]

By now, you should see your Device Panel displayed. If you see the panel, congratulations! This was the hard part actually. As you will see, once you have the panel displayed, everything else is pretty easy.

Using the Device Panel
In a nutshell, the device panel allows you to preview inside Expression Blend what your app will look in the various orientation and theme settings. Let's look at how you can preview each of these settings in the following section.

The two orientations supported are Portrait and Landscape, and you can click on the icon representing each orientation to simulate what your application will look like:

[ you can preview in either Portrait or Landscape ]

When either the Portrait or Landscape button is clicked, your application's available width and height is adjusted accordingly while taking into account any additional space that gets taken up by the shell such as the System Tray.

Here is what your app looks like when you hit the Landscape button:

[ nobody escapes Ceiling Cat ]

To learn more about how to work with orientations, read the more detailed Designing for Multiple Orientations document.

Theme and Accent Color
Besides orientation, a major set of customizations users can make is with the colors used to display the various UI on the phone. A user can pick between a Light or Dark theme, and the user can also choose from a handful of Accent colors to further personalize the phone.

These personalizations extend to your custom applications as well, so the Device Panel tries to make it easy for you to figure out what your application will look like when a combination of theme and accent colors are set:

[ you can change the theme and accent color here ]

By default, the dark theme is always displayed. You can click on the Light theme button and switch all of the color resources to use the values specified by the Light theme:

[ what your app looks like in the Light theme ]

As you can see, the end result is something that has a light background with all of the other colors tweaked appropriately. The same applies to the Accent color. Depending on which accent color you choose, any colors in your application that are based on the PhoneAccentColor brush will change to reflect the accent color you have specified inside Expression Blend:

[ the Color resources tab provides you access to the system colors ]

You can learn more about how to design your applications using the accent color in the Using the Accent Color tutorial.

Preview Options
The final setting you can change is what happens when you build and run your Windows Phone application. Your application can either be run on the emulator, or your application can be run directly on a device:

[ choose whether you to preview on the emulator or on a real device ]

When you have a Windows Phone 7 device attached to your computer and you have the Windows Phone 7 Device option selected in the Device Panel, hitting F5 will deploy your application directly to your device.

That is really all there is to this short article where you learned how to use the Device Panel to make your life building a Windows Phone 7 application just a little bit easier.

Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.