WPF での Material Design In XAML Toolkit (MaterialDesignThemes 5.1.0) と MahApps.Metro 2.4.10 の利用

1. 概要

以前、こちらのページ等を参考に Material Design In XAML Toolkit と MahApps.Metro を使用した WPF アプリケーションを開発しました。

先日、Visual Studio 2022 の .NET 8.0 のプロジェクトに最新の MaterialDesignThemes 5.1.0, MaterialDesignColors 3.1.0, MaterialDesignThemes.MahApps 3.1.0, MahApps.Metro 2.4.10 を NuGet パッケージマネージャーでインストールし、App.xaml を下記「2.1. App.xaml」のように書き換えたプログラムを起動させたところ、例外が投げられ、プログラムの実行が中断されてしまいました。

そこで、こちらのページのデモアプリ MahAppsDragablzDemo の App.xaml を参考に、App.xaml ファイルを書き換え、Material Design 2 と MahApps.Metro を使用した WPF アプリケーションが起動されるようにしました。

Material Design 2 と MahApps.Metro を使用したシンプルな WPF アプリケーションを下記の GitHub リポジトリに置きました。

https://github.com/fukagai-takuya/wpf-material-mah-app

2. 実行が中断されたプログラム

下記の App.xaml, App.xaml.cs, MainWindow.xaml, MainWindow.xaml.cs の4つのファイルからなるプログラムを実行しました。

2.1. App.xaml

<Application x:Class="MaterialMahApps.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <!-- MahApps -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />

                <!-- Material Design -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />                

                <!-- Material Design: MahApps Compatibility -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Flyout.xaml" />

            </ResourceDictionary.MergedDictionaries>

            <!-- MahApps Brushes -->
            <SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource Primary700}"/>
            <SolidColorBrush x:Key="AccentBaseColorBrush" Color="{DynamicResource Primary600}" />
            <SolidColorBrush x:Key="AccentColorBrush" Color="{DynamicResource Primary500}"/>
            <SolidColorBrush x:Key="AccentColorBrush2" Color="{DynamicResource Primary400}"/>
            <SolidColorBrush x:Key="AccentColorBrush3" Color="{DynamicResource Primary300}"/>
            <SolidColorBrush x:Key="AccentColorBrush4" Color="{DynamicResource Primary200}"/>
            <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{DynamicResource Primary700}"/>
            <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{DynamicResource Primary500Foreground}"/>
            <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5">
                <GradientStop Color="{DynamicResource Primary700}" Offset="0"/>
                <GradientStop Color="{DynamicResource Primary300}" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="CheckmarkFill" Color="{DynamicResource Primary500}"/>
            <SolidColorBrush x:Key="RightArrowFill" Color="{DynamicResource Primary500}"/>
            <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{DynamicResource Primary500Foreground}"/>
            <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{DynamicResource Primary500}" Opacity="0.4"/>
            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchBrush.Win10" Color="{DynamicResource Primary500}" />
            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchMouseOverBrush.Win10" Color="{DynamicResource Primary400}" />
            <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.ThumbIndicatorCheckedBrush.Win10" Color="{DynamicResource Primary500Foreground}" />

        </ResourceDictionary>
    </Application.Resources>
</Application>

2.2. App.xaml.cs

using System.Configuration;
using System.Data;
using System.Windows;

namespace MaterialMahApps
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
    }

}

2.3. MainWindow.xaml

<metro:MetroWindow x:Class="MaterialMahApps.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls"
        GlowBrush="{DynamicResource AccentColorBrush}"
        BorderThickness="1"
        FontSize="16"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel Margin="10">
            <Label Content="Item A" />
            <TextBox />
            <Button Margin="10" Content="Button A" />
        </StackPanel>
    </Grid>
</metro:MetroWindow>

2.4. MainWindow.xaml.cs

using MahApps.Metro.Controls;

namespace MaterialMahApps
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

2.5. プログラム起動時に投げられた例外

System.Windows.Markup.XamlParseException: 
プロパティ System.Windows.ResourceDictionary.Source の Set で例外がスローされました。 
行番号 17、行位置 18。

内部例外
IOException: リソース themes/materialdesigntheme.defaults.xaml を検索できません。

3. Material Design 2 と MahApps.Metro を使用した WPF アプリケーション

3.1. App.xaml の書き換え

こちらのページのデモアプリ MahAppsDragablzDemo は、Material Design 2 と MahApps および Dragablz を使用したデモアプリになっています。

Dragablz は使用せず、Material Design 2 と MahApps のみを使用するシンプルな構成となるよう、デモアプリ MahAppsDragablzDemo の App.xaml を参考に上記 2.1. の App.xaml を下記のように書き換えました。

<Application x:Class="MaterialMahApps.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:MahAppsBundledTheme BaseTheme="Inherit" PrimaryColor="DeepPurple" SecondaryColor="Purple" />                

                <!-- MahApps -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />

                <!-- Material Design -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" />

                <!-- Material Design: MahApps Compatibility -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Defaults.xaml" />

            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

3.2. プログラム起動後の画面

上記 2. の実行が中断されたプログラムのうち、App.xaml のみを上記 3.1. のように書き換えてビルドし、デバッグ実行しました。今度は例外は投げられず、下記のようなウィンドウが表示されました。