31 Days of Windows Phone | Day #5: System Theming

This post is Day #5 in a series called the 31 Days of Windows Phone.

Yesterday, I talked about Device Orientation, and how we can accommodate our users when they change the orientation of their device.  Today, we’re going to focus on how we can accommodate our users when they change the theme and colors of their phone.

Dark and Light Themes

If you haven’t already seen it, you have the ability to change the theme on your phone from Dark to Light, and also set an accent color.  Here’s a look at the two themes on the same application:

wp7darktheme wp7lighttheme

Accent Colors

Your users can also set a system-wide accent color.  The operating system gives you a choice of ten bold, bright colors to choose from.  This colors is utilized heavily on the Start screen of the phone, but can also be leveraged in our applications as well.  Here’s a look at the list of colors:

wp7accentcolors

Thinking About Default Values

When you create your application, there’s going to be times when you’re inclined to change the color of something.  I highly encourage that.  Make it your own.  But the more you change, the more you’re going to want to change EVERYTHING.  I’m not suggesting that you shouldn’t have dark text on a white background (or the opposite).  I’m saying that if you’re going to explicitly make something white, you REALLY need to think about what that will look like when the phone has the Light theme assigned.  (It will probably be invisible.)  Thankfully, there’s a really easy way to manage this, and it’s called Expression Blend 4.

Expression Blend 4’s Device Tab

First, open your project in Expression Blend.  The easiest way to do this is to right-click on your project in Visual Studio, and choose “Open In Expression Blend…”

openinexpressionblend

Once you’ve opened it, look at the top of Blend’s UI for a tab called “Device.”  It looks like this:

ExpressionBlendDeviceTab

This tab allows you to preview the look of the different themes and accent colors right on the design surface.  This becomes exceedingly important when we start USING those colors in our own applications.  As an example, I want to have a colored background to my application that leverages the color my user has selected.  To do this, I’m going to use another awesome feature of Expression Blend 4: the Color Resources tab.

Color Resources

Before you start loading up the comments of this post with “Why do I have to use Expression Blend?  I’m a developer!” let me tell you that you can do all of this from Visual Studio 2010.  It’s just MUCH, MUCH harder.  I tend to opt for the easy path when there’s no significant benefit to doing it the hard way.

Windows Phone 7 has a large set of default colors that it uses when you don’t override them, and in many cases, it’s in your best interest to be aware of these colors.  In the images below, you can see that PhoneAccentColor and PhoneBackgroundColor change based on the theme and accent color I have chosen in the Device tab.  The first one is Dark/Blue and the second is Light/Orange.

ExpressionBlendColorResources                          LightOrangeColorResources

By choosing these colors for our application, it actually allows us to bind to one specific system value, and when the user changes their mind, our application is immediately changed to reflect that choice.  In the code example below, you’ll see that I have added a rectangle to my application, with a gradient that slides from the PhoneBackgroundColor to the PhoneAccentColor.  I’ve also set the application title to utilize the phone accent color as well.

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <Rectangle Stroke="Black" Grid.RowSpan="2">
        	<Rectangle.Fill>
        		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        			<GradientStop Color="{StaticResource PhoneBackgroundColor}" Offset="0"/>
        			<GradientStop Color="{StaticResource PhoneAccentColor}" Offset="1"/>
        		</LinearGradientBrush>
        	</Rectangle.Fill>
        </Rectangle>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="BLANKENSOFT" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="system theming" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}">
            	<TextBlock.Foreground>
            		<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
            	</TextBlock.Foreground>
            </TextBlock>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<TextBlock Height="601" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,6,0,0" x:Name="textBlock1" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis turpis sit amet diam elementum molestie. Cras quis massa ante. Morbi sit amet arcu quam, non dignissim nibh. Nunc lectus leo, ornare quis imperdiet id, fringilla vel diam. Proin vitae augue non sem sollicitudin imperdiet ut quis diam. Nulla vitae nulla eros. Curabitur mauris justo, eleifend eu sodales ac, blandit vitae mauris. Pellentesque erat lorem, euismod at sodales eget, sollicitudin sed velit. Praesent est sapien, hendrerit tempor tincidunt quis, posuere ac nunc. Nam odio nisl, feugiat eget blandit sit amet, dapibus id tellus. Sed blandit nisi nunc. Aliquam fermentum justo tristique risus porta sollicitudin. Aenean aliquam congue ornare. Curabitur blandit mi quis odio convallis adipiscing." VerticalAlignment="Top" Width="468" />
		</Grid>
    </Grid>

Here’s what the application looks like in those two examples from above (nothing but the theme and color are different from these two screenshots):

wp7darkbluetheme wp7lightorangetheme

Download the Code

Download this sample, and open it in Expression Blend.  Play with the Color Resources.  Play with the Device tab to preview your changes.  It will definitely make your life easier.

download

8 thoughts on “31 Days of Windows Phone | Day #5: System Theming

  1. My riches consist not in the extent of my possessions, but in the fewness of my wants.

  2. What is the sound of one hand clapping

  3. The danger of success is that it makes us forget the world's dreadful injustice.

  4. Pingback: Getting ready for the Windows Phone 7 Exam 70-599 (Part 5)

  5. Pingback: 31 Days of Mango | Day #6: Motion « Blankenblog

  6. Pingback: 31 Tage Mango | Tag #6: Motion | leitning.de

  7. Pingback: 31 Days of Windows Phone | Day #5 – System Theming | DevBlog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s