MahApps.Metro 0.4 Released!

6 January, 2012

39 commits from three authors later, MahApps 0.4 is now out! There is a few breaking changes, but nothing significant has been removed so it shouldn't be too much to migrate.

Grab the latest source from GitHub, the latest release from NuGet or the latest demo via ClickOnce

What is fixed or changed?

Squared corners on ComboBox/ComboBoxItem and TextBox
ComboBoxItems now adjust width correctly
Fixed accent colour on ToggleSwitch
Many styles are separated out into their own files. This does mean if you want to include everything, you need to include more files, but it's a cleaner, more discoverable approach.
Accessor keys now work on TabItems
TabItems now work with datatemplates or plain strings (only worked with strings previously)
Better design time support for several controls
Fixed a few animations that crashed Visual Studio's designer
A few extra icons from Templarian's Project: Windows Phone Icons added
The assemblies are now strong named and signed
ToUpperConverter and ToLowerConverter are now markup extensions rather than converters

Usage

To use MahApps.Metro, add it via NuGet (Install-Package MahApps.Metro), then to any of your windows add the following to resources

   <Window.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 Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Icons/MergedResources.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
      </Window.Resources>

Due to existing WPF bugs, we can't add this to App resources.

What is new?

WindowCommands control.

It might look pretty boring but the WindowCommands is a combination of the traditional minimise, maximise/restore and close button. You don't have to use this, but it is there if you want those controls and is part of the new MetroWindow (more on that later).

WindowCommands is made up of three text buttons using the Marlett font. I discovered the wonders of Marlett via Bevan's Niche Software blog. By using text instead of images or instead of XAML, its simplier, smaller in filesize and scales so much better.

MetroWindow

This comes to MahApps.Metro via Cameron MacFarland.

While you still need to add the stack of ResourceDictionaries to the Window, MetroWindow simplifies the initial setup of MahApps.Metro.

<Controls:MetroWindow... instead of <Window... automatically adds the dropshadow behaviour, sets up Window movement (which is 'lost' when you remove default window chrome), the previously mentioned WindowCommands, and adds in the animated Metro Content Control.

You don't have to use this control, but I highly recommend you do just because it saves adding all that stuff by hand.

Buttons for everybody!

There are so many buttons!

Standard Button
This just replaces the standard button when you drop in the library, nothing fancy to activate it
MetroCircleButton
"Standard" circle button, designed for icons.
Add the following to a button to apply this style: Style="{DynamicResource MetroCircleButtonStyle}"

AppBarButton
Inspired by Windows Phone 7's app bar buttons which are a circle button with text underneath.

Use the AppBarButton control to use this type of button.

  <Controls:AppBarButton
                              VerticalAlignment="Top"
                              MetroImageSource="{StaticResource appbar_barcode}"
                              Foreground="{DynamicResource BlackBrush}"
                              Content="scan" />

Square button
Another WP7 styled button, this time just for text. Like all the buttons here, has normal, clicked, and hover states.

Add the following to a button to apply this style: Style="{DynamicResource SquareButtonStyle}"
FlatButton
Oh look! Another WP7 styled button! This sort of button can be found when you're making a call - all of the controls (hang up, keypad, etc) are 'flat buttons'.

Flat button lives in <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />, so you'll need to import that as well to use it.