FREE Metro Light and Dark Themes for WPF and Silverlight Microsoft Controls

Brian Lagunas / Friday, May 24, 2013

The quest for a good application theme never ends.  You spend hours scouring the realms of Google and Bing looking for a clean, modern, and touch friendly theme to use in your application.  That is, until now!  If you have been looking for a free Metro theme for WPF and Silverlight, then look no further.

Infragistics ships a number of great themes with their NetAdvantage for WPF and Silverlight products.  As the Product Manager for these controls, I started asking myself, “Why should we keep these great themes to ourselves?”.  If you know me, you know I am a hard core XAML developer and I am all about community.  Heck, I single handedly wrote the most popular Extended WPF toolkit in the world, and I provided it to everyone for free.  So starting today, I am excited to announce that I am going to be giving away, all of our themes for the standard WPF and Silverlight Microsoft controls.  Yes, I said GIVING AWAY, as in FREE

There is a catch though.  We will NOT support every single Microsoft control.  Why?  Well, because we would prefer for you to use our controls instead.  For example, we will not be providing a style for the Microsoft DataGrid because we have a much better xamDataGrid control.  You get the idea.  Also,  I am not going to give them to you all at once.  I am going to release them a one at a time.  Why?  Well, I want to see what kind of response I get from the community.  If I get zero response or support from the community, then there is no need to keep releasing themes.  I don’t want to waste my time, or the developers who create these themes time.  On the other hand, if the community gives me an overwhelming show of support, then I will be releasing more themes.  Seems fair, wouldn’t you agree?

Today’s free theme is a clean, modern, touch friendly theme in the form of the Infragistics’ Metro Theme.  You will be getting both a Light and Dark version.

Wait, did you say “Metro”?  Yes, I said Metro.  Why?  Because, that’s what everyone knows it as no matter how many times Microsoft tries to rename it.  As we all know by now, there is a ton of confusion around the term “Metro”.  First its “Metro”, then it’s “Modern UI”, then it’s “Microsoft Design Style”, and now it’s…  Well, I don’t know what it is right now.  What’s important here is not the name, but rather the theme itself.  Now on to the free theme.

Silverlight

First up is the Silverlight version of the Infragistics Metro Theme.  We are providing a Metro style for each primitive control that appears in the Visual Studio toolbox, the controls that ship with the Silverlight SDK, and of course some controls from the Silverlight Toolkit.  As you can see, we organized the themes by their respective source so that you have the option to use which ever control you need and not add any unnecessary dependencies on other assemblies.

Infragistics Light and Dark Metro Theme Structure

Adding the theme to your application is very simple.  Just include the resource files for the controls you require the Resources section of your view, or in your App.xaml.

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <!-- Light Theme -->
        <ResourceDictionary Source="Themes/Metro/Light/Metro.MSControls.Core.Implicit.xaml" />
        <ResourceDictionary Source="Themes/Metro/Light/Metro.MSControls.SDK.Implicit.xaml" />
        <ResourceDictionary Source="Themes/Metro/Light/Metro.MSControls.Toolkit.Implicit.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

 

You can see the full list of supported controls in the list below.

  • Accordion
  • AutoCompleteBox
  • BusyIndicator
  • Button
  • CheckBox
  • ComboBox
  • Expander
  • GridSplitter
  • Label
  • ListBox
  • PasswordBox
  • ProgressBar
  • RadioButton
  • Rating
  • RepeatButton
  • Slider
  • TabControl
  • TextBox
  • ToggleButton
  • Tooltip
Metro Theme Light

Metro Theme Light Silverlight

Metro Theme Dark

Metro Theme Dark Silverlight

WPF

Next up is the WPF version of the Infragistics’ Metro Theme.  Just like the Silverlight version, we are providing you with styles for the primitive WPF controls that appear in the Visual Studio toolbox, as well as some controls in the WPF Toolkit.  Just like for the Silverlight version, we organized the themes by their respective source so that if you don’t use the WPF toolkit, there will be no need for your code to take a dependency on it..

Infragistics Light and Dark Metro Theme Structure for WPF

Adding the theme to your applicantion is the same as the Silverlight version.  Just add the resource dictionaries to the Resources section of your View or App.xaml.

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <!-- Dark Theme -->
        <ResourceDictionary Source="Themes/Metro/Dark/MetroDark.MSControls.Core.Implicit.xaml" />
        <ResourceDictionary Source="Themes/Metro/Dark/MetroDark.MSControls.Toolkit.Implicit.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

 

Here is the full list of support controls:

  • Accordion
  • AutoCompleteBox
  • Button
  • CheckBox
  • ComboBox
  • Expander
  • GridSplitter
  • GroupBox
  • Label
  • ListBox
  • PasswordBox
  • ProgressBar
  • RadioButton
  • Rating
  • RepeatButton
  • Slider
  • TextBox
  • ToggleButton
  • Tooltip
Metro Theme Light

Metro Theme Light WPF

Metro Theme Dark

Metro Theme Dark WPF

That’s All Folks

I hope you enjoy this theme and find it useful.  If you like this theme and want me to continue to give away our other themes, please let me know.  Otherwise, I will just assume you’re not interested and move on to other things.  Go ahead, download the Metro Light and Dark Themes for WPF and Silverlight Microsoft Controls and let me know what you think.  After you’ve done that, feel free contact me on my blog, connect with me on Twitter (@brianlagunas), or leave a comment below for any questions or comments you may have.

Enjoy!