Material Design In XAML Toolkit (MaterialDesignThemes 5.1.0) and MahApps.Metro 2.4.10

1. Overview

I have previously developed a WPF application using the Material Design In XAML Toolkit and MahApps.Metro with reference to this page and others.

The other day, I installed the latest MaterialDesignThemes 5.1.0, MaterialDesignColors 3.1.0, MaterialDesignThemes.MahApps 3.1.0 and MahApps.Metro 2.4.10 to a “.NET 8.0 project” on Visual Studio 2022 using the NuGet package manager. When I started a program in which App.xaml was rewritten as in “2.1. App.xaml” below, an exception was thrown and execution of the program was interrupted.

So, referring to the App.xaml of the MahAppsDragablzDemo demo app on this page, I rewrote the App.xaml file so that the WPF application using Material Design 2 and MahApps.Metro will be launched.

I uploaded a simple WPF application using Material Design 2 and MahApps.Metro on the GitHub repository below.

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

2. A program whose execution has been interrupted

I executed a program consisting of the following four files: App.xaml, App.xaml.cs, MainWindow.xaml, and MainWindow.xaml.cs.

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. Exceptions thrown during program startup
System.Windows.Markup.XamlParseException: 
Exception thrown on property System.Windows.ResourceDictionary.Source Set. 
Line number 17, line position 18.

Internal exception
IOException: Unable to locate resource themes/materialdesigntheme.defaults.xaml.
3. WPF application using Material Design 2 and MahApps
3.1. Rewriting App.xaml

The MahAppsDragablzDemo demo app on this page is a demo app using Material Design 2, MahApps and Dragablz.

To make a simple configuration using only Material Design 2 and MahApps without Dragablz, App.xaml of the above 2.1. was rewritten as follows, referring to App.xaml of the MahAppsDragablzDemo demo app.

<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. Screen after program startup

Of the program whose execution was interrupted in 2. above, only App.xaml was rewritten as in 3.1. This time, no exception was thrown when the program was launched and the following window was displayed.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA