Material Design in XAML Toolkitの使い方
はじめに
WPFプロジェクトの画面（XAML）を美麗に、かつ楽にデザインしたい
ボタンの整列や、フォントのサイズなどの配置センスに起因する美麗さはさておき・・
スタイルの統一や変更を楽にするには、MaterialDesignをつかうといいらしい。
この記事の目的
MaterialDesignをつかうといっても、隅々までつかい切るには学習コストが高い。
この記事では、WPFプロジェクトとMaterialDesignを組み合わせた場合に
どこを変更したら何が変わるのかを整理することを目的とする。
最小限のコード変更で、どこを触ればどこが変わるかわかるようにする。
見通しをよくするためにも、なるべくデフォルトのコードからの変更箇所を少なくするよう心掛ける。
序盤は、公式GitHubのクイックスタートにのっとって進める
MaterialDesignInXAML/MaterialDesignInXamlToolkit - Super Quick Start
プロジェクトをつくる
ベースとなるWPFプロジェクトをつくり、MaterialDesignのライブラリをインストールする
メインウィンドウをベースに改変していく
# ソリューションをつくる
> 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を編集する
<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にボタンを配置する
<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.xamlでPrimaryColor="DeepPurple"を指定しているから紫色になった
紫色以外の色を選ぶ
冒頭に貼った公式GitHubのリンクをフォークする
MaterialDesignDemoを実行すると、標題のMaterial Design in XAML Toolkitアプリが立ち上がる
このアプリをつかって、配色を決めていく
ページを進むと以下のような画面がある
MainWindow.xamlのボタンのスタイルは、↑ココからコピペした
（見えにくいが、LIGHTボタンの右下に</>を押すとコピペ用のコードが表示される）
変更前
変更前がわかるように、各種ボタンを配置する
すべて先述の</>からコピペして貼っただけのボタン類
色を選ぶ
Primaryを黄色、Accentを緑にする
App.xamlを変更する
PrimaryColorをYellow, SecondaryColorをGreenにする
<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へ追記する
PはPrimary（上図朱色）、SはSecondary（上図青色）を表している
-
Hue（色相）はLight,Mid,Darkの3つあるので、それぞれコードを入力する -
ForegroundBrushは文字色であり、Toolkit右下のText on P/Sのコードを入力する -
SecondaryはMidの指定のみ
<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プロジェクトを作成する
# 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つは静的リソースのスタイルを明示する
<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のこと）
<Window
...
xmlns:subwindow="clr-namespace:SubWindow;assembly=SubWindow"
...>
<StackPanel HorizontalAlignment="Center">
<subwindow:UserControl1/>
...
</StackPanel>
</Window>
実行結果
中央上方にデフォルトのスタイルではないボタンが2つ配置されている。
つまり参照先のユーザーコントロールにまでスタイルが適用されているということ。
おわりに
余計なお世話だけど、公式GitHubのISSUEがたくさん溜まっているようで、今後のメンテナンスに一抹の不安を覚える・・・。
Discussion