Modern UI for WPFのデフォルトAccentColor変更方法と追加方法

どーも。panjaです。

最近、WPFを触っています。
Modern UI for WPF(MUI)を使ってみています。
今回はMUIの小ネタです。

MUIではメインウィンドウのテーマとアクセントカラー(ニッコリマークの背景色)がデフォルトで変更可能になっています。

上の画像では、テーマがLight、アクセントカラーはcyan(R:0x1b,G:0xa1,B:0xe2)になっています。
初期状態ではテーマは「Light、Dark」、アクセントカラーは「lime、green、emerald、teal、cyan、cobalt、indigo、violet、pink、magenta、crimson、red、orange、amber、yellow、brown、olive、steel、mauve、taupe」から選択可能です。

今回はこのアクセントカラーの初期値の変更方法と色の追加方法を紹介します。

デフォルトAccentColorの変更方法

1. GitHubからダウンロードしてきたMUI本体？のソリューション（FirstFloor.ModernUI.sln）を開く
2. 「Shared\Assets\ModernUI.xaml」を開く
3. 33、34行目の内容の「#」以下を好きな値に変更する

<!-- default accent colors and brushes -->
<Color x:Key="AccentColor">#1ba1e2</Color>

※16進で「#rrggbb」という並びになっているようです。
4. ソリューションをビルドする
5. お好きなプロジェクトにビルドして出来たバイナリへの参照を追加する

今回はデフォルトのAccentColorをemerald(#008a00)に変更してみました。
変更後してアプリ起動直後に以下のようになっていれば成功です。

戻るボタンの枠やメインウィンドウの枠も一緒にemeraldになっていますね。

AccentColorの追加方法

1. MUIのテンプレートを使ってプロジェクトを作成する
2. 「Pages/Settings/AppearanceViewModel.cs」を開く
3. 以下に好きな値を追加する

// 20 accent colors from Windows Phone 8
private Color[] accentColors = new Color[]{
    Color.FromRgb(0xa4, 0xc4, 0x00),   // lime
    Color.FromRgb(0x60, 0xa9, 0x17),   // green
    Color.FromRgb(0x00, 0x8a, 0x00),   // emerald
    Color.FromRgb(0x00, 0xab, 0xa9),   // teal
    Color.FromRgb(0x1b, 0xa1, 0xe2),   // cyan
    Color.FromRgb(0x00, 0x50, 0xef),   // cobalt
    Color.FromRgb(0x6a, 0x00, 0xff),   // indigo
    Color.FromRgb(0xaa, 0x00, 0xff),   // violet
    Color.FromRgb(0xf4, 0x72, 0xd0),   // pink
    Color.FromRgb(0xd8, 0x00, 0x73),   // magenta
    Color.FromRgb(0xa2, 0x00, 0x25),   // crimson
    Color.FromRgb(0xe5, 0x14, 0x00),   // red
    Color.FromRgb(0xfa, 0x68, 0x00),   // orange
    Color.FromRgb(0xf0, 0xa3, 0x0a),   // amber
    Color.FromRgb(0xe3, 0xc8, 0x00),   // yellow
    Color.FromRgb(0x82, 0x5a, 0x2c),   // brown
    Color.FromRgb(0x6d, 0x87, 0x64),   // olive
    Color.FromRgb(0x64, 0x76, 0x87),   // steel
    Color.FromRgb(0x76, 0x60, 0x8a),   // mauve
    Color.FromRgb(0x87, 0x79, 0x4e),   // taupe
};

今回はmaroon(#800000)を追加してみました。

Color.FromRgb(0x80, 0x00, 0x00),   // maroon

アプリを起動して「SETTINGS」ページを見てみると色が追加されていることがわかります。

C++などと違ってフレームワークに乗っかれば簡単に追加できるのでいいですね！