【WPF】Material Designでオシャレな画面デザインに変更する方法

2021年2月24日2023年5月6日

URLをコピーしました！

C#のWPFに搭載されている標準コントロールはとてもオシャレとは言えません。

文字のフォントを変え、色を変更することで、デザインをカスタマイズすることができます。ただ、あれこれといじっていると時間はかかりますし、デザインの知識がない初心者には限界があります。

そこで、「Material Design In XAML Toolkit」を使って簡単にイケてる見た目に変更する方法を紹介します。

これからプログラミングを始めたい初心者の方におすすめのノートパソコンを紹介しています。プログラミング向けのノートパソコンの選び方も解説していますので、参考にしてみてください。

＞＞おすすめのノートパソコンをもっと詳しくみる

記事の内容

Material Designとは

Material Design（マテリアルデザイン）とは、Googleが提唱したデザインシステムです。

＞＞Material Design In XAML Toolkitの詳細を確認する

デザインの特徴として、ユーザーが直観的に操作できる「わかりやすさ」を追求しています。光や影を駆使して操作した時のアニメーションが豊富に盛り込まれています。

これにより、ユーザーが初めて使用するサイトやアプリをより直感的な操作が可能となり、利便性の向上にも繋がります。

マテリアルデザインの特徴

現実世界の物理法則を取り入れている
紙とインクの要素で組み立てられている
色の数を少なくしては配色している
影を活用して立体感を作っている
連続性のあるアニメーションである

Googleがデモムービーを公開しているので、見てみるとよりイメージできることでしょう。

Googleが提供する殆どのサービスに適用されており、このデザインを採用する企業も増えたことで身近なサービスで見ることも多くなりました。

AbemaTVのデザインもマテリアルデザインで作成されており、説明書がなくても操作することができていますよね。

何となくマテリアルデザインが分かったところで、もう少し詳しく確認してみましょう。

①現実世界の物理法則を取り入れている

「現実世界の物理法則」を画面上に再現することで、画面をどのように操作したらいいのかを直観的に分かるようにしています。

物が重なり具合を体現できるように影をつけたり、物の重さが感じられる動きにすることで、現実世界での体験を取り入れた設計になっています。

②紙とインクの要素で組み立てられている

画面上に表示されるヘッダーやメニューなどは「紙」として定義します。この紙の上に表示される文字やアイコン、写真などを「インク」として定義します。

分かりやすく言い換えると、紙とインクを印刷物と同じルールでデザインするという事です。

色の数を少なくしては配色している

マテリアルデザインでは、メインの色となるメインカラーとメインカラーと同じ色合いのサブカラー、目立つように他の色と異なる色合いのアクセントカラーの３つで構成されています。

使用する色は Google が提供するマテリアルデザイン用のカラーパレットから選びます。

④影を活用して立体感を作っている

マテリアルデザインは、仮想のライト（光）がUIを常に照らしています。

キーライト（画面の上部から降り注ぐ強めのライト）
アンビエントライト（画面の全方向から淡く降るライト）

この光によってシャープな影とソフトな影合わせて２種類があり、この影を活用して画面上に立体感を作ります。

⑤連続性のあるアニメーションである

ユーザーの操作と連続性のあるアニメーションを使います。

ユーザーが操作したことが画面にどんな影響を与えたのか、アニメーションで表現することで、ユーザーの理解をサポートします。

デザインの比較

Material Designを適用していないデザイン(左)と適用しているデザイン(右)を比較しました。

Material Designを適用していないデザインは質素な雰囲気が漂っていてイケていないです。

Material Designを適用しているデザインはシンプルで洗礼された見た目です。ボタンには影があって、ちょっと浮いてるように見えます。操作した時にアニメーションがあるので操作の感触が伝わってきそうです。

Material Designを適用する方法

Googleが提唱するデザインを適用させる方法は以下になります。パッケージのインストールとちょっとした設定変更で使用できますので、ぜひやってみてください。

インストール

まずは、NugetからMaterial Design In XAML Toolkitのパッケージをインストールしましょう。ソリューションエクスプローラーを開いて、プロジェクト名の上にカーソルを合わせて、右クリックして表示された項目から「NuGet パッケージの管理」をクリックします。

「NuGet パッケージマネージャ」の画面で、『Material Design』を検索します。

検索結果内にある『MaterialDesignThemes』をクリックして、インストールします。インストールするバージョンは最新版で問題はありません。（2021年8月31日の最新バージョンは、4.1.0でした。）

『MaterialDesignThemes』をインストールすると、連携するパッケージである『MaterialDesignColors』が同時にインストールされます。

リソースの追加

