Come visualizzare e modificare il layout

Articolo
02/24/2013

Nella scheda Layout di DOM Explorer è illustrato il seguente Modello riquadro CSS per l'elemento selezionato. Puoi utilizzare questa rappresentazione visiva del modello di riquadro per identificare rapidamente i valori della proprietà. Puoi inoltre modificare qualsiasi valore nella scheda Layout. Le modifiche che apporti non sono permanenti. infatti vengono perse quando arresti il debug.

Suggerimento

Se preferisci non arrestare il debugger, puoi apportare modifiche al codice sorgente, quindi aggiornare l'app utilizzando il pulsante Aggiorna applicazione Windows sulla barra degli strumenti di debug.

Per utilizzare DOM Explorer per modificare gli aspetti di layout che non vengono visualizzati nel modello di riquadro, vedi Guida rapida: Debug di app (JavaScript) e Come controllare le regole CSS.

Visualizzazione e modifica del layout

In questo esempio, selezioniamo un elemento List nel modello Applicazione divisa, interpretiamo i valori del modello di riquadro nella scheda Layout, quindi modifichiamo uno dei valori della proprietà.

Per visualizzare e modificare il layout

In Visual Studio crea una nuova Applicazione Windows Store compilata per Windows utilizzando JavaScript. che utilizza il modello di progetto Applicazione divisa.
Seleziona Simulatore nell'elenco a discesa accanto al pulsante Avvia debug sulla barra degli strumenti di debug.
Premi F5 per eseguire l'app in modalità debug.

Suggerimento

Quando l'app viene visualizzata nel simulatore, posiziona il simulatore affiancandolo a Visual Studio. In questo modo potrai vedere immediatamente i risultati delle selezioni e delle modifiche apportate agli stili CSS.
Passa a Visual Studio e fai clic su Seleziona elemento in DOM Explorer o premi CTRL+B. In questo modo la modalità di selezione cambia per consentirti di selezionare un elemento facendovi clic sopra e l'app viene portata in primo piano. La modalità viene ripristinata dopo un singolo clic.

Suggerimento

Puoi anche selezionare elementi HTML direttamente in DOM Explorer. Per ulteriori informazioni sulla selezione di elementi, vedi Guida rapida: Debug di app (JavaScript).
Nel simulatore passa il mouse sui gruppi nella home page, in modo che sia l'immagine del gruppo che il titolo del gruppo siano delineati da un contorno colorato. Per questa demo, passa il puntatore del mouse sul terzo gruppo. Vedrai visualizzati l'immagine del gruppo e il titolo con il contorno.
Fai clic sul gruppo evidenziato per selezionarlo. DOM Explorer seleziona automaticamente l'elemento IMG corrispondente. L'elemento selezionato DOM Explorer è analogo al seguente:
```
<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>
```
Fai clic sulla scheda Layout. Questa scheda mostra le dimensioni dell'elemento selezionato, come illustrato di seguito.

In questa visualizzazione sono disponibili alcune informazioni utili sull'elemento:
- Le dimensioni dell'elemento nel riquadro più interno, che in genere corrispondono alle proprietà CSS height e width.
- Nelle caselle Spaziatura interna, Bordo e Margine è presente un valore pari a 0 pixel, che suggerisce che le proprietà CSS corrispondenti non sono probabilmente impostate. Ad esempio, le proprietà CSS margin-left, margin-top, margin-right e margin-bottom probabilmente non sono impostate.
Suggerimento

Per vedere in che modo sono applicate le proprietà, fai clic sulla scheda Stili e osserva la regola <div> inlined negli stili inherited. Come puoi vedere, qui le proprietà height e width sono impostate.
Nella scheda Layout fai doppio clic 0px nella parte superiore della casella Margine.
Utilizza il tasto freccia SU per aumentare il valore di margin-top a 10px, quindi premi INVIO. Il margine aggiornato viene visualizzato nel simulatore e anche nella scheda Stili nella regola inlined. Puoi anche immettere nuovi valori anziché utilizzare i tasti freccia SU e GIÙ.