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

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!


Comments  (15 )

Dave Gardner
on Wed, May 29 2013 9:16 PM

Nice idea - I would like more themes to be available. How about something that's a little more useful than the Metro theme though? It hardly showcases WPF and Silverlight.

Brian Lagunas
on Wed, May 29 2013 9:54 PM

If there is a good community response then I will be releasing more themes including a very much requested Office Blue theme.

Prakash Singh
on Sat, Jun 1 2013 12:08 PM

Thanks, will play around

Tyler Barthel
on Sat, Jun 22 2013 3:05 PM

First of all thank you for releasing these.  I have one piece of advice for the sample projects.  If you plan on referencing the WPF Toolkit, you should do so through a NuGet package.  The first thing I noticed was I was unable to build because I was missing references and with package restore enabled from NuGet it would have been seamless.

Brian Lagunas
on Mon, Jun 24 2013 11:26 AM

@Tyler, I tried that at first, but when the WPF toolkit started shipping with .NET, there seemed to between the assemblies between the CodePlex site and what shipped with VS.  If I remember correctly, there was even an assembly that doesn't ship with the Nuget packages, but is shipped as part of .NET.  There was a reason I didn't use Nuget.  Can't remember right off the top of my head though.

Michael
on Mon, Sep 9 2013 6:57 AM

Hi Brian,

thank you for this great theme! (Although it ought to be distributed with IG's Metro theme, at least for the controls that IG does not provide and exist in the core/sdk/toolkit)

I have an issue though, i use Light Metro theme for MS controls with Infragistic's Metro theme,

and there is incosistency with the scroll bars on various IG controls. eg XamDataTree, xamComboBox - the initial offset does not start right below the up button / after left button

Any idea?

Brian Lagunas
on Mon, Sep 9 2013 12:38 PM

@redbyron

These themes will ship with the upcoming 13.2 release.  I just wanted to give them to you earlier than October.  Can you submit a bug with support and provide the names of the controls and even screenshots showing the issue?  Email me (blagunas@Infragistics.com) the case number that is assigned to you so that I can keep an eye on it as well.

Ike
on Thu, Sep 26 2013 10:12 AM

We are currently on 12.2 with no immediate plans to move to 13.x

I would like to know how I can gain access to modify the Metro color resources so I can fully support the Metro/Modern UI concept for out users.

There seems a gap in Infragistics'  imtepretation of the Modern UI theming configurability as far as v12 Metro them is concerned

As a basic, I would expect support for

1) Configurable background – baseline one light and one dark – currently there is only the light theme supported

2) Accent Colors – this should be selectable from the standard  8-accent Win8 color pallette (20 if using the WP8 pallete) – but is currently hardcoded in the Infragistics white theme as lightblue

3) Font size – large/small.

So assuming the white background and lightblue accent in the current v12 Metro theme are resource-keyed, I'd like to gain access to them so I can present my users with a background and accent color pallete selection and simply dynamically update those 2 resource keys to retheme the entire application at runtime

Can you tell me how to go about this?

Thanks

Ike

Brian Lagunas
on Thu, Sep 26 2013 10:24 AM

There was inconsistency in our theming for 12.x, but has been improved in 13.2.  What I suggest is to wait until the release of 13.2, which will be very soon, and just grab all the theme files from that release and modify them to fit your needs.

Ike
on Tue, Oct 1 2013 7:28 AM

Thanks Brian.

I got around this by using a ResourceWasher in my App.xaml to 'wash' the Theme files.

I simply set the WashColor of the ResourceWasher to the selected AccentColor whenever the user changes this... and the solution produces remarkably good results. So, based on the default White theme, I now have full support for an arbitrary list of Accent Colors. Not sure how this will work with a black theme yet - but our users are not keen on that anyway. I guess one would have to find the backgroundcolor key and set that to Black and see if the same resource washing technique blends well.

Regards

Ike

Thanks

TechwanSA
on Thu, Nov 14 2013 7:53 AM

Thanks for the great themes. However I have a issue with textbox validation. If the bound property returns a string.empty and the validation rule returns an error, thetextbox's border and tooltip are shown. When I then enter some text, the tooltip dissapears but the border stays.and I have the error:

System.Windows.Data Error: 17 : Cannot get 'Item[]' value (type 'ValidationError') from '(Validation.Errors)' (type 'ReadOnlyObservableCollection`1'). BindingExpression:Path=(Validation.Errors)[0].ErrorContent; DataItem='TextBox' (Name=''); target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String') ArgumentOutOfRangeException:'System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values.

Parameter name: index'

Now, if initially the bound property contains some value, erasing the text will show border and tooltip and typeing some text will remove the error indication.

Brian Lagunas
on Thu, Nov 14 2013 10:20 AM

@TechwanSA could you build me a quick sample?  We have made some recent updates to the error tooltips to fix some issues, and I need to make sure that this is one of the issues we fixed.

TechwanSA
on Thu, Nov 14 2013 10:56 AM

Thanks for responding. I'll try to get a quick sample up. It may take a little bit of time as it's all embedded in a large app.

TechwanSA
on Fri, Nov 15 2013 4:59 AM

Hi Brian, How do I go about sending you a sample?

FodderZone
on Thu, Apr 17 2014 8:45 AM

This is great! Thank you for making these themes free.