【Material Design Toolkit】 Buttonのスタイル

　Material Design Toolkitではボタンのスタイルが複数用意されています。
　ボタンのスタイルは大きく分けるとRaisedButton、FlatButton、ToolButton、FloatingAction(Mini)Buttonの４種類が存在します。
　またToolButton以外はPrimaryカラーとAccentカラーの色違いが用意されています。

　RaisedButtonはおそらく最もよく使うボタンのスタイルです。

<GroupBox Header="MaterialDesignRaisedButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="RaisedDarkButton" Width="160" Style="{StaticResource MaterialDesignRaisedDarkButton}"/>
        <Button Content="RaisedButton" Width="160" Style="{StaticResource MaterialDesignRaisedButton}"/>
        <Button Content="RaisedLightButton" Width="160" Style="{StaticResource MaterialDesignRaisedLightButton}"/>
        <Button Content="RaisedAccentButton" Width="160" Style="{StaticResource MaterialDesignRaisedAccentButton}"/>
    </StackPanel>
</GroupBox>

　RaisedButtonボタンではPrimaryカラーの色違い３色（Dark, 標準、Light）とAccentカラーの４色が用意されています。
　Buttonにスタイルを定義しなかった場合はMaterialDesignRaisedButtonが使用されます。

　FlatButtonは枠線がないボタンで、ダイアログ等で利用されます。

<GroupBox Header="MaterialDesignFlatButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="FlatButton" Width="200" Style="{StaticResource MaterialDesignFlatButton}"/>
        <Button Content="FlatAccentButton" Width="200" Style="{StaticResource MaterialDesignFlatAccentButton}"/>
    </StackPanel>
</GroupBox>

　FlatButtonではPrimaryカラーとAccentカラーの２色が用意されています。
　通常は枠線がなく文字だけが表示されていますが、マウスオーバーすると背景色が付きボタンであることがわかる様になっています。

　ToolButtonは名前の通りツールバー等で使用されるボタンです。

<GroupBox Header="MaterialDesignToolButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="MaterialDesignToolButton" Width="250" Style="{StaticResource MaterialDesignToolButton}"/>
        <Button Content="MaterialDesignToolForegroundButton" Width="250" Style="{StaticResource MaterialDesignToolForegroundButton}"/>
    </StackPanel>
</GroupBox>

　見た目がFlatButtonに似ていますが、こちらはマウスオーバーしても見た目が変わりません。また、クリックした際にアニメーションが大きく異なります。

　FloatingAction(Mini)Buttonボタンは丸い形のボタンで、通常サイズと小さいサイズの２種類が用意されています。

<GroupBox Header="MaterialDesignFloatingActionMiniButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="D" Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}"/>
        <Button Content="M" Style="{StaticResource MaterialDesignFloatingActionMiniButton}"/>
        <Button Content="L" Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}"/>
        <Button Content="A" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"/>
    </StackPanel>
</GroupBox>
<GroupBox Header="MaterialDesignFloatingActionButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="D" Style="{StaticResource MaterialDesignFloatingActionDarkButton}"/>
        <Button Content="M" Style="{StaticResource MaterialDesignFloatingActionButton}"/>
        <Button Content="L" Style="{StaticResource MaterialDesignFloatingActionLightButton}"/>
        <Button Content="A" Style="{StaticResource MaterialDesignFloatingActionAccentButton}"/>
    </StackPanel>
</GroupBox>

　FloatingAction(Mini)ButtonもRaisedButtonと同じく４色分のスタイルが用意されています。

　 　あまりいじることはないかもしれませんがクリックした際のアニメーションの色を変えたり、アニメーションをOffにしたりできます。

<Button Content="Feedback" Width="150" Style="{StaticResource MaterialDesignRaisedButton}"
        materialDesign:RippleAssist.Feedback="Black"/>
<Button Content="No Ripple" Width="150" Style="{StaticResource MaterialDesignRaisedButton}"
        materialDesign:RippleAssist.IsDisabled="True"/>

　アニメーション時の色を変えたい場合はmaterialDesign:RippleAssist.Feedbackで色を変更します。
　アニメーションをOffにしたい場合はmaterialDesign:RippleAssist.IsDisabledにTrueを指定してください。

