tech.guitarrapc.cóm

C#, PowerShell, Swift, Cloud, Serverless Technical Update and Features

XAMLを書くときに使っている拡張機能

UWP アプリを書く必要があり、何度か挫折したXAMLに真剣に取り組んでいます。

今回は、XAMLを書くにあたって自分が導入している拡張機能とめちゃめちゃ便利なアプリの紹介です。

目次

拡張機能

次の2つをいれることで、XAML に悩まされることが減ったのでお勧めです。 ときにStylerは、いわゆる自動的なフォーマッターでオススメです。 私がこういう拡張をいれる時に共通しているのは、「機械的に自動化されるのに慣れるのは大事」ということで、フォーマッターはその中で優先して導入すると効果があると感じます。

marketplace.visualstudio.com

marketplace.visualstudio.com

XamlStyler

XAML を書いていて面倒だと感じるのが、コントロールの要素が読みにくいことです。 その原因は、自分にとっては「コントロールごとにプロパティの要素が違ったり、並び順が異なる」ことにあります。 しかし、膨大な数のプロパティとコントロールは自分の好みにあうように並び替えたり管理しきれません、やりたくないです。 管理できないものは「保存時に自動フォーマットをかけて、それに慣れる」と考え事が減るので、自動フォーマットする拡張機能としてXamlStylerを導入しました。

この拡張は@nuits_jpさんに教えていただきました、ありがとうございます!

Visual Studioの拡張機能で導入でき、ソースもGitHub で公開されています。*1

github.com

拡張をいれると、XAMLを開いて保存(Ctrl + s) するだけで自動的にフォーマットしてくれます。 例えば今までいれてなかったXAMLで適用すると、こんな感じでフォーマットされました。

f:id:guitarrapc_tech:20180928023536p:plain

VS拡張の弱点は各自のVS環境に依存することですが、XamlStylerは外部Configurationで設定できます。 Settings.XamlStyler としてプロジェクトに配置しておきましょう。 これでVSの設定よりも優先されるので、チームで統一するにはちょうどいい感じです。

f:id:guitarrapc_tech:20180928024044p:plain

次のコミットで、明示的に制御するために追加しました。

github.com

Script Integrationとしてコンソールアプリもあるので、適当にCIでフォーマットかけることもできます。が、まぁいったんいいでしょう。.NET 4.5.2 だし、Linux/macOS で動かないし。

github.com

Inline Color Picker

XAML上で色設定時にインラインでカラーピッカーを出してくれるColor Picker拡張です。

f:id:guitarrapc_tech:20180928024904p:plain

UIが古いのですが、VS CodeなどでCSS書いていてよくあるアレなのであって便利です。

XAML 記述の確認

ドキュメント優先、よりも動かして目で見てXAMLを確認する方が圧倒的に理解も手も動かしやすいです。

そこで、次の3つのUWPアプリを片隅に表示させて開発しています。

普段からXAML Controls Galleryを開いています。 通常のコントロールの利用方法に悩むことが格段に減ったおすすめアプリです。

このアプリは@okazuki さんに教えていただきました!ありがとうございます。

Windows UI Library が2018年8月に発表され、そのnugetライブラリMicrosoft.UI.Xaml を使ったXAML実装サンプルアプリです。 XAMLで表現できるFluent Design 向けのコントロールのサンプル実装が目的らしいので、ちょうどほしかったやつという感じです。

f:id:guitarrapc_tech:20180928030938p:plain

Getting Started が公開されています。

github.com docs.microsoft.com

アプリはMicrosoft Store でインストールできます。

www.microsoft.com

また、アプリのサンプル実装のソースコードも公開されています。(Microsoft.UI.Xaml使用は、devブランチ参照)

github.com

アプリは標準コントロールの利用例ですが、ソースコードと一緒にみれるのでかなり助かります。

f:id:guitarrapc_tech:20180928031558p:plain

WindowsCompositionSamples

Windows.UI.Xaml を使った最新のデモとコードの確認ができます。

f:id:guitarrapc_tech:20180928030730p:plain

ソースコードも公開されています。

github.com

こちらも Microsoft Storeでインストールできます。

www.microsoft.com

WindowsCommunityToolkit

コミュニティによる、UWPアプリ作成時に使う拡張です。 標準にない便利なコントロールや拡張が多くあります。

f:id:guitarrapc_tech:20180928032941p:plain

ソースコードも公開されています。

github.com

また、MicrosoftからGetting Started が公開されています。

docs.microsoft.com

アプリはMicrosoft SToreでインストールできます。

www.microsoft.com

微妙に使いにくい感じがするので、もうちょっと触ってみないとばっちりかどうかはわからないです。

まとめ

自分にとってXAMLで一番困る挫折ポイントがコントロールや記述がしっくりこないことだったので、拡張やアプリを使ってまじめに取り込んでいます。 さすがにUnityやXcodeやった後だと以前より苦しみが少ないのですが、XAMLは改めてみても独特というかViewをいかに分離できるかを念頭に組まれている感じが強いです。

そのための仕組みとしてのコードビハインド、正確には双方向バインディングが機能としてあるのはかなり強力ですが、XAML独自の記述がネックに感じます。*2 VMでReactivePropertyを使うと、 MVRPと似たコードの雰囲気になります。 結果、違いとなるXAMLとのバインディングを把握すればいつもと変わらないコードの書き味になるように感じるので、この路線でいくのが性に合ってそうです。

そういえば、ReactiveProperty にこのPRが取り込まれると Asyncとの相性が抜群によくなるのではよ.... (困ってたらPR作っていただきました、神か

github.com

XAMLは4Kで多きめのモニタで書いていると効率明らかにいいので、なるほどUnityと同じ....という感じです。

f:id:guitarrapc_tech:20180928034018p:plain

*1:ドキュメントもGitHub参照で

*2:仕組みを理解するのが近道なのはどのフレームワークでも同様ですね