Blog Archives

Change WPF Toolbar and Window Skin

Took me some Googling to come across some good links to help me find exactly what I was looking to do. Hopefully my post gets enough hits that you’ll come across my title sooner rather than later, and can benefit from my time and research. :)

If you’re new to WPF, or even if you’ve been using WPF for some quite some time, you may or may not have noticed that theming and skinning is not relatively straight forward, and there are many different ways to achieve the end result visually.

If you’re using WPF simply to learn the new technology, understand that there are pro’s and con’s to WPF vs standard Winforms, and although the latter is technically “legacy”, depending on third party controls you may or may not be using, implementation in Winforms can be very fast and may still be a better option for some projects.

Here’s a simple grid I’ve come up with to help you decide which to use:

  WinForms WPF
Supports Skins No Yes
Uses graphics resources to render No Yes
Easily bind controls with data No Yes
Easy to design a form with drag+drop Yes No
Some cross-platform compatibility with Mono Yes No
Easily customize look and feel of controls No Yes
Already comes with most controls/visuals needed for business app Yes No

As you can see from the table above, if you are trying to quickly knock out a business app that is not going to require heavy visual modification or too reliant on databinding, it’s probably faster in WinForms. Also, I have personally deployed WinForms cross-platform (Mac, Linux) using mono, which I could not get to work with WPF.

Overall though, for most environments, WPF is usually the way to go if not for visual flexibility then for databinding (why are you using windows client apps again?:P).

One ways listed above that WPF really comes out on top is in utilizing the computer’s graphics card and other graphics resources to render forms. The WPF objects on the screen are still contained in a form however, and many theming examples override the draw methods on the forms themselves which don’t properly utilize the effectiveness of WPF.

In general, I have found there are at least three different ways to change the look and feel of your application in WPF:

- Using Silverlight Themes
Using Office Themes
Using your own Custom Themes

If you download and install the Silverlight toolkit (not to be confused with silverlight SDK or silverlight client), you will automatically get multiple dll references which contain XAML themes that can be re-used in WPF. This is a quick way to make your WPF app look good without too much work.

Office themes are pre-built in, and a common choice for many beginner WPF skinners. They share common visuals which you see in many office apps and give your application a more up-to date look and feel with some recognizability by your users also, similar to how Mac applications all share a common theme.

This is also always an option, but be prepared for a long and ardous task and a few lunch days with your favorite designer. Microsoft expressions studio comes with all the tools needed to make your controls as beautiful as you like, and implementing and inheriting from these visuals is actually relatively simple, but when you apply the time it takes to make one control by the amount of different controls you may have, there is alot of work involved. Also for re-usability, you’ll want to put all your custom controls/skins in their own assembly which increases the time even further. If you’re short on time (who isn’t :P), this is not a good option, but in the long-run this could be very beneficial and give your applications their own gleam.

See references for links on how to implement the above and other information regarding skinning and theming in WPF. (The reference links are in order of my google “stream of consciousness” :P)

References
WPF Skins (this blog), <a href="http://ronniediaz.wordpress.com/wp-admin/post.php?post=1250&action=edit
MSDN Blog, http://social.msdn.microsoft.com/forums/en-us/wpf/thread/c87d508b-9195-4a68-831f-315b64520fcf
Codeproject Article, http://www.codeproject.com/KB/WPF/WPFBusinessAppsPartOne.aspx
Stackoverflow Blog, http://stackoverflow.com/questions/260098/any-free-wpf-themes
Codeplex Article, http://wpfcontrib.codeplex.com/wikipage?title=Themes&referringTitle=Home&ProjectName=wpfcontrib
WPF Tutorial.Net, http://www.wpftutorial.net/Expander.html
Silverlight.Net Blog, http://blogs.silverlight.net/blogs/msnow/archive/2009/02/09/silverlight-tip-of-the-day-91-how-to-apply-themes-from-the-silverlight-toolkit.aspx
MSDN Social, http://social.msdn.microsoft.com/forums/en-US/wpf/thread/3c66adb7-fd26-40c7-8404-85f6fefbd392/
C-sharp Corner Article, http://www.c-sharpcorner.com/Resources/Detail.aspx?ResourceId=667
Browsoft Article, http://www.browsoft.com/tutorials/DefaultTheme.html
Jan-Cornelius Molnar (Blog), http://www.vb-magazin.de/forums/blogs/janm/archive/2006/06/19/4655.aspx
MSDN Official Blog, http://blogs.msdn.com/b/wpfsdk/archive/2008/09/08/custom-window-chrome-in-wpf.aspx

Follow

Get every new post delivered to your Inbox.