🐈

Material Design in XAML Toolkitの使い方

10 min read

はじめに

WPFプロジェクトの画面(XAML)を美麗に、かつ楽にデザインしたい

ボタンの整列や、フォントのサイズなどの配置センスに起因する美麗さはさておき・・
スタイルの統一や変更を楽にするには、MaterialDesignをつかうといいらしい。

参考:すでにあるWPFアプリをマテリアルデザインにする

https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit

この記事の目的

MaterialDesignをつかうといっても、隅々までつかい切るには学習コストが高い。

この記事では、WPFプロジェクトとMaterialDesignを組み合わせた場合に
どこを変更したら何が変わるのかを整理することを目的とする。

最小限のコード変更で、どこを触ればどこが変わるかわかるようにする。

見通しをよくするためにも、なるべくデフォルトのコードからの変更箇所を少なくするよう心掛ける。

序盤は、公式GitHubのクイックスタートにのっとって進める
MaterialDesignInXAML/MaterialDesignInXamlToolkit - Super Quick Start

プロジェクトをつくる

ベースとなるWPFプロジェクトをつくり、MaterialDesignのライブラリをインストールする

メインウィンドウをベースに改変していく

開発者用Powershell
# ソリューションをつくる
> dotnet new sln

.NET 5.0 へようこそ!
---------------------
SDK バージョン: 5.0.301

# プロジェクトをつくる
> dotnet new wpf -o MainProject
テンプレート "WPF Application" が正常に作成されました。

# ソリューションにプロジェクトを追加する
> dotnet.exe sln add .\MainProject\MainProject.csproj
プロジェクト `MainProject\MainProject.csproj` をソリューションに追加しました。

> dotnet add .\MainProject\MainProject.csproj package MaterialDesignThemes
info : パッケージ 'MaterialDesignThemes' の PackageReference をプロジェクト '.\MainProject\MainProject.csproj' に追加しています。

dotnet cliに関するリファレンス

MaterialDesignをつかう

MaterialDesignライブラリをつかうために、App.xamlを編集する

App.xaml
 <Application
     x:Class="MainProject.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="clr-namespace:MainProject"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     StartupUri="MainWindow.xaml">
     <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <materialDesign:BundledTheme
+                    BaseTheme="Light"
+                    PrimaryColor="DeepPurple"
+                    SecondaryColor="Lime" />
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
     </Application.Resources>
 </Application>

MainWindow.xamlにボタンを配置する

MainWindow.xaml
 <Window
     x:Class="MainProject.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:local="clr-namespace:MainProject"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Title="MainWindow"
     Width="800"
     Height="450"
     mc:Ignorable="d">
     <StackPanel>
+         <Button
+             Width="100"
+             Style="{StaticResource MaterialDesignRaisedLightButton}"
+             ToolTip="Resource name: MaterialDesignRaisedLightButton">
+             _LIGHT
+         </Button>
     </StackPanel>
 </Window>

実行すると、紫色のボタンが現れる

App.xamlPrimaryColor="DeepPurple"を指定しているから紫色になった

紫色以外の色を選ぶ

冒頭に貼った公式GitHubのリンクをフォークする

MaterialDesignDemoを実行すると、標題のMaterial Design in XAML Toolkitアプリが立ち上がる
このアプリをつかって、配色を決めていく

ページを進むと以下のような画面がある

MainWindow.xamlのボタンのスタイルは、↑ココからコピペした
(見えにくいが、LIGHTボタンの右下に</>を押すとコピペ用のコードが表示される)

変更前

変更前がわかるように、各種ボタンを配置する
すべて先述の</>からコピペして貼っただけのボタン類

色を選ぶ

Primaryを黄色、Accentを緑にする

App.xamlを変更する

PrimaryColorYellow, SecondaryColorGreenにする

App.xaml
 <Application
     x:Class="MainProject.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="clr-namespace:MainProject"
     xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     StartupUri="MainWindow.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <materialDesign:BundledTheme
                     BaseTheme="Light"
+                    PrimaryColor="Yellow"
+                    SecondaryColor="Lime" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>
 </Application>

実行した結果
Toolkitで選んだ色の通りの配色になっている

もう少し細かく色を選ぶ

参考: Material Design In XAML Toolkit v3.0 の紹介

Brush Namesにあるブラシの色を1つずつ変更する

カラーパレットの色コードをコピーできたら便利なのだけれど・・・

パレットに表示されている色をもとに、App.xamlへ追記する
PPrimary(上図朱色)、SSecondary(上図青色)を表している

  • Hue(色相)はLight,Mid,Darkの3つあるので、それぞれコードを入力する
  • ForegroundBrushは文字色であり、Toolkit右下のText on P/Sのコードを入力する
  • SecondaryMidの指定のみ

参考:Custom Palette Hues

App.xaml
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <materialDesign:BundledTheme
                     BaseTheme="Light"
                     PrimaryColor="Yellow"
                     SecondaryColor="Green" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
             </ResourceDictionary.MergedDictionaries>
            <!-- primary -->
+            <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#ff5983" />
+            <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#fdd835" />
+            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#f50057" />
+            <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#fdd835" />
+            <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#bb002f" />
+            <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#fdd835" />
            <!-- accent -->
+            <SolidColorBrush x:Key="SecondaryHueMidBrush" Color="#304ffe" />
+            <SolidColorBrush x:Key="SecondaryHueMidForegroundBrush" Color="#ff6d00" />
         </ResourceDictionary>
     </Application.Resources>

実行した結果
1つずつの色が自分で選んだとおりの配色になっている

このスタイルはUserControlにも適応されるのか

ユーザーコントロールをつくり、メインウィンドウに埋め込む。

そのとき、ユーザーコントロール側のボタンにもスタイルが適用されるのか?

SubWindowプロジェクトを作成する

開発者用Powershell
# UserControlのプロジェクトを作成する
> dotnet new wpfusercontrollib -o SubWindow
テンプレート "WPF User Control Library" が正常に作成されました。

# さきほど作成した SubWindow プロジェクトをソリューションに追加する
> dotnet sln add .\SubWindow\SubWindow.csproj
プロジェクト `SubWindow\SubWindow.csproj` をソリューションに追加しました。

# MainWindowの参照にSubWindowを追加する
> dotnet add .\MainProject\MainProject.csproj reference .\SubWindow\SubWindow.csproj
参照 `..\SubWindow\SubWindow.csproj` がプロジェクトに追加されました。

SubWindow.xamlを編集する

呼び出される側のコントロールについて、判別しやすいように背景を黒にする
また、ボタンを2つ配置し、1つはデフォルトのまま、もう1つは静的リソースのスタイルを明示する

SubWindow.xaml
<UserControl
    <!-- 中略 -->
    Width="100"
    Height="100"
    Background="Black"
    >
    <StackPanel>
        <Button>
            Sub 1
        </Button>
        <Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}">
            Sub 2
        </Button>
    </StackPanel>
</UserControl>

MainWindow.xamlを編集する

画面の最上部にSubWindowを表示する
(黒い背景に2つのボタンが配置されたUserControlのこと)

MainWindow.xaml
<Window
    ...
    xmlns:subwindow="clr-namespace:SubWindow;assembly=SubWindow"
    ...>
    <StackPanel HorizontalAlignment="Center">
        <subwindow:UserControl1/>
        ...
    </StackPanel>
</Window>

実行結果

中央上方にデフォルトのスタイルではないボタンが2つ配置されている
つまり参照先のユーザーコントロールにまでスタイルが適用されているということ。

おわりに

余計なお世話だけど、公式GitHubのISSUEがたくさん溜まっているようで、今後のメンテナンスに一抹の不安を覚える・・・。

https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit