DEV Community

Kazuhiro Fujieda
Kazuhiro Fujieda

Posted on • Edited on • Originally published at roundwide.com

Migrate To MahApps.Metro 2.x

#csharp #dotnet #wpf

This article shows the migration steps from MahApps.Metro 1.3.0 to 2.4.3 for BurageSnap, a screen capture tool. BurageSnap uses MahApps.Metro to realize its small footprint, as shown below.
BurageSnap.en

Adapt Theme

I first changed the theme specifications as explained in the official document Migration to v2.0.

Old

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Themes/MetroWindow.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Steel.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
Enter fullscreen mode Exit fullscreen mode

New

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/styles/Themes/light.steel.xaml"/>
Enter fullscreen mode Exit fullscreen mode

Adapt Style

Then I had to fix the following style settings. MetroWindow in MahApps 2.x doesn't have the dynamic resource and the properties.

<Style x:Key="WindowStyle" TargetType="mah:MetroWindow">
...
    <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
    <Setter Property="TitlebarHeight" Value="24"/>
    <Setter Property="TitleCaps" Value="False"/>
    <Setter Property="WindowMinButtonStyle" Value="{StaticResource WindowButtonStyle}"/>
    <Setter Property="WindowCloseButtonStyle" Value="{StaticResource WindowButtonStyle}"/>
...
Enter fullscreen mode Exit fullscreen mode

AccentColorBrush

The resource of the same brush can be referred as follows in MahApps 2.x.

<Setter Property="BorderBrush" Value="{StaticResource MahApps.Brushes.Accent}"/></script>
Enter fullscreen mode Exit fullscreen mode

Window Title

TitlebarHeight was just superseded by TitleBarHeight. TitleCaps was replaced by TitleCharacterCasing but having a CharcterCasing type value. I modified these settings as follows.

<Setter Property="TitleBarHeight"Value="24">
<Setter Property="TitleCharacterCasing" Value="Normal"/>
Enter fullscreen mode Exit fullscreen mode

Window Buttons

I used the style properties WindowMinButtonStyle and WindowCloseButtonStyle to make the minimize and close buttons small. But these were eliminated in the 2.x.

Instead, WindowButtonCommands inside MetroWindow has the corresponding properties, LightMinButtonStyle and LightCloseButtonStyle in case of light themes. When defining a style inside another style, we can use Style.Resources as follows.

<Style x:Key="WindowStyle" TargetType="mah:MetroWindow">
...
    <Style.Resources>
        <Style TargetType="mah:WindowButtonCommands" BasedOn="{StaticResource MahApps.Styles.WindowButtonCommands}">
            <Setter Property="LightCloseButtonStyle" Value="{StaticResource WindowButtonStyle}"/>
            <Setter Property="LightMinButtonStyle" Value="{StaticResource WindowButtonStyle}"/>
        </Style>
    </Style.Resources>
...
</Style>
Enter fullscreen mode Exit fullscreen mode

I defined the above WindowButtonStyle to make the button width narrow as follows, but the base style MetroBaseWindowButtonStyle is missing in MahApps 2.x so I had to replace it with MahApps.Styles.Button.MetroWindow.Light.

<Style x:Key="WindowButtonStyle" TargetType="Button" BasedOn="{StaticResource MahApps.Styles.Button.MetroWindow.Light}">
    <Setter Property="Width" Value="26"/>
</Style>
Enter fullscreen mode Exit fullscreen mode

Button Labels

There were other errors in the following ButtonStyle to disable capitalization and boldness of the button labels in the default style. There aren't the MetroButton style and the ButtonHelper class in the 2.x.

<Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource MahApps.Styles.ButtonMetroButton}">
    <Setter Property="mah:ControlsHelper.ContentCharacterCasing" Value="Normal"/>
    <Setter Property="FontWeight" Value="Normal"/>
</Style>
Enter fullscreen mode Exit fullscreen mode

These replacements are MahApps.Styles.Button and ControlsHelper respectively. ControlsHelper, however, have ContentCharacterCasing not PreserveTextCase. Those errors were fixed as follows.

<Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource MahApps.Styles.ButtonMetroButton}">
    <Setter Property="mah:ControlsHelper.ContentCharacterCasing" Value="Normal"/>
    <Setter Property="FontWeight" Value="Normal"/>
</Style>
Enter fullscreen mode Exit fullscreen mode

Next Step

That's all of the migration. Next, I had to migrate Prism from 6.2 to 8.0. MahApps.Metro 2.x is incompatible with the older versions of Prism. Because XamlBehaviors.WPF, the 2.x depends on, conflicts with Windows.Interactivity, the older Prism depends on. I will show the migration steps in another article.

Top comments (0)

Read next

juarezasjunior profile image

Logging Estruturado com Serilog

Juarez Júnior -

asik profile image

Discriminated unions in 2024

André Slupik -

dotnetfullstackdev profile image

Understanding Kafka and Zookeeper: How They Enhance Your .NET App

DotNet Full Stack Dev -

dotnetfullstackdev profile image

JWT, OAuth, OpenID Connect, and Azure AD: Authentication Levels

DotNet Full Stack Dev -