Windows Phone 7 Emulator Themes and Resources

If you’ve been looking at building Windows Phone 7 applications using Silverlight you will probably have come across the set of styles and resources that are defined within the App.xaml file. For example the following section defines the foreground and background colors to be used.

<Application 
    x_Class="Sounds.App"
           
    
    
    
    >
    
    <!--RootFrame points to and loads the first page of your application-->
    <Application.RootVisual>
        <phoneNavigation:PhoneApplicationFrame x_Name="RootFrame" Source="/MainPage.xaml"/>
    </Application.RootVisual>

    <!-- Resources for following the Windows Phone design guidelines -->
    <Application.Resources>
        <!--************ THEME RESOURCES ************-->
        <!-- Color Resources -->
        <Color x_Key="PhoneBackgroundColor">#FF1F1F1F</Color>
        <Color x_Key="PhoneContrastForegroundColor">Black</Color>
        <Color x_Key="PhoneForegroundColor">White</Color>
        <Color x_Key="PhoneInactiveColor">#FF666666</Color>
        <Color x_Key="PhoneDisabledColor">#FF808080</Color>
        <Color x_Key="PhoneSubtleColor">#FF999999</Color>
        <Color x_Key="PhoneContrastBackgroundColor">#FFFFFFFF</Color>
        <Color x_Key="PhoneTextBoxColor">#FFBFBFBF</Color>
        <Color x_Key="PhoneBorderColor">#FFCCCCCC</Color>
        <Color x_Key="PhoneTextSelectionColor">Black</Color>
        <Color x_Key="PhoneAccentColor">#FF1BA1E2</Color>

One thing to note here is that if you change the theme background or accent (see image below: Start –> Settings, Theme) this will NOT be reflected by your application the next time your run it. This is because the colors have been hard coded in the App.xaml file

The solution to this is to remove the appropriate resources from the app.xaml file. Of course, this will break your designer experience within Visual Studio and Blend but will mean that your application reflects the theme settings of the emulator. But here lies the problem, which resources do you remove? Well of course, you can remove all the resources that are going to be defined by Windows Phone…. ok, but how do we know what they are?

Justin has been releasing a number of awesome posts on connecting to the emulator using the managed wrapper. In particular the article on Emulator Automation is definitely worth studying closely. Using the hacked emulator image I went trawling through the Windows directory and notices a number of xaml files that looked interesting. Using Justin’s post as a starting point I decided to rip a couple of these xaml files off the emulator and take a look at what’s inside. The process for doing this is relatively straight forward:

– Create a Windows application (WinForms or WPF, doesn’t matter)

– Add references to c:Program FilesCommon Filesmicrosoft sharedPhone ToolsCoreCon10.0BinMicrosoft.Smartdevice.Connectivity.dll

– Write some code to receive the files you want from the emulator

// Get CoreCon WP7 SDK
DatastoreManager dsmgrObj = new DatastoreManager(1033);

Platform WP7SDK = dsmgrObj.GetPlatforms().Single(p => p.Name == "New Windows Mobile 7 SDK");

// Get Emulator / Device
bool useEmulator = true;
Device WP7Device = null;
if (useEmulator)
    WP7Device = WP7SDK.GetDevices().Single(d => d.Name == "Windows Phone 7 Emulator");
else
    WP7Device = WP7SDK.GetDevices().Single(d => d.Name == "Windows Phone 7 Device");

// Connect to WP7 Emulator / Device
WP7Device.Connect();

try{
    ICcConnection phone = WP7Device.GetType().GetField("mConmanServer", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(WP7Device) as ICcConnection;

    f.ReceiveFile(@"windows000_system.windows.xaml", @"c:temp000_system.windows.xaml", true);
    f.ReceiveFile(@"windows000_themeresources.xaml", @"c:temp000_themeresources.xaml", true);

    WP7Device.Disconnect();
}
catch (Exception ex){
    WP7Device.Disconnect();
}

When you execute this code (you need to have the Windows Phone 7 emulator already running) it will download the two files 0000_system.windows.xaml and 0000_themeresources.xaml to the c:temp directory. You can then open them up and inspect which resources are defined. For example the themeresources.xaml file starts as follows:

<ResourceDictionary
  
  
  >

  <Color x_Key="PhoneBackgroundColor">White</Color>
<Color x_Key="PhoneContrastForegroundColor">White</Color>
<Color x_Key="PhoneForegroundColor">Black</Color>
<Color x_Key="PhoneInactiveColor">#ffcccccc</Color>
<Color x_Key="PhoneDisabledColor">#ffcccccc</Color>
<Color x_Key="PhoneSubtleColor">#ff999999</Color>
<Color x_Key="PhoneContrastBackgroundColor">Black</Color>
<Color x_Key="PhoneTextBoxColor">#ffbfbfbf</Color>
<Color x_Key="PhoneBorderColor">#ff999999</Color>
<Color x_Key="PhoneTextSelectionColor">White</Color>
<Color x_Key="PhoneAccentColor">#FF339933</Color>

If you look at the windows directory on the emulator (using the hacked emulator you can used the shortcuts application but you need to select Options-> Show All Files) you will see that there are system.windows.xaml and themeresources.xaml files numbered 0000, 0001, 0002 and 0003, and then also 0100, 0101, 0102 and 0103. As you can guess these correspond to the eight themes (light/dark with orange/blue/red/green). You can download all of these xaml files and take a look at the resources that are defined.

Disclaimer: Don’t make any dependencies on the values of these resources as they could/might/probably will vary before Windows Phone ships.

Leave a comment Cancel reply