atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

Windows Store Apps / Windows PhoneのVisual Treeを覗きたい

今日の記事はXAML Advent Calender 2014 6日目のエントリーです。

XAML Advent Calendar 2014 - Qiita

さて、最近はWPFのアプリを書いているのだけど、もはや、snoopがないと生きていけない体になってしまいました。

Snoop, the WPF Spy Utility - Home

snoopは実行時のVisual Treeを展開してXAMLデバッグができるWPF向けツールです。
とはいえ、Windows Platform Development MVPとしては、えーWPFはちょっと、、、なわけで、Store / WPでも同じようなことしたいわけですね。

たとえば、こんなStore Appsがあって、、、、
f:id:c-mitsuba:20141206140223p:plain
こんなふうにVisual Treeが見れると嬉しいですよね
f:id:c-mitsuba:20141206134524p:plain

これを実現するのが今回ご紹介するXAML Spyですよ!!
XAML Spy

利用手順もとても簡単です。
1.Visual Studio 2013にaddonとしてインストールします。

2.すると、プロジェクトを作ったときに、右クリックで[Manage XAML Spy for Solution]がでてきます。
f:id:c-mitsuba:20141206140803p:plain

3.すると、どのプロジェクトにXAML Spyを適用するか聞いてくるので、適用したいプロジェクトを選択します。
SilverlightWPFWindows Phone、Windows Store Apps、、、つまり「すべてのXAML アプリケーションプラットフォーム」に適用可能です!
f:id:c-mitsuba:20141206141418p:plain

4.たったこれだけ、なにか特別なコードを書く必要もありません。実行するとすぐにXAMLデバッグか可能です。
f:id:c-mitsuba:20141206142518p:plain


次に、機能をご紹介しましょう。
f:id:c-mitsuba:20141206142509p:plain

1.オンマウスでコントロールのサイズと種類を確認できます。
f:id:c-mitsuba:20141206142701p:plain

2.GridのRowとColumnのサイズを確認ができるのと、Unitに基いてGridデザインが綺麗にできているかのために格子模様が表示されます。
f:id:c-mitsuba:20141206142918p:plain

3.コントロールの位置やオンマウスの位置が確認できます。
f:id:c-mitsuba:20141206143211p:plain

4.ここまではアプリ内でできます。
でも一番すごいのはストアアプリがDesktopで動作するXAML Spyと連携して、Visual Treeが編集できたり、Local SettingとかRoaming Settingが確認できたり、使ってるメモリ量とかフレームレートまで確認できます。
f:id:c-mitsuba:20141206145206p:plain

次にButtonのプロパティを見てみましょう。
太字になっているプロパティは、このパネルから編集できます。
f:id:c-mitsuba:20141206151125p:plain
ここで、Button.Contentを見ると編集できないことがわかります。
f:id:c-mitsuba:20141206155841p:plain
ButtonのContentTemplateはこうしたVisual Treeでできています。
f:id:c-mitsuba:20141206160600p:plain
なので、ButtonのContentを変更するにはTextBlockのTextを変更します。
f:id:c-mitsuba:20141206160951p:plain
まず、TextBlockのTextを[World]に変更してみました。
f:id:c-mitsuba:20141206162041p:plain
するとアプリ側も変わります。
f:id:c-mitsuba:20141206162448p:plain


Store AppsとかWPのUIデバッグがこんな簡単にできるなんてすてきですね!
XAML Spyは有償ツールですが、21日ぐらいはただでお試しできます。
MVPはMVPライセンスがあるみたいですね。
ぜひぜひ使ってみてくださいー!