Editing themes of third party wpf controls

Hi Guys,

I thought I should share this as I haven't seen this method anywhere. This is a quick and crazy method for editing themes to match some specific color scheme. So, how can we do this?

Devexpress provides theme editor to change themes of your controls. You can then compile your theme and reference the new dll in your program. Then the following code in the app shell will do the job:-


            Theme theme = new Theme("NewTheme", "DevExpress.Xpf.Themes.TouchlineDark.v13.1");
            theme.AssemblyName = "DevExpress.Xpf.Themes.TouchlineDark.v13.1";
            Theme.RegisterTheme(theme);
            ThemeManager.SetTheme(this, theme);


Make sure you call this before InitializeComponent().

Now that's easy, what's the big deal then?

yeah.. the big deal is editing color schemes in the theme editor manually. It works great if you want to do minor changes like editing the background of textboxes, but that's not all we want every time. Now say for instance, you want to change the entire office blue theme to something similar but in green. I mean, just to match up with existing color theme of a company, you need to change all blue gradients to green. Now that sounds lot of manual work. You will need to go to each control, edit the color and all its gradient stops. But while doing it manually, it is difficult to maintain the same harmony.

There are hundreds of xaml file to edit and thousands of colors used in them.

So what is the solution. This crazy and quick method will save you a lot of manual work.

Step 1: Apply some existing template in your application.

Step2: Run your app and take the screenshot and save it with 24bit bitmap image.

Step3: Go to http://pixlr.com/editor/ and open your file:-

Step4: Now go to Adjustments -> Color balance and use RGB color levels to adjust to your choice:-

Step 5: Once you are satisfied with the new color scheme, save the image with the new name. For example, here I have changed all blacks to greens:-

Step 6: Now you should have two images with exactly same number of pixels but different colors. Now you need to write a c# program which will read all pixels in the original image and the corresponding pixel in the new image and store the hex color in dictionary:-


            Bitmap myBitmapDestination = new Bitmap(@"C:\Users\shiva\Desktop\temp\s1.bmp");
            Bitmap myBitmapSource = new Bitmap(@"C:\Users\shiva\Desktop\temp\s2.bmp");

            Dictionary<string, string> dict = new Dictionary<string, string>();
                           

            for(int i=0; i<myBitmapSource.Width;i++)
                for (int j = 0; j < myBitmapSource.Height; j++)
                {
                    if(!dict.ContainsKey(myBitmapSource.GetPixel(i, j).ToArgb().ToString("X")))
                        dict.Add(myBitmapSource.GetPixel(i, j).ToArgb().ToString("X"), myBitmapDestination.GetPixel(i, j).ToArgb().ToString("X"));
                }


Step 7: After you have a dictionary to map colors, all you have to do is find replace in all source xaml files. My source theme folder was C:\Users\shiva\Desktop\temp\DevExpress.Xpf.Themes.TouchlineDark. So the following lines will do the job:-


            var files = Directory.GetFiles(@"C:\Users\shiva\Desktop\temp\DevExpress.Xpf.Themes.TouchlineDark", "*.xaml", SearchOption.AllDirectories).ToList();


            foreach (var f in files)
            {
                StringBuilder content = new StringBuilder(File.ReadAllText(f));

                File.WriteAllText(f, GetNewTheme(content, dict).ToString());

            }



Step 8: Open the original source in theme editer (in case of Devexpress) and see if it looks good. Now recompile the source and reference the resulting dll.

Step 9: As specified above, apply this theme using this code:-

            Theme theme = new Theme("NewTheme", "DevExpress.Xpf.Themes.TouchlineDark.v13.1");
            theme.AssemblyName = "DevExpress.Xpf.Themes.TouchlineDark.v13.1";
            Theme.RegisterTheme(theme);
            ThemeManager.SetTheme(this, theme);





Happy theming!