この記事は公開から4年以上経過しています。
WPF開発を行っている方なら恐らくお世話になっている方も多いと思いますが、まだご存知ない方のためにWPF開発に必須の定番ツールを1つ簡単に紹介します。
そのツールはSnoopです。
導入方法
上記公式リンク(GitHub)にあるリポジトリソースをローカルにCloneまたはダウンロードしてVisual Studioでビルドします。これまでのところSnoopのバージョンで機能に大きな変化はみられませんが、ビルド可能なVisual Studioのバージョンや、解析できるFrameworkバージョン、インストーラの有無などが異なります。
Build Toolsのバージョンの問題でうまくビルドできない場合などもありますが、その場合にはTagからブランチのリビジョンを少しづつ下げてビルドすると成功すると思います。
バイナリを配布している海外サイトもありますが、OSS製品の野良ビルドはビルド時にソースを改ざんして悪意のあるプログラムを紛れ込ませている可能性が否定できないため、出処が明確ではないバイナリの導入にはご注意下さい。ウイルス対策ソフトで検出できない悪意のあるプログラムを紛れ込ませることはとても容易です。
使い方
プログラム起動
一緒にビルドされるインストーラでのインストールも可能なようですが、インストーラを使わなくてもビルド出力フォルダにあるSnoop.exeを直接起動すると、以下のような物珍しいデザインのツールバー的なウィンドウが表示されます。
解析対象アプリケーションの選択
ツールバーだけ見ても使い方がピンときませんが、ここでツールバー右側のを、解析したいWPFアプリケーション上にドラッグ＆ドロップすると、以下のようなメインウィンドウが表示されます。
解析したい要素の選択
メインウィンドウ左側が所謂ビジュアルツリーになっており、ここから要素の階層を辿ることができます。
Ctrl+Shiftを押下しながら選択したいコントロールをマウスオーバー
で要素を直接WPFアプリケーション上から選択することが可能です。
基本的な使い方
要素を選択すると選択した要素のプロパティ群が右側に表示されます。
ここで設定を動的に変更することで、リアルタイムで結果を確認することが可能です。
便利な使い方
レイヤー構成の表示
特に重宝する機能が、メインウィンドウ右下のボタン押下で起動するZoomer機能です。以下の画像は２つのアイテムのある標準コンボボックスのポップアップのレイヤーをZoomerで視覚化したものです。
Zoomerウィンドウ左上に2D/3Dと書かれたボタンのようなものがありますが、ここで3Dを選択してマウスでグリグリ画像を動かすと、下図のようにその要素がどのようなレイヤー構造をしているのかを一目で確認することが可能です。
例えばコントロールテンプレートを作成するときなどには、「この罫線の色を変えたいのにうまく変わらない」といった現象に遭遇したときに、この機能を使うと比較的あっさりと問題を解決する手助けになります。
バインディング内容の確認
続いて、MVVM開発で複雑なテンプレートを作成していると「データバインディングしたがうまく機能しない」といった問題に遭遇したときに重宝するのが、メインウィンドウ右側のData Contextタブからバインディングされているデータのクラスや中身を確認する機能です。
この他にもイベントやトリガーの確認など、WPF開発には欠かせない便利な機能がたくさんありますので、興味がある方はインターネットを検索してみてください。
GitHubに公式ドキュメントリンクがありますが、元公式(CodePlex)のアーカイブにも使い方の説明があります。
以上です。