---

　2017/11/4追記 　Material Designが更新されボタン機能が強化されました。
　追加された機能についてはこちらを参照してください。

【Material Design Toolkit】 MahApps.Metroと連携してWindowをカスタマイズする

　Material Design ToolkitとMahApps.Metroを使用してWindowの見た目を変更することができます。
　Windowの見た目を変更しているのはMahApps.Metroなんですが、Material Design Toolkit側でMahApps.Metroと連携するためのライブラリが提供されていますのでそれを使います。
　NuGetでMaterialDesignThemes.MahAppsをインストールしてください。
　これをインストールすると以下の４項目が自動でインストールされます。

　MaterialDesignThemes.MahAppsからインストールされたMahApps.Metro等はバージョンが古いようなので、必要なら最新版に更新してください。
　ライブラリのインストールが済んだらまずはApp.xamlを編集します。

<Application x:Class="MdDemo2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Views\MainWindow.xaml"
             Startup="Application_Startup">
    <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統合設定 -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Defaults.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <!-- MahApps Brushes -->
            <SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource Primary700}"/>
            <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"/>
        </ResourceDictionary>
    </Application.Resources>
</Application>

　ここではMahAppsのリソースディクショナリとMaterial Design Toolkitのリソースディクショナリをマージさせています。
　さらにMahApps用のブラシも定義します。
　ここら辺はデモアプリのMahAppsDragablzDemoにあるApp.xamlからDragablz設定を削除しただけです。
　Dragablzはドラッグアンドドロップでタブを切り離すためのライブラリだそうです（使ったことないのでよくわかりません）。
　今回は使用しないのでDragablz設定は削除しました。
　<!--Material Design-->以下の４項目は前回説明したMaterial Design Toolkitを使用した際に色などを変更するための設定と全く同じです。
　プライマー、アクセントカラー等を変更したい場合はここの設定を変えてください。

　次にWindowをMetroWindowに変更します。

<controls:MetroWindow x:Class="MdDemo2.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:v="clr-namespace:MdDemo2.Views"
        xmlns:vm="clr-namespace:MdDemo2.ViewModels"
        Title="MainWindow" Height="350" Width="525"
                      
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"
        
        xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
        WindowTransitionsEnabled="False"         
        GlowBrush="{DynamicResource AccentColorBrush}">
        
    <Grid>
        <Button Content="Material Design + MahApps" Height="30" Margin="10"/>
    </Grid>
</controls:MetroWindow>

　Windowからcontrols:MetroWindowに変更します。
　また、MahAppsやMaterial Design Toolkit用の名前空間の指定や設定を行います。
　xmlns:materialDesign以下の8行がMaterial Design Toolkit用の設定で、xmlns:controls以下の3行がMahApps用の設定です。
　次にコードビハインドの修正を行います。

using MahApps.Metro.Controls;

namespace MdDemo2.Views
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

　MainWindowは通常Windowクラスを継承していますが、MetroWindowクラス（MahApps.Metro.Controls)に変更します。

　これで準備OKです。
　このコードを実行させると以下の様になります。

　タイトルバーの背景色はプライマリーカラーの色になります。
　別の色にしたい場合はApp.xamlのMahApps Brushes設定にあるWindowTitleColorBrushの色を変更してください。

　このタイトルバーにはコマンドを簡単に追加することができます。

<controls:MetroWindow  xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
       (省略)>

    <controls:MetroWindow.LeftWindowCommands>
        <controls:WindowCommands>
            <Button Content="追加コマンド(左)"/>
        </controls:WindowCommands>
    </controls:MetroWindow.LeftWindowCommands>

    <controls:MetroWindow.RightWindowCommands>
        <controls:WindowCommands>
            <Button Content="追加コマンド(右)"/>
        </controls:WindowCommands>
    </controls:MetroWindow.RightWindowCommands>
</controls:MetroWindow>

　　MetroWindow.LeftWindowCommands又はMetroWindow.RightWindowCommands以下にWindwoCommandsを作成し、その中にButtonを設定するだけです。（ボタン以外も使えると思います）
　追加したコマンド（ボタン）は以下の様に表示されます。