Matthias Shapiro

developer/integrator with IdentityMine, infovis enthusiast

Theme Forcing for Windows Phone 7 (Silverlight)

Let’s say you don’t really want to play nice with the theming engine in Windows Phone 7. This would be pretty understandable… when you play nice with theming you either need to 1) come up with some nice innovative solution that detects themes and sets brushes and colors dynamically or 2) use only the black, white, gray and accent colors that Windows Phone 7 theming gives you by default.

If you want to create a design that uses some custom colors, it can be difficult to make sure those colors fit both themes, which can throw a cramp into your creative juices. Additionally, if you decide to toss theme-compatibility to the wind in favor of your own design, you’ll need to make sure all your control templates conform and don’t go all wonky when the user changes their theme.

This can be a pain.

To help in this endeavor, I would like to present two resource dictionaries and a sample project.

DarkStyles.xamly – rename to DarkStyles.xaml (irritating download issue)

LightStyles.xamly – rename to LightStyles.xaml (irritating download issue)

Theme Resistant Sample Project

The basic idea is that I found the source style resource dictionary for all the Windows Phone 7 controls. These styles are implicitly set by the system depending on the users’ settings. We can override these settings with our own local resources. So all we need to so is set either point to the LightStyles.xaml or the DarkStyles.xaml as resource dictionaries in the App.xaml and all the controls will ignore the system settings and conform to our defined settings. Another bonus is that you can use take these dictionaries and use them to play around with colors to see how a solid theme is built in Silverlight.

So, let’s quickly walk through the process of forcing a theme in your project.

First, use Blend. It’s awesome. (You could probably use Visual Studio too, I guess.)

In your project, if you don’t have a “Resources”  folder, right-click on your project and create that folder.’

image

Now right click on your Resources folder and “Add An Existing Item…”. In the resulting pop-up navigate to either the DarkStyles.xaml or the LightStyles.xaml file.

image

This should add the necessary code auto-magically into your App.xaml, but double check. You should see something like this:

image

And that’s it! Sort of. I want to make note of a couple of clean-up issues.

Use Blend To Check Themes

First of all, you should know how to quickly test theming changes in Blend. In the top left-hand corner, you should see a set of tabs that say “Parts”, “Projects”, “Assets” etc. If it doesn’t say “Devices”, go to the menu bar and select “Window –> Device”. This will bring up a tab that looks like this:

image

From here you can change the theme and accent on the fly and see the changes in your design without running the app.

HOWEVER!

Some things don’t show up very well in the Blend theming, so always always always test your app on the emulator or on the phone.

Set Your Root Background

One of those things is that the default status for a PhoneApplicationPage is to have a transparent background. You’ll want to make sure that the LayoutRoot Grid (or layout element) in your application has the background set to “PhoneBackgroundBrush”.

image

Turn Off Your System Tray (Maybe)

Next, you might want to turn off the System Tray at the top of your app. That’s this thing

image

You have no control over what color it is, only whether or not it can be seen. Select the PhoneApplicationPage in your “Objects and Timeline” tab and uncheck the “Show SystemTray”. This is not a must (most apps will still look fine with the SystemTray on) but it’s something to think about

image

Set The Colors On Your App Bar

Finally, if you have an Application Bar in your screen, you’ll want to make sure the colors are explicitly set on those. (Don’t know how to make an application bar? Check this post out.) Select the ApplicationBar in your “Objects and Timeline”. Now click on the little box next to the BackgroundColor property and select “Local Resources –> PhoneChromeColor”.

image

Similarly, set the ForegroundColor to “LocalResources –> PhoneForegroundColor”.You’re all set… you now have a theme-proof application.

15 Responses to Theme Forcing for Windows Phone 7 (Silverlight)

  1. Pingback: Theme Forcing for Windows Phone 7 (Silverlight) | www.nalli.net

  2. giomuti

    Great Tutorial, you saved my life!!!! Thanks!!!

  3. Your solution worked fine when targeted for WP OS 7.0 but when targeted against WP OS 7.5 (aka 7.1 in VS2010), it no longer appears to work — at least in my hands on my machine. When running these tests, I made no changes to your source code and solution other than setting the switch to target either OS 7.0 or OS 7.5.

  4. Wolf Loescher

    Great post, and it has worked for me before. But I’m working on a new app with the 7.1 SDK, and while the light styles are working in Visual Studio designer, they don’t show up in when I run the app in the Emulator. Any ideas if something changed in the new SDK invalidate this approach?

  5. Rohit

    Hi Matthias,

    Thanks for this great tutorial. I needed something exactly like this, and as a WP7 newbie, I didn’t know where to start.

    However, maybe I’m doing something wrong, because I’m seeing a strange behavior: After applying the steps you listed, the application becomes resistant to theme *changes*, but still the starting theme of the application is whatever theme the user has currently set on the phone. For example, if the current theme is Dark, the application changes with the Dark theme, and stays Dark even when the user switches to the Light theme. And vice-versa if the theme at application launch was Light.

    I have tried this with even the default template projects included in Visual Studio, so the issue is not particular to my app. I’m wondering whether the behavior I’m seeing is due to any changes between WP 7.0 and 7.1. (Looking at the date on your tutorial, I understand you wrote it for WP 7.0).

    Could you so kind and try these instructions on a WP 7.1 (Mango) project, and check if you still see the expected result? In any case, thanks for the great resource!

    Rohit

  6. Rohit

    Sorry, typos:

    “For example, if the current theme is Dark, the application *starts* with the Dark theme, and stays Dark …”

  7. Rui Marinho

    This doesn’t work in Windows Phone 7.1

  8. Richard

    Is there a work around to make this work on WP 7.1?

    • First I would like to tell you awesome theme(s). I have been rencarehisg wordpress themes for a while now and this and Okinawa Sky are by far the best I have come across. Much thanks for putting these together. I have a few questions about the Falkner Press theme, brought on by setting it up for my website. I am not sure if it’s best to ask them each in their own post or all in this one. I’ll try it this way let me know if it would be better to create a new post per each question and I will do so.Again, these all pertain to the Falkner theme.1) Is there a way to set up the Features articles slide so as to carry only 1 Featured article (as you can in Okinawa Sky)?2) I would like to move the RSS Feedburner widget down into the bottom bar to replace the Advertisements widget. Is that possible and, if so, how would I go about doing so?3) I am trying to get the Twitter widget to look the same as it does for Okinawa Sky meaning I would like to change the >>>’ link to read Follow Me’ instead and have it link directly to my Twitter Profile and not to the individual Tweet. The plugin is the same for both Themes, but it changes for each. It’s a minor issue, but would really like to tweak it.Again, I really appreciate the help. Thanks again.

  9. Richard

    Awaiting for the updates !

  10. Henrique

    Guys,

    Jeff Wilcox made it available on NuGet and is working fine with WP7.1
    You can find more info hgere: http://www.jeff.wilcox.name/2012/01/phonethememanager/

    Best regards

  11. Luis Costa

    Take a look at this article about forcing windows phone theme.

  12. Pingback: windows phone 8 theme override of default theme not working - How-To Video

  13. Thank for your useful tutorial!

  14. Heya are using WordPress for your site platform?
    I’m new to the blog world but I’m trying to get started and set up my own.
    Do you need any html coding knowledge to make
    your own blog? Any help would be greatly appreciated!

Leave a Comment

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>