Comment : afficher et modifier la disposition

Article
02/24/2013

L'onglet Disposition de l'Explorateur DOM affiche le modèle de boîte CSS pour l'élément sélectionné. Vous pouvez utiliser cette représentation visuelle du modèle de boîte pour identifier rapidement les valeurs de propriété. Vous pouvez également modifier une valeur de l'onglet Disposition. Les modifications que vous apportez ne sont pas permanentes. Elles ne sont pas conservées lorsque vous arrêtez le débogage.

Conseil

Si vous ne souhaitez pas arrêter le débogueur, modifiez votre code source, puis actualisez votre application à l'aide du bouton Actualiser l'application Windows dans la barre d'outils Déboguer.

Pour utiliser l'Explorateur DOM pour modifier des aspects de la disposition qui ne sont pas visibles dans le modèle de boîte, consultez Démarrage rapide : débogage d'applications (JavaScript) et Comment : inspecter des règles CSS.

Affichage et modification de la disposition

Dans cet exemple, nous sélectionnons un élément de liste dans le modèle Application partagée, interprétons les valeurs du modèle de boîte qui figurent dans l'onglet Disposition, puis modifions les valeurs de propriété.

Pour afficher et modifier la disposition

Dans Visual Studio, créez une Application Windows Store conçue pour Windows à l'aide de JavaScript qui utilise le modèle de projet Application partagée.
Sélectionnez Simulateur dans la liste déroulante située en regard du bouton Démarrer le débogage dans la barre d'outils Déboguer.
Appuyez sur F5 pour exécuter l'application en mode débogage :

Conseil

Une fois que l'application s'affiche dans le simulateur, positionnez le simulateur côte à côte avec Visual Studio. Cela permet d'afficher immédiatement les résultats de vos sélections et des modifications que vous apportez aux styles CSS.
Passez dans Visual Studio et cliquez sur Sélectionner un élément dans l'explorateur DOM (ou appuyez sur Ctrl + B). Cela modifie le mode de sélection pour vous permettre de sélectionner un élément en cliquant dessus, et affiche l'application au premier plan. Le mode est restauré à la suite d'un clic.

Conseil

Vous pouvez également sélectionner des éléments HTML directement dans l'explorateur DOM. Pour plus d'informations sur la sélection des éléments, consultez Démarrage rapide : débogage d'applications (JavaScript).
Dans le simulateur, pointez sur les groupes dans la page d'accueil, afin que leur image et leur titre soient encadrés en couleur. Pour cette démonstration, pointez sur le troisième groupe. L'image et le titre du groupe encadré sont illustrés ici.
Cliquez sur le groupe et l'image en surbrillance pour les sélectionner. L'Explorateur DOM sélectionne automatiquement l'élément IMG correspondant. L'élément sélectionné dans l'Explorateur DOM se présente comme suit :
```
<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>
```
Cliquez sur l'onglet Disposition. Cet onglet affiche les dimensions de l'élément sélectionné, comme illustré ici.

Cette vue fournit des informations utiles sur l'élément :
- Les dimensions de l'élément dans la zone la plus interne correspondent généralement aux propriétés CSS de hauteur et de largeur.
- Les zones Remplissage, Bordure et Marge affichent des valeurs de 0 pixels, ce qui laisse penser que les propriétés CSS correspondantes ne sont probablement pas définies. Par exemple, les propriétés CSS des marges gauche, supérieure, droite et inférieure ne sont probablement pas définies.
Conseil

Pour voir comment les propriétés sont appliquées, cliquez sur l'onglet Styles et regardez sous la règle <div> inlined dans les styles hérités. Vous pouvez voir que les propriétés de hauteur et de largeur sont définies ici.
Dans l'onglet Disposition, double-cliquez sur 0px en haut de la zone Marge.
Utilisez la touche Haut pour définir la valeur de la marge supérieure sur 10px, puis appuyez sur Entrée. La marge mise à jour s'affiche dans le simulateur, ainsi que dans l'onglet Styles sous la règle inline. Vous pouvez également entrer de nouvelles valeurs au lieu d'utiliser les touches Haut et Bas.