WPF をマテリアルデザインにする

WPF に Google と私が推奨するマテリアルデザインを取り込みます。

はじめに
Material Design In XAML Toolkit
プロジェクトに「MaterialDesignThemes」を追加
MainWindow の Resources で MaterialDesignThemes を読み込む
おわりに

はじめに

Windows のコントロールって野暮ったいんですよね。

できれば簡単にオシャレにカッコよくしたいなっと思って調べていたら、ちょうどいいパッケージがあったので紹介します。

Material Design In XAML Toolkit

GitHub - MaterialDesignInXAML/MaterialDesignInXamlToolkit: Google's Material Design in XAML & WPF, for C# & VB.Net.

Google's Material Design in XAML & WPF, for C# & VB.Net. - GitHub - MaterialDesignInXAML/MaterialDesignInXamlToolkit: Google's Material Design in XAML & WPF, f...

これを、WPF のリソースで読み込むと簡単にオシャレでカッコいいマテリアルデザインにしてくれます。

プロジェクトに「MaterialDesignThemes」を追加

まずはじめに、NuGet を使ってプロジェクトに「MaterialDesignThemes」を追加します。

ソリューションエクスプローラーのプロジェクトで、右クリックをして「NuGet パッケージの管理」を選択します。

NuGet パッケージマネージャーの検索欄に「MaterialDesignThemes」と入力します。

「MaterialDesignThemes.MahApps」を選択して、インストールします。

同時に「MahApps.Metro」「MaterialDesignColors」「MaterialDesignThemes」も入ります。

MainWindow の Resources で MaterialDesignThemes を読み込む

<Window
    x:Class="sample.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"
    Title="MainWindow" Width="800" Height="450" mc:Ignorable="d">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <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" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <!-- 省略 -->
    </Grid>
</Window>

これだけで、見た目が劇的に変化します。

お試しあれ。