C#

【WPF】Material Designのデモアプリをインストールする

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

「百聞は一見に如かず」という言葉がありますので、このデモアプリを操作した際の写真を確認してみましょう。

このようにページ毎にコントロールが纏められており、ボタンコントロールだけでも様々な種類のデザインがあります。またデザインだけでなくコントロールの色も変更できますので、どれにしようか悩んでしまいそうです。

この記事では上記で紹介しているデモアプリをインストールする方法とデモアプリを使う方法について紹介していますので、参考にしてみてください。

インストールする方法

デモアプリはMaterialDesignInXamlToolkitのオープンソースが公開されているGit Hubからコードをダウンロードします。以下のURLからサイトへアクセスをしてください。

Codeボタンをクリックしてzipフォルダをダウンロードします。

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

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

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

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

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

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

デモアプリの使用方法

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

以下のソースコードの8行目~24行目が該当するコードになります。
<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.lightblue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

次にプロジェクトのxmlファイル(デザイナーの表示)を開いて、ヘッダー部分(Windowタグ)にコードを記述します。

以下のソースコードの6行目が該当するコードになります。
<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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="500"
    Height="400"
    mc:Ignorable="d">
</Window>

ここまで準備が完了したらデモアプリを開いて、配置したいコントロールをデモアプリから選びます。今回は試しにボタンをコントロールを配置してみましょう。

配置したコントロールが決まったら、右下にある「View XAML」をクリックします。そのコントロールのXAMLのソースが表示されるので、丸ごとコピーします。

コピーしたソースをプロジェクトのMainWindowに貼り付けをします。

そのまま貼り付けてみると「StaticResourceが定義されてません」というエラーが出てきます。StaticResourceとは、定義されたリソースをコントロール等に設定する際に使用します。

StaticResourceを定義する為にWindow.Resourcesタグで囲って、その中にKeyと数値の組み合わせで記述します。アイコンサイズはkeyをIconSizeにして、サイズを数値で設定します。
<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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow"
    Width="500"
    Height="400"
    mc:Ignorable="d">
    <Window.Resources>
        <system:Double x:Key="IconSize">24</system:Double>
    </Window.Resources>
    <Grid>
        <Button
        IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
        Style="{StaticResource MaterialDesignFloatingActionButton}"
        ToolTip="MaterialDesignFloatingActionButton">
            <materialDesign:PackIcon
            Width="{StaticResource IconSize}"
            Height="{StaticResource IconSize}"
            Kind="Alarm" />
        </Button>
    </Grid>
</Window>

これで下図のように配置したボタンが正常に表示されるようになります。自力でボタンをカスタマイズして作成するのは大変ですが、デモアプリを活用すれば簡単にデザインを変更することができます。


まとめ

いかがでしたでしょうか。デモアプリには様々なデザインのコントロールが用意されており、XAMLのソースをコピーして貼り付けするだけでデザインを変更することができます。

この記事を参考にしてWPFの画面をかっこいいデザインに変更してみてください。

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

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

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

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

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

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

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

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

COMMENT

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

CAPTCHA