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:
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:
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…”
Once you’ve opened it, look at the top of Blend’s UI for a tab called “Device.” It looks like this:
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.
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):
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.
JEFF BLANKENBURG 
Leave a Reply