Eseguire il debug del layout utilizzando DOM Explorer

Articolo
06/05/2015

Si applica a Windows e Windows Phone

La scheda Layout di DOM Explorer mostra il modello di riquadro CSS per l'elemento selezionato in un'app Windows Store o Windows Phone Store. Puoi usare questa rappresentazione visiva del modello di riquadro per identificare e modificare i valori correlati al layout che hanno effetto sull'aspetto degli elementi.

Suggerimento

Le modifiche apportate nella scheda Layout non sono permanenti.Puoi apportare modifiche permanenti al codice sorgente e quindi aggiornare l'app con il pulsante Aggiorna applicazione Windows sulla barra degli strumenti Debug.In questo modo, eviti di riavviare il debugger.

Per utilizzare DOM Explorer per modificare gli aspetti di layout che non vengono visualizzati nel modello di riquadro, vedi Guida introduttiva: Eseguire il debug di HTML e CSS e Eseguire il debug degli stili CSS utilizzando DOM Explorer.

Esempio di correzione di un problema di layout

Questo esempio mostra come selezionare un elemento di elenco nel modello Hub/Pivot, interpretare i valori del modello di riquadro presenti nella scheda Layout e quindi modificare uno dei valori di proprietà per correggere un problema di layout.

Per correggere il problema di layout

In Visual Studio crea una nuova app Windows Store basata sul modello di progetto Hub/Pivot.
Nella cartella shared pages\hub apri il file hub.css.

Sostituisci il codice CSS riportato di seguito:

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
        }

Con questo codice CSS:

        .hubpage .hub .section4 .sub-image-row img {
            height: 95px;
            width: 130px;
            margin-left: 5em;
        }

Seleziona il progetto appName.WindowsPhone o appName.Windows in Esplora soluzioni e poi scegli Imposta come progetto di avvio dal menu di scelta rapida.
A seconda del progetto di avvio, seleziona Emulator 8.1 WVGA 4 inch 512MB o Simulatore nell'elenco a discesa sulla barra degli strumenti Debug (il valore predefinito è Computer locale).
Premi F5 per eseguire l'app in modalità debug.
Scorri o esegui un gesto rapido per aprire Sezione 4.

Suggerimento

Posiziona l'emulatore Windows Phone o il simulatore proprio accanto alla finestra di Visual Studio, per poter osservare immediatamente i risultati delle selezioni e le modifiche apportate agli stili CSS.

Al caricamento di Sezione 4, puoi notare che l'aspetto delle immagini inferiori non è corretto. Ogni immagine dell'elemento viene tagliata a metà (con la metà sinistra mancante).
Passa a Visual Studio e scegli Seleziona elemento in DOM Explorer oppure 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 usare i tasti di direzione o altri metodi per selezionare elementi HTML direttamente in DOM Explorer.Per ulteriori informazioni sulla selezione di elementi, vedi Guida introduttiva: Eseguire il debug di HTML e CSS.
Nell'emulatore Windows Phone o nel simulatore seleziona la metà di destra grigia di una delle immagini tagliate a metà. Attorno all'elemento selezionato appare un'evidenziazione, come mostrato qui nell'emulatore Windows Phone:

Suggerimento

Il simulatore supporta il posizionamento del cursore sopra gli elementi per mostrare l'evidenziazione del riquadro attorno agli elementi DOM prima di selezionarne uno.Nell'emulatore Windows Phone, invece, questo comportamento non è supportato.

Quando selezioni un elemento DOM, DOM Explorer seleziona automaticamente l'elemento IMG corrispondente in Visual Studio. L'elemento selezionato DOM Explorer è analogo al seguente:
```
<img src="ms-appx://guid/images/gray.png> 
</img>
```
Fai clic sulla scheda Layout. Questa scheda mostra il modello di riquadro dell'elemento selezionato, come illustrato nell'emulatore Windows Phone.

In questa visualizzazione sono disponibili alcune informazioni utili sull'elemento:
- I colori corrispondono all'evidenziazione della casella visualizzata nel simulatore al passaggio del mouse sugli elementi. Il colore blu rappresenta le dimensioni dell'elemento <img>. Il colore marrone chiaro rappresenta i valori dei margini.
- Il margine sinistro (margin-left) è impostato e questa può essere la causa del problema in quanto corrisponde al sintomo (nero sul lato sinistro delle immagini).
- Nelle caselle in cui è presente un valore pari a 0 pixel (ad esempio, Spaziatura interna e Bordo) indicano che le proprietà CSS corrispondenti probabilmente non sono impostate.
Per scoprire come viene applicata la regola margin-left, fai clic sulla scheda Calcolata e guarda sotto la regola margin-left. Come puoi notare, questa regola è impostata sul valore 5em, ma il valore calcolato è 66,66px o 146,66px, a seconda del tuo dispositivo di destinazione.

Suggerimento

La scheda Calcolata indica che la regola margin-left è impostata nel selettore CSS ..hubpage .hub. section4 .sub-image-row img, disponibile in hub.css.In questa app demo è qui che occorre apportare la correzione.

Puoi anche utilizzare la scheda Layout per verificare le modifiche apportate ai valori del layout.
Nella scheda Layout scegli 66,66 o 146,66, che viene visualizzato sul lato sinistro del riquadro Margine.
Digita 0 e premi INVIO. Puoi anche usare i tasti FRECCIA SU e FRECCIA GIÙ per modificare il valore.
Seleziona gli altri elementi <img> in DOM Explorer e modificane i valori di margin-left su 0.
Passa all'emulatore Windows Phone o al simulatore. I valori di margin-left aggiornati sono stati applicati alle immagini di Sezione 4. Questi valori vengono anche aggiornati nella scheda Calcolata sotto la regola margin-left.