Posted by Alex on February 18th, 2011

Colors can be used to express one’s mood or liven a surrounding. These colors can be bold or vivid and can be used sparingly to emphasize contrast or create a rhythm, and we call these colors Accent colors. In Windows Phone 7 (and most smartphones), the accent color defines the color your various controls and other parts of your User Interface (UI) such as the home screen will display in. With Windows Phone 7 you have the ability to change what theme your native phone applications are running in and you have a choose between Dark or Light themes. With Expression Blend 4 SP1 you can easily preview these two themes by going to the Device panel:

The Dark Theme

The Light Theme

When designing your application remember that the system will automatically try to adjust your application’s colors to match the colors defined by these two themes, as long as you don’t override the default brushes. However, when you’re working with accent colors, your applications need to be explicitly designed to take advantage of them. You have a couple of options when it comes to previewing your Windows Phone 7 application. You can preview with the Windows Phone Emulator or you can preview with a Windows Phone 7 Device. In Expression Blend, this is easy to setup, simply go to the Device panel and chose your preview option. By default Expression Blend will use the Windows Phone Emulator to deploy and run the applications.

Note:

Best practice, when using the Windows Phone Emulator: Shutting down the emulator is recommended only if you do not intend to run the application again; otherwise, leave the emulator open and redeploy and debug the application whenever you need to test an update.

Using Expression Blend 4 and Windows Phone Developer toolkit, let’s dive in and create a simple Windows Phone 7 application that utilizes an accent color and previews it all inside the Windows Phone Emulator:

First make sure you have Windows Phone Developer Tools installed and if not download it from here. Using Expression Blend 4 create a Windows Phone Application (File–>New Project):

Looking at the Object and Timeline panel you will notice that Blend created the PhoneApplicationPage, ApplicationBar and LayoutRoot:

The PhoneApplicationPage is a control that is hosted by the top-level control called a PhoneApplicationFrame. One thing to note here if you’re not familiar with this development is that Windows Phone applications are based on a Silverlight page model where users can navigate forward through different screen of content. Pages hold discrete sections of content in your application and you can create as many different pages as needed. It’s very important to point out that these core elements containers ( PhoneApplicationFrame and the PhoneApplicationPage) are required when developing for Windows Phone 7 application. Do not use the standard Silverlight Frame and Page types. For more information see the PhoneApplicationFrame and the PhoneApplicationPage classed in the class library reference.

The ApplicationBar doesn’t need explaining; it’s a class that allows you to quickly and easily add a toolbar to your application. However, there are a few things I want to point out though. You must add your images to your project before you can use them and the best practice is to create a subdirectory for your image files. You can easily create an ApplicationBar in code (this is only for those you prefer working strictly in code).

The ApplicationBar Class uses the Microsoft.Phone.Shell library so make sure the following directive is included in the page .xaml.cs file you want the Application bar to appear:

using Microsoft.Phone.Shell;

Next create an instance of the ApplicationBar in the page constructor and set it visible and enabled (read comments below):

The Application Bar implementation is pretty much complete at this point, the only step left is to write the Click event handlers for the icon button and the menu item, and this beyond scope of this tutorial.  Note: An InvalidOperationException will be thrown when you add the button to the Application bar at runtime if you do not provide a label string.

In Xaml:

If you’re comfortable working in XAML, you can very easily create the ApplicationBar by hand. The Windows Phone project template that ships with Windows Phone Developer Tools includes an implementation of an Application Bar in the MainPage.xaml file. All you need to do is uncomment the Application Bar definition and modify the code to use your icon images and menu text (Note: This is not available in Expression Blend 4 SP1).

With Expression Blend 4 SP1 you don’t have to do all this because Expression Blend gives you a better User eXperience (UX) when creating an ApplicationBar. In the Object and Timeline panel, right click the PhoneApplicationPage and click Add ApplicationBar:

A couple of clicks you have created the ApplicationBar, it’s that simple!

Right click on the ApplicationBar again to add ApplicationBarMenuItem and ApplicationBarIconButton:

After adding the MenuItems and IconButtons you can then add your images for IconButton using the Property panel under the Common Properties:

Expand the LayoutRoot node and you will notice the TitlePanel (a StackPanel), and the ContentPanel. The ContentPanel is just another grid control and you can put additional content here. The LayoutRoot is the root of the default grid control and this is where all your page content is placed:

Select the ContentPanel and draw an ellipse:

Looking at the Brushes Panel you will notice that Fill brush (SolidColorBrush) is alread selected for you:

With your ellipse still selected, on the Brushes panel, use the Editor tab to change the Fill brush to whatever color you like then click on the Color resources tab:

Now select the PhoneAccentColor and notice that your ellipse Fill brush also changes. Also notice that the accent color is defined as a resource. You can also use a Gradient brush instead of a Solid Fill:

At this point you may be wondering why is there only one PhoneAccentColor (Blue)? Not really, this is the default PhoneAccentColor and you can easily change this to any of the other PhoneAccentColors that are part of the Windows Phone 7 device. Simply switch to the Device panel and chose the one you want:

As you can see the Color resources tab is immediately updated with the new accent color:

Lastly build and save the project. Experiment with different Accent Colors!

Conclusion

This is a very basic tutorial and its purpose is introductory for beginners who are learning to use Expression Blend for Windows Phone 7. Accent colors play a very important role in most cultures and smartphones users will always want to change these colors because of personal preferences. So designing an application that offers this feature is always helpful to such users. Hope this helps someone!

Tags: design, Windows Phone

This entry was posted on Friday, February 18th, 2011 at 2:01 pm and is filed under Expression Blend. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.