(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Windows Phone 7 for Silverlight Developers: Portrait and Landscape & Themes

(2 votes)
Silverlight Show
>
Silverlight Show
Joined Nov 03, 2008
Articles:   25
Comments:   33
More Articles
0 comments   /   posted on Jul 14, 2011
Categories:   Windows Phone

SilverlightShow has the honour to publish an entirely new ebook by the 4-time awardee of a Silverlight MVP title András Velvárt: "Windows Phone 7 for Silverlight Developers". Below and in a previous article you may find free parts of the Design Considerations chapter of this ebook. 

A full overview of the topics covered in the eBook is available here. The ebook is available for instant download.


About this eBook

From the author: Microsoft brought two of its most interesting development frameworks to the phone: XNA and Silverlight. Silverlight developers can also right at home with Windows Phone 7. It is said that if you are already a Silverlight developer, you already know 90% of what is needed for developing Silverlight applications for the phone. This e-book is about the remaining 10%, written by Silverlight MVP and author of the WP7 app “SurfCube 3D Browser”: András “@vbandi” Velvárt.

Note: this e-book covers Windows Phone 7.0 development. Footnotes have been added where Mango (the upcoming update of Windows Phone 7) is different, but the Mango API is not detailed here.

Portrait and Landscape

While you rarely rotate your desktop or even laptop monitor, a phone naturally supports both Portrait and Landscape modes. The current orientation can be read using the PhoneApplicationPage.Orientation property. It returns one of the PageOrientation enumeration values: None, Portrait, Landscape, PortraitUp, PortraitDown, LandscapeLeft, LandscapeRight.

If you want to programmatically set the orientation of the page, you can set the SupportedOrientations property of the PhoneApplicationPage class to Portrait, Landscape or PortraitOrLandscape. In the latter case, the UI will automatically rotate based on the input from the accelerometer. Combined with the advanced layout features of Silverlight, you can create an UI that adheres to the layout changes without having to write a single line of code. See Figure 14 for an example from the app “Guitar Tuner”.

clip_image002 clip_image004

Figure 14 - Guitar Tuner shows instructions and settings at the bottom in Portrait mode, but in Landscape, the Scope display and the string chooser takes up the entire screen, making the tuner easier to read on stage.

Themes

The user of the phone doesn’t have too many choices to personalize his or her device. The lock screen wallpaper can be changed, the tiles on the Start screen can be moved around and changed, and of course, the Theme of the phone can be changed, too. There are two backgrounds: a dark and a light one, and there is a handful of so-called “accent colors” to choose from. The foreground is essentially the inverse of the Background: if the background is dark, the foreground is white, and if the background is light, the foreground is black. The accent color is the third color: it is the background of the tiles on the Home Screen, and the unread indicator in the Messaging or the Email app.

clip_image006

Figure 15 - Dark and light themes on Windows Phone 7

Microsoft doesn’t insist that you follow the phone’s theme in your application. This is your decision as the designer of the application. However, if you want to follow the theme of the application, you basically have nothing to do - the built-in Silverlight controls do a good job in reflecting the phone’s theme. For example, here is what the Slider control looks like with different themes:

clip_image007

Figure 16 - Silverlight controls automatically adapt to the themes of the phone

If you want to just use the theme in your own controls, there are a bunch of built-in resources you can bind the colors of your items to. For example, here are two ellipses, one with the default dark-blue theme, the other one with a light-red theme:

clip_image008

Figure 17 - Ellipse following the theme of the phone

Here is the code that provides the above output:

<Ellipse Stroke="Black">
<Ellipse.Fill>
<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
</Ellipse.Fill>
</Ellipse>

If you don’t want your application to follow the phone’s theme, you can start from one of the default themes, and copy them into your application. This makes sure that even if you edit all the colors, things like font sizes would remain intact and consistent with the phone.


Subscribe

Comments

No comments

Add Comment

Login to comment:
  *      *