Xamarin.Forms ライブ ビジュアル ツリー

ライブ ビジュアル ツリーを使うと、実行中の XAML コードに関するリアルタイム ビューを受け取ることができます。 実行中の Xamarin.Forms アプリケーションの UI 要素に関するツリー ビューが表示されます。

要件

• Xamarin.Forms 5.0 以降を使います。
• "変更のみ" のホット リロードを有効にします (既定で有効になっています)。

使用方法

要件を満たした状態でアプリをデバッグすると、ライブ ビジュアル ツリー ウィンドウにアプリのランタイム UI 階層が表示されます。

• Windows: 既定では、IDE の左側に表示されます。 表示されない場合は、[デバッグ] > [ウィンドウ] > [ライブ ビジュアル ツリー] を使って表示します。
• Mac: 既定では、IDE の右側に表示されます。 表示されない場合は、[表示] > [デバッグ ウィンドウ] > [ライブ ビジュアル ツリー] を使って表示します。

ツリー ビューを使ってアプリのランタイム UI 階層を調べ、ノードを展開したり折りたたんだりして UI の特定の部分に焦点を当てます。

ライブ ビジュアル ツリー ツール バー

XAML 要素のビューは、既定で [自分の XAML のみ表示] 機能を使って簡略化されています。 すべての UI 要素を表示するには、ライブ ビジュアル ツリー ツール バーの右端にある [自分の XAML のみ表示] ボタンを切り替えます。 必要に応じてすべての XAML 要素を常に表示するには、オプションでこの設定を無効にすることができます。

XAML の構造にはユーザーに直接関係のない多数の要素が含まれていて、コードをよく理解していない場合は、ツリーを参照して検索対象を見つけることが難しくなる可能性があります。 そのため、ライブ ビジュアル ツリーには、アプリケーションの UI を使って検討対象の要素を見つけるために役立つアプローチが複数用意されています。

実行中のアプリケーション内の要素を選びます (現在、UWP アプリでのみサポートされています)。 [Live Visual Tree] ツール バーの左端のボタンを選択すると、このモードを有効にすることができます。 このモードがオンのときは、アプリケーションの UI 要素を選択できます。ライブ ビジュアル ツリーは自動的に更新されて、その要素に対応するツリー内のノードとそのプロパティが表示されます。

実行中のアプリケーション内のレイアウト装飾を表示します (現在、UWP アプリでのみサポートされています)。 選択を有効にするためのボタンのすぐ右にあるボタンを選択すると、このモードを有効にすることができます。 レイアウトの装飾の表示がオンのときは、アプリケーション ウィンドウには選択されたオブジェクトの境界に沿って水平と垂直の線が表示され、何に揃えて配置されているかが確認できます。さらに、余白を示すための四角形も表示されます。

選択のプレビュー。 このモードを有効にするには、Visual Tree ツールバーで左端から 3 番目のボタンを選択します。 このモードは、アプリケーションのソース コードにアクセスできる場合に、要素が宣言されている XAML を示します。

関連リンク

• XAML ホット リロードで実行中の XAML コードを記述し、デバッグする