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.’
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.
This should add the necessary code auto-magically into your App.xaml, but double check. You should see something like this:
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:
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”.
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
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
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”.
Similarly, set the ForegroundColor to “LocalResources –> PhoneForegroundColor”.You’re all set… you now have a theme-proof application.
Good post however I was wanting to know if you could write a litte more on this topic?
I’d be very grateful if you could elaborate a little bit further.
Appreciate it!
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!
Thank for your useful tutorial!
Take a look at this article about forcing windows phone theme.
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
Awaiting for the updates !
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.
This doesn’t work in Windows Phone 7.1
Sorry, typos:
“For example, if the current theme is Dark, the application *starts* with the Dark theme, and stays Dark …”
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
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?
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.
Great Tutorial, you saved my life!!!! Thanks!!!