UWPアプリを書く必要があり、何度か挫折したXAMLに真剣に取り組んでいます。
今回は、XAMLを書くにあたって自分が導入している拡張機能とめちゃめちゃ便利なアプリの紹介です。
拡張機能
次の2つをいれることで、XAMLに悩まされることが減ったのでお勧めです。 ときにStylerは、いわゆる自動的なフォーマッターでオススメです。 私がこういう拡張をいれる時に共通しているのは、「機械的に自動化されるのに慣れるのは大事」ということで、フォーマッターはその中で優先して導入すると効果があると感じます。
https://marketplace.visualstudio.com/items?itemName=NicoVermeir.XAMLStyler
https://marketplace.visualstudio.com/items?itemName=NikolaMSFT.InlineColorPicker
XamlStyler
XAMLを書いていて面倒だと感じるのが、コントロールの要素が読みにくいことです。
その原因は、自分にとっては「コントロールごとにプロパティの要素が違ったり、並び順が異なる」ことにあります。
しかし、膨大な数のプロパティとコントロールは自分の好みにあうように並び替えたり管理しきれません、やりたくないです。
管理できないものは「保存時に自動フォーマットをかけて、それに慣れる」と考え事が減るので、自動フォーマットする拡張機能としてXamlStylerを導入しました。
この拡張は@nuits_jpさんに教えていただきました、ありがとうございます！
Visual Studioの拡張機能で導入でき、ソースもGitHubで公開されています。*1
拡張をいれると、XAMLを開いて保存(Ctrl + s) するだけで自動的にフォーマットしてくれます。 例えば今までいれてなかったXAMLで適用すると、こんな感じでフォーマットされました。
VS拡張の弱点は各自のVS環境に依存することですが、XamlStylerは外部Configurationで設定できます。
Settings.XamlStylerとしてプロジェクトに配置しておきましょう。
これでVSの設定よりも優先されるので、チームで統一するにはちょうどいい感じです。
次のコミットで、明示的に制御するために追加しました。
https://github.com/guitarrapc/UwpSamples/commit/89332417c530303d8625712cf5a5b2bd00b24235
Script Integrationとしてコンソールアプリもあるので、適当にCIでフォーマットかけることもできます。が、まぁいったんいいでしょう。.NET 4.5.2だし、Linux/macOSで動かないし。
https://github.com/Xavalon/XamlStyler/wiki/Script-Integration
Inline Color Picker
XAML上で色設定時にインラインでカラーピッカーを出してくれるColor Picker拡張です。
UIが古いのですが、VS CodeなどでCSS書いていてよくあるアレなのであって便利です。
XAML 記述の確認
ドキュメント優先、よりも動かして目で見てXAMLを確認する方が圧倒的に手を動かしやすく理解が進みます。
そこで、次の3つのUWPアプリを片隅に表示させて開発しています。
XAML Controls Gallery
普段からXAML Controls Galleryを開いています。 通常のコントロールの利用方法に悩むことが格段に減ったおすすめアプリです。
このアプリは@okazukiさんに教えていただきました！ ありがとうございます。
Windows UI Libraryが2018年8月に発表され、そのnugetライブラリMicrosoft.UI.Xamlを使ったXAML実装サンプルアプリです。 XAMLで表現できるFluent Design向けのコントロールのサンプル実装が目的らしいので、ちょうどほしかったやつという感じです。
Getting Startedが公開されています。
https://github.com/Microsoft/Microsoft-ui-xaml https://docs.microsoft.com/en-us/uwp/toolkits/winui/getting-started
アプリはMicrosoft Storeでインストールできます。
https://www.microsoft.com/en-us/p/xaml-controls-gallery/9msvh128×2zt#activetab=pivot:overviewtab
また、アプリのサンプル実装のソースコードも公開されています。(Microsoft.UI.Xaml使用は、devブランチ参照)
https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/XamlUIBasics
アプリは標準コントロールの利用例ですが、ソースコードと一緒にみれるのでかなり助かります。
WindowsCompositionSamples
Windows.UI.Xamlを使った最新のデモとコードの確認ができます。
ソースコードも公開されています。
こちらもMicrosoft Storeでインストールできます。
WindowsCommunityToolkit
コミュニティによる、UWPアプリ作成時に使う拡張です。 標準にない便利なコントロールや拡張が多くあります。
ソースコードも公開されています。
また、MicrosoftからGetting Startedが公開されています。
https://docs.microsoft.com/en-us/Windows/communitytoolkit/getting-started
アプリはMicrosoft SToreでインストールできます。
微妙に使いにくい感じがするので、もうちょっと触ってみないとばっちりかどうかはわからないです。
まとめ
自分にとってXAMLで一番困る挫折ポイントがコントロールや記述がしっくりこないことだったので、拡張やアプリを使ってまじめに取り込んでいます。 さすがにUnityやXcodeやった後だと以前より苦しみが少ないのですが、XAMLは改めてみても独特というかViewをいかに分離できるかを念頭に組まれている感じが強いです。
そのための仕組みとしてのコードビハインド、正確には双方向バインディングが機能としてあるのはかなり強力ですが、XAML独自の記述がネックに感じます。*2 VMでReactivePropertyを使うと、 MVRPと似たコードの雰囲気になります。 結果、違いとなるXAMLとのバインディングを把握すればいつもと変わらないコードの書き味になるように感じるので、この路線でいくのが性に合ってそうです。
そういえば、ReactivePropertyにこのPRが取り込まれるとAsyncとの相性が抜群によくなるのではよ。とか言ってたらPR作っていただきました、神か。
XAMLは4Kで多きめのモニタで書いていると効率明らかにいいので、なるほどUnityと同じ....という感じです。
