Skip to content
This repository

Toolkit for creating Metro styled WPF apps

readme.md

The goal of MahApps.Metro is to allow devs to quickly and easily cobble togther a "Metro" UI for their WPF4+ apps, with minimal effort.

I welcome anybody who would like to contribute.

Contents

Currently MahApps.Metro has implicit styles for the following controls

  • Button
  • TextBox
  • PasswordBox
  • CheckBox
  • RadioButton
  • ComboBox
  • ComboBoxItem
  • ScrollBar
  • ToolTip
  • ContextMenu *
  • MenuItem
  • Progress bar
  • Tab Item

And a few extra controls

**There is an issue with ContextMenu's with implicit styles in WPF for any control that uses the standard "Cut/Copy/Paste" menu, go vote for the issue on Connect*

Getting started with MahApps.Metro

Step 1: Grab MahApps.Metro from Nuget

Step 2: In your App.xaml (there are a few caveats to this - see the Themes and Accents section below), add the following:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

The order is important - Controls must come after Colours, else things go a little haywire.

Default Colours

Step 4: (Optional) This example also makes use of the MahApps.Metro.Controls.ToggleSwitch control, based on the ToggleSwitch in Microsoft's WP7 Toolkit. Add a reference to MahApps.Metro.Controls.dll, then add the reference in XAML, and it is used like any other control. ie

<Window 
...
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro.Controls" >
...
<Controls:ToggleSwitch HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,44,8,0" />
...

Themes & Accents

Like WP7, I wanted to provide an easy way to switch the colours of these controls to something to suit your app - be it your logo/branding, user selection, or something else entirely different. However if you have used WP7, you'll know there are two parts to customisation - "theme" and "accent". Theme refers to light or dark, and accent to the highlight colours such as blue, red, green, etc.

To make it easier, I've created a BaseLight.xaml and BaseDark.xaml that can be used in conjunction with an accent. While the capability is there to apply themes and accents, this part has recieved little attention yet, and as such I'd recommend rolling your own BaseLight/BaseDark and Accent. You can apply it like so:

private void ApplyLightGreen()
{
    var greenRd = new ResourceDictionary();
    var lightRd = new ResourceDictionary();

    greenRd.Source = new Uri("pack://application:,,,/MahApps.Metro;component/Styles/Accents/Green.xaml");
    lightRd.Source = new Uri("pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml");


    ApplyResourceDictionary(greenRd);
    ApplyResourceDictionary(lightRd);
}

private void ApplyResourceDictionary(ResourceDictionary rd)
{
    foreach (DictionaryEntry r in rd)
    {
        if (Resources.Contains(r.Key))
            Resources.Remove(r.Key);

        Resources.Add(r.Key, r.Value);
    }
}

This will give you
light green accent

If you were to apply Dark+Red, you'd end up with (remember this is a work in progress),

dark red accent

WARNING: WPF has some very interesting bugs. If you want to apply accents/themes dynamically at runtime, you cannot apply the MahApps.Metro ResourceDictionaries in App.xaml, they have to be applied in each individual Window. This is crazy, I know, but unfortunately this is just how it is at the moment.

Keep in mind, there are some bugs when you move it to Window Resource's over App Resources, argh!

Icons and other resources

Currently MahApps.Metro includes no icons, however I highly recommend Templarian's "Project: Windows Phone Icons". There is even great tutorial on using Expression Design to create vector (XAML!) metro icons designed to fit into this pack. (Which is fantastic, somebody needs to show Microsoft this so they can learn!)

img

At the time of writing, this pack incldues a whopping 264 icons. All for free. And he's taking suggestions on more icons! It's hard to ask for much more than that.

There are other also fantastic CC-licensed resources out there, that may not be "designed for" Metro, but suit it well.

There are of course, other packs out there such such as MetroStation and Window's Wiki WP7 icons, but I was unable to determine the license of those packs so proceed with care.

License

MahApps.Metro is released under a MS-PL license, so that its friendly to devs of open and closed source software.

MahApps.Metro in the Wild

(Contact me if you want to be added to this list!)

References

Something went wrong with that request. Please try again.