プロジェクトのソリューションエクスプローラーから「App.xaml」を開きます。Application.Resourcesタブの中に、Material Designを有効にする為のコードを記述します。

以下のソースコードの８行目～１５行目が該当するコードになります。

<Application
    x:Class="Sample.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Sample"
    StartupUri="MainWindow.xaml">
    <Application.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>
    </Application.Resources>
</Application>

以上の設定で、Material Design In XAML Toolkitを適用することができます。とても簡単ですね。

デザイン調整

適用したばかりの状態でも、随分と見た目が変わりました。テキストボックスの形状やボタンの色も変更されています。

ただ、ヘッダー部分の背景がボタンの色と一致していなかったり、ボタンの文字が埋まっていたりするので色や大きさの調整を行って、見た目を整えていきましょう。

ヘッダー部分はMaterial Design In XAML Toolkitで良く使われる Color Zone というコントロールを使います。これを配置するだけでボタンと同じ色にすることができます。

color Zoneの色は、ModeでPrimaryDarkに設定してボタンの色と同じにします。（下のコードの6行目が該当する部分）

color Zoneに TextBlock のコントロールを配置して、TextBlockのTextに”会員のお客様”と入力します。

TextBlockのスタイルを変更して文字フォントとサイズを変更するために、Style=”{StaticResource MaterialDesignHeadline5TextBlock}”を追加します。ここのスタイルは、自由自在に変更ができるので、いろいろといじってみてください。

<md:ColorZone
    Grid.Row="0"
    Height="50"
    HorizontalContentAlignment="Center"
    md:ShadowAssist.ShadowDepth="Depth2"
    CornerRadius="3"
    Mode="PrimaryDark">
    <TextBlock
        Style="{StaticResource MaterialDesignHeadline5TextBlock}"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Foreground="White"
        Text="会員のお客様" />
</md:ColorZone>

次に TextBox のスタイルを変更します。Hint機能を使うことで、TextBoxに文字列が入力されていない時は、ボックス内にヒントを表示することができます。Hint機能は、TextBox以外にComboBoxやDatePickerでも使用できます。

ヒントを表示したい場合、materialDesign:HintAssist.Hintに表示したいメッセージを指定すると使うことができます。

ヒントを使う時の注意点として、Textプロパティは空にしておく必要があります。TextBoxのStyleは、Style=”{StaticResource MaterialDesignFilledTextBox}”にします。

このスタイルもTextBlockと同じでリソースに定義されているものであれば、自分好みのスタイルに変更することが可能です。

<TextBox
    Height="48"
    MaxWidth="400"
    Margin="30,44,30,0"
    VerticalAlignment="Top"
    materialDesign:HintAssist.Hint="your login ID"
    AcceptsReturn="True"
    IsEnabled="{Binding Path=IsChecked, ElementName=MaterialDesignFilledTextBoxEnabledComboBox}"
    Style="{StaticResource MaterialDesignFilledTextBox}
    TextWrapping="Wrap" />

次に Button の文字をアイコンに変更します。アイコンにすることで直感的にそのボタンが何を意味しているのかを表現できます。例えば、下図のようにTwitterアプリのアイコンをクリックしたら、「Twitterにアクセスできるんだろうな」と自然と連想されるはずです。

ButtonにmaterialDesign:PackIconを追加します。このコントロールのKindプロパティで、どのアイコンを表示するのかを指定します。

Material Design In XAML Toolkitに登録されていれば、どんなアイコンでも表示することができます。登録されているアイコンも豊富で、他のサイトから探してダウンロードしたりする手間がなく、ストレスフリーです。

<Button
    Margin="75,0,0,120"
    HorizontalAlignment="Left"
    VerticalAlignment="Bottom"
    Style="{StaticResource MaterialDesignFloatingActionLightButton}"
    ToolTip="MaterialDesignFloatingActionLightButton">
    <materialDesign:PackIcon Kind="Twitter" />
</Button>
<Button
    Margin="180,0,179,120"
    HorizontalAlignment="Center"
    VerticalAlignment="Bottom"
    Style="{StaticResource MaterialDesignFloatingActionLightButton}"
    ToolTip="MaterialDesignFloatingActionLightButton">
    <materialDesign:PackIcon Kind="Facebook" />
</Button>
<Button
    Margin="0,0,75,120"
    HorizontalAlignment="Right"
    VerticalAlignment="Bottom"
    Style="{StaticResource MaterialDesignFloatingActionLightButton}"
    ToolTip="MaterialDesignFloatingActionLightButton">
    <materialDesign:PackIcon Kind="Instagram" />
</Button>

上記の内容でデザインを調整した結果、かなりイケてるデザインになりました。初心者でも簡単にデザインをカスタマイズできます。