In-App MenuとLiveVisualTreeとLivePropertyExplorerでレイアウトのデバッグをする

※この記事はVisualStudio 2015 Update2を当てていることが前提です

In-App Menu

UWPをデバッグするとこのようにIn-App Menuが表示されます。

In-App Menuには

  • ライブビジュアルツリーへ移動
  • 要素の選択を有効化
  • レイアウトガイド表示

の3つのボタンがあります。

1

一番左のライブビジュアルツリーへ移動を選択するとVisualStudioへ移動し、現在のアプリのレイアウト構造が詳細に表示されます。

2

真ん中の要素選択の有効化ボタンをクリックすると、アプリ内のXAML要素を選択できるようになります。

選択された要素はライブビジュアルツリーでリアルタイムに確認できます。

こちらはトグルボタンで、有効化している間はbuttonなどの要素のクリックイベントは発火しません。

3

一番左のレイアウトガイドを表示するはライブビジュアルツリーで選択されている要素のMarginなどのレイアウトガイドを表示できます。

真ん中の要素選択の有効化ボタンと組み合わせると実行中のアプリ内の要素を選択しつつ、レイアウトガイドを表示できます。

4

In-App Menuは二重線のボタンを押すことで最小化できます。

5

ライブビジュアルツリーウインドウで一番左のツールチップをクリックすると完全に消すこともできます。

6

Live Property Explorer

デバッグ中に、VisualStudioのライブプロパティエクスプローラーを表示すると、ライブビジュアルツリーで選択中の要素に対してリアルタイムにプロパティの変更を適用できます。

例えば下記の画像だとButton要素のContent要素プロパティをButton2に帰るとデバッグ中のアプリのContent要素もButton2にかわります。7

しかしライブプロパティエディターで適用した変更はデバッグを終了すると元にもどってしまうので注意が必要です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください