Migrate To MahApps.Metro 2.x
Tags: csharp, dotnet, wpf
Published: 2021-03-25 09:39:16

This article shows the migration steps from [MahApps.Metro](https://mahapps.com/) 1.3.0 to 2.4.3 for [BurageSnap](https://github.com/fujieda/BurageSnap), a screen capture tool. BurageSnap uses MahApps.Metro to realize its small footprint, as shown below.
![BurageSnap.en](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt5cee3zembmg13qr7tv.png)

## Adapt Theme

I first changed the theme specifications as explained in the official document [Migration to v2.0](https://mahapps.com/docs/guides/migration-to-v2.0).

Old
```xml
<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" />
```
New
```xml
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/styles/Themes/light.steel.xaml"/>
```

## 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.

```xml
<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}"/>
...
```

### AccentColorBrush

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

```xml
<Setter Property="BorderBrush" Value="{StaticResource MahApps.Brushes.Accent}"/></script>
```

### Window Title

`TitlebarHeight` was just superseded by `TitleBarHeight`.  `TitleCaps` was replaced by `TitleCharacterCasing` but having a [CharcterCasing](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.charactercasing?view=net-5.0) type value. I modified these settings as follows.

```xml
<Setter Property="TitleBarHeight"Value="24">
<Setter Property="TitleCharacterCasing" Value="Normal"/>
```

### 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.

```xml
<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>
```

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`.

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

### 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.

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

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

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

## 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.