Designing for Multiple Orientations by
kirupa | 14 July 2010
Unlike a typical
desktop or laptop, applications on your phone
can be designed to work
well when viewed in either portrait orientation or
in landscape orientation. I emphasize "can be"
because you do not have to make your application
look nice across both orientations. You can just
design for one.
For example, let's say
you only support the portrait orientation. In this
case, your application would look like this by
default when the phone/emulator is viewed in
[ default, portrait orientation ]
When your rotate your
phone/emulator into landscape, because you only
support the portrait orientation, here is what your
application will look like:
[ look Ma, no rotation! ]
Notice that the text
and everything doesn't rotate even though the actual
Of course, you may not
always want to restrict your application to just one
orientation though. You may want your application to
display correctly in both orientations if the user
decides to rotate the phone. In that case, here is
what your application would look like if the
landscape orientation is supported:
[ the content is rotated ]
Notice this time your
text is appropriately rotated to display everything
correctly even though you rotated it. Epic win!
application that looks well across multiple
orientations requires some planning and
experimentation. In this short tutorial, you will
learn how to use
Expression Blend to make it a little easier to
design and preview orientation aware applications!
The only thing you do
need to do is that your Device panel is displayed:
[ behold the Device panel in all its glory ]
If you do not see the
panel displayed, go to Window | Device to make sure
this panel is displayed.
Previewing Multiple Orientations
Your device panel has a section labeled Orientation
with two icons representing Portrait and Landscape:
[ the Orientation property ]
By default, you will be designing in the Portrait
orientation and it will be selected by default. To
change your orientation, click on the Landscape
button. After you change the orientation, you will
find that your artboard and phone chrome adjust
accordingly to allow you to design and preview what
your application will look like in the new
[ the phone chrome on the artboard rotates ]
You can quickly switch between both orientations
by toggling between the Portrait and Landscape
buttons in your Device panel.
Actually Supporting Multiple Orientations
By default, each Phone Application page you create
is designed to only work in portrait orientation.
Clicking on the Portrait and Landscape buttons in
the Device panel only provides you with a
design-time preview of what your application looks
like inside Expression Blend.
To actually have your
running application support multiple orientations,
you will need to explicitly tell each page in your
application to support multiple orientations. There
is an easy way and a not-so-easy way to do this.
Easy Way to Support Multiple Orientations
From the first moment you change orientations, your
Device panel will display a small blue information
icon next to the Portrait and Landscape buttons:
[ the mysterious information button!
This icon appears
because you are currently in an orientation that
isn't supported by your device/emulator at runtime.
As the tooltip says when you hover this icon, simply
click on it to enable both orientations on your
page. Once you click it, this icon will no longer
Not-So-Easy Way If you want to manually
set which orientations are supported without
clicking on the icon, you have a slightly more
complicated path ahead of you. I really do mean it
when I mention the word slightly!
PhoneApplicationPage node from the object tree
(Objects and Timeline panel), look in the Common
Properties category in your Properties Inspector,
and find the SupportedOrientations property:
the SupportedOrientations property ]
By default, this
property will be set to Portrait. Click on the
drop-down and select the appropriate orientation you
want to support at runtime:
select the orientation(s) you wish to support at
The values you can
choose from are Portrait,
Landscape, and PortraitOrLandscaope (aka both).
In case you were
curious... Clicking on the
information button in the Device panel simply sets
the SupportedOrientations to PortraitOrLandscape for
you without you having to figure that out yourself.
Conclusion While most of your applications
will be designed for one orientation or the other,
you may find yourself wanting to design a few pages
to work across both. At the most basic level,
changing the orientation results in the available
space for your application changing.
When you preview an
orientation in Expression Blend, we simply adjust
the available space to simulate what your
application will look like at runtime. In a future
tutorial, we can look at more advanced scenarios
where rotating the device/emulator allows your
application to do something more advanced than just
resizing to take into account the change in space.
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.