ライブ DOM パネル (HTML)
Blend for Visual Studio では、[ライブ DOM] パネルにデザイン中のアプリの構造が表示され、スタイルを設定する要素を選択できます。 さらに重要な点は、HTML マークアップで宣言される要素や動的に生成される要素など、アプリの状態が変化すると、[ライブ DOM] ビューは自動的かつ動的に更新されることです。
[ライブ DOM] パネルの要素
[ライブ DOM] パネルには、DOM (ドキュメント オブジェクト モデル) 内の各要素が表示されます。 各要素は、html ドキュメント ノードと DOM 内のその他の要素を基準にして表示されます。 各要素は、HTML ID の順 (ID が割り当てられていない場合は要素名の順) に表示されます。 1 つまたは複数のクラスが要素に割り当てられている場合、最初のクラス名は要素の後に濃いテキストで表示されます。
アイコンは、各要素の前に表示され、要素の内容を示します。
.png "b5-pnl-livedom")
.png "b5-icn-livedom-listview")
: ListView コントロールを示します。
.png "b5-btn-livedom-appbar")
: AppBar コントロールを示します。
.png "b5-icn-livedom-button")
: Button コントロールを示します。
.png "b5-icn-livedom-rating")
: Review コントロールを示します。
.png "b5-icn-livedom-element")
: HTML 要素を示します。
ドキュメントの構造は、JavaScript およびブラウザーのレンダリング エンジンによって実行時に大幅に変更される場合があります。 次に例を示します。
要素が追加または削除される
要素間の関係が変更される
新しいクラスが作成されて既存のクラスの名前が変更される
属性値が変更される
要素が動的に変更された場合、要素の後に次のアイコンのいずれかが表示されて変更の内容を示します。
.png "b5-icn-livedom-parser")
: パーサーによって生成された要素を示します。
.png "b5-icn-livedom-dynamic")
: 動的に生成された要素を示します。
.png "b5-icn-livedom-moved")
: 動的に移動された要素を示します。
.png "ライブ DOM フラグメント アイコン")
: HTML フラグメントを示します。
要素の表示
要素の表示は [ライブ DOM] パネルから変更できます。
要素の表示をオフにするには、[非表示] .png "4230580c-9c6b-4144-a3cc-1c68ea7b8cf9")
をクリックします。
要素の表示をオンにするには、[表示] .png "aea22778-684f-4832-9cd2-7329cee0b699")
をクリックします。