XAML 用 UI デバッグ ツールのご紹介

XAML の実行時に使用する検査ツールが欲しいというご要望 (英語) は、以前から数多くいただいていました (昨年の //BUILD でもそのような声を耳にいたしました)。こうした皆様からのたくさんのご要望を受けて、このたび Visual Studio 2015 CTP 6 (英語) で XAML 用の新しい UI デバッグ ツールを導入しました。これらのツールを使用すると、実行中の WPF アプリケーションのビジュアル ツリーやツリー内の任意の要素のプロパティを検査することができます。つまり、この検査によってあらゆる情報を把握したうえで、複数のプロパティが互いを上書きしている箇所を分離するという難しい点を解決し、正しい動作を把握してそのままタスク化し、アプリケーション実行時に処理を行えるようにすることができます。Visual Studio ではこれらの UI デバッグ ツールがデバッグ エクスペリエンスに直接統合されているため、開発サイクルの中にシームレスに適合しています。

今回は、WPF のサポートについても発表がありました。また、今後は Windows ストア アプリのサポートも予定しています。

では、今回導入されたツールについて詳しく見ていきましょう。

Live Visual Tree の概要

今回の UI デバッグ ツールにはメインの機能が 2 つありますが、そのうちの 1 つが Live Visual Tree です。

Live Visual Tree では以下のことが可能です。

• アプリケーションの「最新」のビューを確認できます。ビジュアル ツリーで要素の追加や削除が実行されると、Live Visual Tree にリアルタイムに反映されます。
• XAML で要素が定義されている場合 (上の図で、ソース アイコンが表示されている多数の要素がこれに該当)、[Preview Source] オプションまたは適切な要素のコンテキスト メニューを使用することで、ドキュメントと行の定義にジャンプできます。
• 子の数が表示されます。このため複雑な UI 構造を把握しやすく、対応が厄介なパフォーマンスに関する問題の原因を特定することができます。

Live Property Explorer の概要

Live Property Explorer を表示するには、Live Visual Tree でプロパティ ボタンをクリックするか、任意の要素のコンテキスト メニューで [Show Properties] を選択します。

Live Property Explorer では以下のことが可能です。

• 選択中の要素のプロパティ セットをすべて表示できます。これは別の場所でプロパティ セッターが上書きされた場合でも可能です。
• プロパティを範囲ごとに分割し、要素自身で設定されたか、またはスタイルや別の場所で設定されたかをすばやく確認できます。
• プロパティを変更し、その変更を実行中のアプリケーションにプッシュしてすぐに適用することができます。

アプリ内選択機能

アプリの構造を把握している場合、ビジュアル ツリーでは容易に要素を選択することができます。詳細な構造を覚えていない場合は、Live Visual Tree に用意されているアプリ内選択ツールで要素を選択することができます。この機能を有効にすると、UI デバッグ ツールによってマウス イベントが処理されるため、クリックするだけで任意の要素を直接選択することができます。

アプリ内選択機能で要素を選択する場合、次の 2 つのフィードバック モードを使用できます。

• 基本選択モード: マウスのカーソルを置くと、選択可能な要素の周囲に赤い破線の囲み線が表示されます。このときにクリックすると Live Visual Tree でその要素が選択され、Live Property Explorer にプロパティが読み込まれます。また、Preview Source オプションが有効な場合は、選択されている要素の XAML が開きます。
• レイアウト ガイド選択モード: 余白や、その余白が適用される親要素が表示される高度なガイドを利用できます。

これらのツールは Visual Studio 2015 CTP 6 の機能として搭載されており、XAML の新しいデバッグの世界を体験できます。今後もさらに開発を進め、以下の点に対応する予定です。

• Windows ストア アプリのサポート。
• ソース コードとの一貫性: デバッグ時にプロパティを変更し、その変更をソース コードにプッシュできるようにします。

なお、今回の最新の CTP には、CLR プロパティが実装されていない、コレクションの編集ができないなどの既知の制限事項がありますが、開発チームは RTM 版での実装に向けて作業を進めています。このツールの動作、および今回の UI デバッグ ツールをサポートするために WPF をどのように拡張したかについてご興味のある方は、ブログ記事「UI デバッグ ツール対応のための WPF の拡張 (英語)」をお読みください。

ぜひこのツールをお試しのうえ、ご意見、ご感想、ご要望をお聞かせください。プロダクト チームでは皆様からのフィードバックやコメントをお待ちしております。この記事のコメント欄までお寄せいただくか、UserVoice (英語) へ投稿してください。また、不具合については Connect (英語) サイトへご報告ください。この機能が皆様のお役に立てれば幸いです。

Dante Gagne (Visual Studio プラットフォーム ツール チーム、プログラム マネージャー) Dante Gagne はプログラム マネージャーとして 12 年間 XAML に携わってきました。最初は初期テスターの 1 人として Expression Blend を担当し、その後は Visual Studio を使用する XAML 開発者向けの製品の開発に精力的に取り組んできました。チームでは主にデザイン エクスペリエンスと生産性を担当しています。