Windows Phone App Styles

Following from the previous post Laying out elements in Expression Blend….

Within the element menu styling is referred to as applying a resource Edit Style > Apply Resource:

Resources can be as raw as a simple colour brush or comprised of many individual resources to form the specific properties you require for your application.

There are core resources which are default to expression blend and specific to the Windows Phone UI, particularly with regards to text/link styling.

Any custom resources created should be based around defaults that already exist, this ensures continuity between applications and core requirements such as ensuring buttons are clickable and have appropriate padding to accommodate a touch screen interface.

Resources can be element specific, control specific or application wide. Colour brushes are an example of a resource that would be applied application wide, you would generally create brushes for the colour palette of your app. These will then be applied to custom resources throughout the application to ensure that, for example, if you modify the red used within the design then all styles are updated with the new colour automatically.

This works very similar to a CSS style sheet where you may use various classes on a div tag to create the desired styling.

The obvious correlation with CSS is the ability to change the look and feel of the application by modifying resources rather than each element individually.

Download the free tools here

Step 4: Adding the glossy elements

Published by Sara Allison

Sara is the editor of Ubelly - when not heads down scouring Ubelly articles for typos (and not always catching them), she's scouting for new writing talent. Give her a shout @SaraAllison if you've got something to say about development/design and want to be heard.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>