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

C#

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

はじめに

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

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

Material Design In XAML Toolkit

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

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

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

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

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

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>

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

お試しあれ。

おわりに

GitHub の DemoApp で、全ての機能が試せます。

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

ソースを見てコピペで取り込めるので、開発もスムーズに行くと思うのでとってもいいですよ。

タイトルとURLをコピーしました