やりたいこと

Windowsの「色」の設定で、「ライト」「ダーク」が選択できる。

これを切り替えると、例えば設定画面も、下記のように白黒に切り替わる。

この設定に、自分でつくるWinUI3のアプリもついていくようにしたい。
(ライト/ダーク切り替えで、ライト/ダークになるようにしたい)

※WinUI3のアプリは、なにもしなくてもライト/ダーク切り替えると、こんな感じで、それなりにライト/ダークな見た目になるっぽい。

ただここから、ちょっと自分の好きな色のライト/ダークな色にしたい。

やり方概要

UWPアプリ向けに、「Fluent XAML Theme Editor 」という、ライト/ダークテーマ対応のためのResourceDictionaryのコード作成ツールがあった。

github.com

Microsoft Storeからもダウンロードできる。

また、その使い方の説明が、MSの開発者ブログにあった。

blogs.windows.com

その開発者ブログを参考に、ライト/ダークに対応させる。

やり方詳細

まず、Fluent XAML Theme Editor で、ライト/ダークごとに、自分の好きな色に設定する。(ツール自体の使い方は、ツールの説明ページを参照)

最初は白！黒！という感じの色になっているが、今回は下記のようにしてみる。

好きな色にしたら「Export」ボタンを押す。押すと、ResourceDictionaryのコードが別Windowで出てくるので、それをコピーする。 (どうやら、コード中の<ResourceDictionary x:Key="Default">がダークテーマ、<ResourceDictionary x:Key="Light">がライトテーマのリソースを書いている部分っぽい。<ResourceDictionary x:Key="HighContrast">は、ハイコントラストをONにしたときの定義なのかも)

次に、
WinUI3のプロジェクトに、WinUI3の「リソースディクショナリ」を追加する。

それで作成されたResourceDictionaryのxamlファイルに、先ほどツールがExportしたコードを貼り付ける。 (元のコードは全消しして、Exportしたものを貼り付ける)

そうすると、2022/03月の時点では、下記のようなエラーが出た。

RevealBackgroundBrushは、WinUI3では使えないっぽい。(下記参照)
https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.revealbackgroundbrush?view=winrt-20348
https://github.com/microsoft/microsoft-ui-xaml/issues/5210

AcrylicBrushのBackgroundSourceが無いと言っているのはなぜかは分からないが、現時点では「WinUI3はAcrylic対応していない、近日対応予定」みたいな記事をどこかで見たので、その関係でWinUI3では今は使えないのかも。

なので、今回は下記をした。

AcrylicBrush の BackgroundSource の値を入れてる部分を削除(2か所)
RevealBackgroundBrushの定義部分を削除

これで、リソースディクショナリのファイルは完成。(今回はデフォの名前そのままでResourceDictionary1.xaml)
次に、これをアプリに適用する。

WinUI3プロジェクトの中のApp.xamlを開くと、‘‘と書いてある部分があるので、そこに作ったResourceDictionary1.xamlを入れる。下記のようにする。

<Application
    x:Class="ThemeJikken.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ThemeJikken">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
                <!-- ★コレ↓を入れた★ -->
                <ResourceDictionary Source="ResourceDictionary1.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

※もし、ResourceDictionary1.xamlを、ソリューションエクスプローラー上でxamlと同じ階層に置いているのではなく例えば「ResourceDictionary」フォルダの中に入れていたりした場合は、下記のように書くこと。

<ResourceDictionary Source="ResourceDictionary/ResourceDictionary1.xaml"/>

これで、テーマごとのリソースディクショナリの設定完了。動かしてみると、下記のようになる。

背景だけ、デフォルトのライト/ダーク配色になっている。 Fluent xaml Theme Editorの説明ページによると、最後に、ページの背景色を、テーマに選択したRegionColorに設定することを忘れないでください。自動的に設定されない唯一のブラシです。とのこと。

どうやら、RegionBrushだけは、自分で設定しないといけない様子。

アプリの中の、表示しているWindowやPageの一番外側のGridなどの要素に対して、Background="{ThemeResource RegionBrush}"を設定してやる。

そうすると、下記のように、背景もFluent XAML Theme Editorで作った色と同じになってくれる。

備考

作ったアプリを起動して、ハイコントラストONにしてみた。

うーん、ボタンのところがなんか変？ハイコントラスト時は少々改良必要なのかも。(別途調べようと思う)

220414追記

ダーク、ライトモード時の色に加えて、ハイコントラスト時の色を調整する方法も下記で調べた。

tera1707.com

上記でいろいろ調べてる中で分かってきたのは、

Fluent XAML Theme Editor で出力したリソースディクショナリのxamlは、不要なものもたくさん記述されており、そのままWinUI3に適用すると、変な動きをしてしまうこともあるっぽい。(詳細までは調べられていない)

なので、今の時点では、Fluent XAML Theme Editor で出力したリソースディクショナリは使ってもいいが、不要な部分は削除して使う方がよいかと思った。(今のところこうしたらよいな、と思うやり方は、上の記事に書いたので参照ください)

参考

Fluent XAML Theme Editor

https://github.com/Microsoft/fluent-xaml-theme-editor

C++とxamlでFluent xaml Theme Editorで作ったResourceDictionaryを使おうとしている。
同じやり方がC#とxamlでもできた。

https://github.com/microsoft/microsoft-ui-xaml/issues/5210

Windows開発者ブログ
Fluent xaml Theme Editorがやさしめに書かれている。

https://blogs.windows.com/windowsdeveloper/2018/10/10/fluent-xaml-theme-editor-preview-released/

参考書

WinUI3

WinUI3でアプリを作ろうと思ったときのとっかかりによかった。 msdocsに書いてある情報を、体系的に、順番に読みたいな、というときによいかも。(ただし英語)
この本で分からなかった、かゆいところに手が届かなかった部分を私は記事にしてる感じ。

リンク

C＃①

表紙に書いてある通り、教科書として最適。これからC#を勉強したいけど、ネットだけで勉強するのは効率が悪いから体系的に学べる本が欲しいときや、ちょっとC#を勉強してコード書けるようになったけど、もう少し広く深く知りたいなというときによいと思う。
私は仕事で触れるコードを軸に、基本ネットで断片的にC#を学んだので、その知識の隙間を埋めて枝葉を広げるためにとても分かりやすかった。

リンク

C＃②

C#の文法的に色々できるのは分かったが、いざ実装するときに、わかったことを使ってどう実装すればいいのか？と悩んだときに指針になりそうな本。
「プロパティ等の名前の付け方、どうすればいい？」「情報をクラス外部に見せるときに、プロパティにすべき？メソッドにすべき？」「異常だと判定したいとき、どんなときにどんな例外をスローすべき？」などなど、勉強になる部分が山ほどあった。
私のように「コードは書くけどこれであってるのか自信がない、レビューで指摘されるのが嫌だ、実装時の(心の)よりどころが欲しい」という人に最適。

リンク