|
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.
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.
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.
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.
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.
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
