【WPF攻略】2.2_MahAppsのモダンデザインをWPFに反映する

前回の記事ではMahApps.Metroをインストールしましたが、デザインを反映するにはコードの編集が必要です。

本記事ではその編集方法をご紹介しますので、一緒に設定していきましょう。

MainWindow.xamlに参照を追加する

一番最初にコードを編集するのは『MainWindow』になります。

というのも最近のアプリは、MainWindowをずっと表示した状態でMainWindowの一部を変更していく方法が主流だからです。

例えばGoogleChromeの画面を見てみましょう。

このような方式のアプリが主流になってきているので、最初は表示させ続ける『MainWindow』にデザインを反映していきます。

フォルダ『Views』の中にある『MainWindow.xaml』を開いてください。

そして、次のコードの色付きの部分を編集・追加してください。

<mahapps:MetroWindow x:Class="PrismWPF.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:interactivity="clr-namespace:Reactive.Bindings.Interactivity;assembly=ReactiveProperty.WPF"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Grid>
        <ContentControl prism:RegionManager.RegionName="ContentRegion" />
    </Grid>
</mahapps:MetroWindow>

まず、追加した5～7行目のxmlnsから始まるコードは参照する名前空間の追加を行っているコードです。

参照先からデザインを反映させるために必要な機能を呼び出すためのコードになります。

次のようなコードを書くことで、変数名を使って呼び出すことができるできるのです。

必要な参照を追加したら、1行目のWindowをMahApps.Metroのデザインが反映された画面であるMetroWindowに変更していきます。

このMetroWindowはMahApps.Metroから呼び出して使う機能なので、名前空間を追加した時に記載した『mahapps』という変数を冒頭に書いて参照しましょう。

ちなみに、画面の実装に使用する言語xamlでは<Grid></Grid>のように有効範囲を挟むことで指定します。

そのため、最終行も</mahapps:MetroWindow>に変更しておきます。

MainWindow.xaml.csの編集

MainWindowの画面構成を変更したので、連動するコードビハインド（xamlに結合されるコード）も一部変更する必要があります。

『MainWindow.xaml』を展開すると『MainWindow.xaml.cs』というファイルがありますので、それを開いてください。

下記のようにコードを変更して、モダンデザインを継承させます。

using MahApps.Metro.Controls;

namespace PrismWPF.Views
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

これで画面表示部分をつかさどるViewの変更が完了しました。

なので、ビルドできるようになっていると思うのですが…

表示される画面はきっと真っ暗の画面のはずです。

App.xamlの編集

これまでの編集で真っ暗の画面になるのは当然の結果です。

なぜなら、アプリの全般設定でデザインを設定していないからです。

アプリの全般設定を行うためにプロジェクトの直下にある『App.xaml』を開いてください。

そして、『<Application.Resources>』の下に次のコードをコピペして、ビルドしてみてください。

       <ResourceDictionary>
           <ResourceDictionary.MergedDictionaries>
               <!--MahApps-->
               <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
               <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>
               <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Purple.xaml"/>
           </ResourceDictionary.MergedDictionaries>
       </ResourceDictionary>

これでモダンデザインの反映は完了しました。

ですが、アプリの画面の色を変更したいときもありますよね。

その場合、追加した6行目のコードの『Light.Purple』の部分を変更します。

まず、Lightの部分をDarkに変更するとアプリがダークモードに変わります。

そして、色の変更はPurpleの部分を変えることでできるのです。

対応している色は次の通りなので、希望の色に変更してみましょう。

アプリ画面の詳細設定

これまでの処理でモダンデザインの反映は完了しているのですが…

画面のサイズや表示場所、タイトルの文字形式などを編集したいときがきっと出てくるはずです。

その場合は、MainWindow.xamlに少し手を加えると、変更することができます。

<mahapps:MetroWindow x:Class="PrismWPF.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:interactivity="clr-namespace:Reactive.Bindings.Interactivity;assembly=ReactiveProperty.WPF"
        prism:ViewModelLocator.AutoWireViewModel="True"
                     WindowStartupLocation="CenterScreen"
                     TitleCharacterCasing="Normal"
                     TitleAlignment="Center"
                     GlowBrush="{DynamicResource AccentColorBrush}"
                     BorderThickness="1"
                     MinWidth="640"
                     MinHeight="480"
                     Width="1024"
                     Height="768"
                     Title="{Binding Title}" >
    <Grid>
        <ContentControl prism:RegionManager.RegionName="ContentRegion" />
    </Grid>
</mahapps:MetroWindow>

こちらの9～18行目が今回編集した部分になります。

このコードに変更することで、画面サイズが1024×768のアプリがディスプレイの中央部に表示されるようになります。

画面サイズの変更は可能ですが、640×480より小さくすることはできなくしました。

アプリのタイトルも大文字小文字が混在した状態でバーの中央に表示されるようになっているはずです。

設定の詳細は次の表のようになっておりますので、あなたの好みに設定してみてください。

プロパティ	設定内容
WindowStartupLocation	アプリを表示する位置（CenterScreenで中央）
SaveWindowPosition	画面表示位置とサイズを保存して次回の軌道に反映する（Trueで発動）
TitleCharacterCasing	タイトルの大文字小文字設定（Normalで混在・Upperで大文字・Lowerで小文字）
TitleAlignment	タイトルの表示位置（Center・Left・Right・Stretch）
GlowBrush	Windowの枠線を光らせるときの色
BorderThickness	Windowの枠線の太さのPixel数
Height	画面の高さ
Width	画面の横幅
MinHeight(MinWidth)	画面の最小高さ（横幅）
MaxHeight(MaxWidth)	画面の最小高さ（横幅）

おわりに

これでデザインを設定することができました。

次回はReactivePropertyを使えるようにするために、ViewModelBaseを実装していきます。

この処理をやっておくと、ViewModelの共通処理を何度も書く必要がなくなるので、ぜひやっておきましょう！

【WPF攻略】2.3_ViewModelBaseを実装しよう 本記事では、ReactivePropertyを使うためにとっても役に立つViewModelの基底クラスの実装コードをご紹介しています...