C#

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

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

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

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

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

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

Material Designとは

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

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

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

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

マテリアルデザインの特徴
  1. 現実世界の物理法則を取り入れている
  2. 紙とインクの要素で組み立てられている
  3. 色の数を少なくしては配色している
  4. 影を活用して立体感を作っている
  5. 連続性のあるアニメーションである

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザインの比較

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を有効にする為のコードを記述します。

以下のソースコードの8行目~15行目が該当するコードになります。

<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>

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

 

Material Designのデモアプリ

Material Designを作る上で欠かせないものが、Material Designのデモアプリです。このアプリは非常に便利で、コントロール毎に様々な異なるデザインを一覧で確認することができます。

また、デモアプリで見つけたコントロールデザインは右側のボタンをクリックすることで、デザインのXAMLが表示されるので丸ごとコピーして、自分のプロジェクトにペーストすることができます。

下のURLからMaterial Design In Xaml Toolkitのオープンソースが公開されているGit Hubにアクセスします。こんなおしゃれなデザインがオープンソースで使えるのは有り難いことです。

>>デモアプリをダウンロードする

デモアプリのソースコードが公開されていますのでzipフォルダをダウンロードします。

ダウンロードしたフォルダを解凍して、フォルダを開きます。フォルダ内にあるMaterialDesignToolkit.Wpf.slnfという名前のプロジェクトファイルをクリックして、Visual Studioを起動します。

ソリューションエクスプローラーを開いて、MaterialDesignThemes.Wpfの上で右クリックして「リビルド」をクリックします。

リビルトがすべて正常に終了したら、ソリューションプラットフォームを「MaterialDesignDemo」に変更してデバッグをします。

デバッグを終了します。先程ダウンロードしたフォルダ内にあるMainDemo.Wpfという名前のフォルダを開いて、binフォルダ→Debugフォルダ→net472フォルダの順に開きます。

Debugフォルダの中にデモアプリ「MaterialDesignDemo.exe」が出来上がりました。

さっそく、デモアプリを起動してみましょう。WPFでアプリケーションを作成する際は是非このデモアプリを活用して、イケてるデザインにしましょう。

このデモアプリについてはこちらの記事で更に詳しく記載していますので、良ければ参考にしてみてください。

【WPF】Material DesignのデモアプリをインストールするMaterial Designのデモアプリを使って、コントロールのデザインを変更する方法について詳しく記載しています。かっこいいデザインにしたい方やおしゃれなデザインにしたい方にオススメの方法です。...

 

まとめ

今回は、自分が開発するプロジェクトにMaterial Designを適用する方法をご紹介しました。

デモアプリを活用することで、デザインのカスタマイズも進みます。この記事が少しでもお役に立てたなら嬉しいです。

他にもマテリアルデザインについて記載した記事がありますので、参考にしてみてください。

【WPF】Material Designでオシャレなメニュー画面を作成する方法(基礎編)Material DesignのDrawerHostを使って、メニューを左からスライドイン・スライドアウトするオシャレな画面を作成する方法を紹介します。画面のヘッダー部分にはColorZoneを配置します。ハンバーガートグルボタンのIsCheckでメニューの開閉を制御します。...
【WPF】Material Designでオシャレなメニュー画面を作成する方法−PART2WPFでUserControlを切り替える方法を紹介しています。メインメニューで押下したボタンに応じて、ユーザーコントロールを切り替えするサンプルがあります。どのボタンが押下されたかを判定する為に識別子(Uid)を使っています。...

以上、最後まで読んでいただきありがとうございました。

プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA