I was working on a Windows Phone 7 application and the client wanted to always have the light theme and have a special accent color depending on settings inside the app. They wanted to do this for branding reasons so I had to find a way to always have this app look like it was in the light theme and override the accent color to the colors they wanted.
I will now go over how I did that. You can use this to always have the light theme for the app like the native mail app, or even create your own custom theme.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
//OverwriteTheme is the function to overwrite the dark or light theme to your own custom theme. //You can either create your own theme, or copy a theme from the design folder in the WP7 SDK private void OverwriteTheme() { //A string that contains the location to your custom theme file string source = String.Format("/SampleApp;component/Resources/LightTheme.xaml"); //Creates a resourceDictionary file that contains all the data for your custom theme var customThemeStyle = new ResourceDictionary { Source = new Uri(source, UriKind.Relative) }; //Creates a resourceDicionary of the current theme data ResourceDictionary appResources = App.Current.Resources; //Cycle through each entry in the custom Theme ResourceDictionary and check if //there is a matching key resource. If so overwrite the current theme color brush //with the custom color brush. foreach (DictionaryEntry entry in customThemeStyle) { //Gets the SolidBrushColor of the current custom entry SolidColorBrush colorBrush = entry.Value as SolidColorBrush; //Looks to see if there is a current theme entry with matching key SolidColorBrush existingBrush = appResources[entry.Key] as SolidColorBrush; //If both SolidBrushColor variables are not null, overwrite current resource with custom resource if (existingBrush != null && colorBrush != null) { existingBrush.Color = colorBrush.Color; } } //This loads the settings from the application Setting settings = new Setting(); IsolatedStorageGateway settingStorage = new IsolatedStorageGateway(StorageType.Setting); settings = settingStorage.LoadSettings(); //Checks to see what theme setting is selected, and then overwrite the accent Color with the custom accent color if (settings.ThemeSettingID == 0) { (App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Color.FromArgb(255, 255, 129, 24); } else if (settings.ThemeSettingID == 1) { (App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Color.FromArgb(255, 246, 119, 189); } } |
In the code I created a method in the App.xaml.cs file, and this method get called in the constructor for App() before the InitializePhoneApplication() call.
You will also need to set teh background on all the pages to {StaticResource PhoneBackgroundBrush} like
|
1 |
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"> |
I tried to document the code so you can understand what is going on line by line so I will give a little explanation here.
The line
|
1 |
string source = String.Format("/SampleApp;component/Resources/LightTheme.xaml"); |
loads the theme you are going override. Here I copied a default theme resource file (Edit: the theme resource file is ThemeResource.xaml) from the design folder located on my machine at C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design\LightBlue and called it LightTheme.xaml. If you look in the design folder you will see many folders.
Then the code went though all the entries and compared the ResourceDictionaries, if the custom theme file contains the key name of a main style element, it will overwrite it’s brushcolor. If you look at a default theme resource file, it contains a bunch of colors with keys and the keys are pretty self explanatory. So if you wanted to create your own custom theme you can start by copying and editing one of those files.
Also in my code you see me checking a setting value and then overriding the accent color depending and the user setting. This isn’t required unless you want the user to select a special accent colors in the settings or want them to change, if you just want one over ridden accent color just put it into your style resource file.
And questions or comments just let me know and thank you for reading.
Looks like a neat solution. I just tried but can’t find any file named lightblue.xaml, the only files I see in that folder are:
-lightBlue.DLL
-System.Windows.xaml
-Themeresources.xaml
where can I find lightBlue.XAML? (or one of these themes)
I am sorry I didn’t make it clearer in my blog post. But the Themeresources.xaml file is the xaml file I copied. I hope this helps!
Looks like just what I needed, but I don’t know where you got the ‘Setting’ and the ‘IsolatedStorageGateway’ classes. Can you point me to where I can download them?
Those are part of a class file I created to handle all the application setting code. So in my code sample it was checking the user settings to determine what theme Accent Brush color should be used. So for your application you don’t need that part, but if you wanted the user to select what theme they want, then you will need to create your own “settings” and save the selected setting into storage. If you need help with that I will create a write up about creating an Isolated storage gateway class.
I hope this helps if not, let me know and I will try to help you out.
-Andrew