WPFにマテリアルデザインを適応する方法

Ⅰ. はじめに

タイトルの通り「WPFにマテリアルデザインを適応する方法」です。

Ⅱ. やり方

1. 必要なパッケージをインストールする

Install-Package MaterialDesignThemes
Install-Package MaterialDesignThemes.MahApps

2. App.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/Colors.xaml" />
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.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>

3. MainWindow.xaml を変更する

<metro:MetroWindow
  ...
  xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls"
  GlowBrush="{DynamicResource AccentColorBrush}"
  BorderThickness="1"
  Title="MainWindow" Height="200" Width="300">
  <Grid>
    <Button Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75"/>
  </Grid>
</metro:MetroWindow>

4. MainWindow.xaml.cs を変更する

public partial class MainWindow : MetroWindow
{
  public MainWindow()
  {
    InitializeComponent();
  }
}

実行結果

参考

• https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit
• https://github.com/MahApps/MahApps.Metro