So zeigen Sie das Layout an und bearbeiten es

Artikel
02/23/2013

Die Registerkarte Layout im Dom Explorer zeigt das CSS-Feldmodell für das ausgewählte Element an. Sie können diese visuelle Darstellung des Feldmodells verwenden, um Eigenschaftswerte schnell zu identifizieren. Sie können weiterhin jeden Wert auf der Registerkarte Layout ändern. Vorgenommene Änderungen sind nicht dauerhaft. Sie gehen nach dem Beenden des Debuggens verloren.

Tipp

Wenn Sie den Debugger nicht beenden möchten, können Sie Änderungen am Quellcode vornehmen und die App mithilfe der Schaltfläche Windows-App aktualisieren auf der Symbolleiste "Debuggen" anschließend aktualisieren.

Informationen zum Ändern von Layoutaspekten, die nicht im Feldmodell angezeigt werden, mit dem Dom Explorer finden Sie unter Schnellstart: Debuggen von Apps (JavaScript) und So überprüfen Sie CSS-Regeln.

Anzeigen und Bearbeiten des Layouts

In diesem Beispiel wird ein Listenelement in der Vorlage für geteilten Apps ausgewählt, dann werden die Feldmodellwerte interpretiert, die auf der Registerkarte Layout vorhanden sind, und anschließend wird einer der Eigenschaftswerte geändert.

So zeigen Sie das Layout an und bearbeiten es

Erstellen Sie in Visual Studio eine neue Für Windows unter Verwendung von JavaScript erstellte Windows Store-App auf Grundlage der Projektvorlage "Geteilte App".
Wählen Sie Simulator in der Dropdownliste aus, die sich neben der Schaltfläche Debuggen starten auf der Symbolleiste "Debuggen" befindet.
Drücken Sie F5, um die App im Debugmodus auszuführen.

Tipp

Nachdem die Anwendung im Simulator angezeigt wird, positionieren Sie den Simulator parallel neben Visual Studio. Dadurch können Sie die Ergebnisse Ihrer Wahl sofort sehen und Änderungen an den CSS-Stilen vornehmen.
Wechseln Sie zu Visual Studio, und klicken Sie im DOM Explorer auf Element auswählen (oder drücken Sie Strg+Umschalt+F). Dadurch wird der Auswahlmodus so geändert, dass Sie ein Element auswählen können, indem Sie darauf klicken, und die App wird in den Vordergrund geholt. Der Modus wird nach einem einzelnen Mausklick wieder gewechselt.

Tipp

Sie können HTML-Elemente auch direkt in DOM Explorer auswählen. Weitere Informationen zum Auswählen von Elementen finden Sie unter Schnellstart: Debuggen von Apps (JavaScript).
Bewegen Sie den Mauszeiger im Simulator über die Gruppen der Homepage, damit das Gruppenbild und der Gruppenname farbig umrandet werden. Bewegen Sie den Mauszeiger für diese Demo über die dritte Gruppe. Das hervorgehobene Gruppenbild und der Gruppenname werden hier angezeigt.
Klicken Sie auf die markierte Gruppe und das Bild, um diese auszuwählen. Der Dom Explorer wählt automatisch die entsprechenden IMG-Element aus. Das Element, das im Dom Explorer ausgewählt wird, sieht wie folgt aus:
```
<img class="item-image" id="_win_bind[idNumber]" alt="Group Title: 3" 
    src="data:image/png;base64, ..." data-win-bind=
    "src: backgroundImage; alt: title"></img>
```
Klicken Sie auf die Registerkarte Layout. Diese Registerkarte zeigt die Abmessungen des ausgewählten Elements an, wie im Folgenden dargestellt.

Diese Ansicht enthält einige nützliche Informationen zum Element:
- Die Abmessungen des Elements im innersten Feld, die in der Regel CSS-Höhen- und -Breiteneigenschaften entsprechen.
- Die Felder Abstand, Rahmen und Rand zeigen Werte von 0 Pixeln, was darauf hinweist, dass die entsprechenden CSS-Eigenschaften wahrscheinlich nicht festgelegt wurden. Beispielsweise wurden die CSS-Eigenschaften margin-left, margin-top, margin-right und margin-bottom wahrscheinlich nicht festgelegt.
Tipp

Um anzuzeigen, wie die Eigenschaften angewendet werden, klicken Sie auf die Registerkarte Stile, und sehen Sie in der Regel <div> inlined in den Stilen Geerbt nach. Sie können sehen, dass die Höhen- und Breiteneigenschaften hier festgelegt sind.
Doppelklicken Sie auf der Registerkarte Layout auf 0px oben im Feld Rand.
Verwenden Sie die NACH-OBEN-TASTE, um den margin-top-Wert auf 10px zu erhöhen, und drücken Sie die EINGABETASTE. Der aktualisierte Rand wird im Simulator sowie auf der Registerkarte Stile in der inlined-Regel angezeigt. Sie können auch neue Werte eingeben, anstatt die NACH-OBEN- oder NACH-UNTEN-TASTE zu verwenden.