Просмотр и изменение макета

Статья
02/24/2013

На вкладке Макет проводника DOM отображается рамочная модель CSS для выбранного элемента. Это визуальное представление рамочной модели можно использовать для быстрого определения значений свойств. Кроме того, любое из значений на вкладке Макет можно изменить. Вносимые изменения не сохраняются на постоянной основе. Они удаляются, когда отладка устанавливается.

Совет

Чтобы не останавливать отладчик, можно внести изменения в исходный код, а затем обновить приложение, нажав кнопку Обновить приложение Windows на панели инструментов "Отладка".

Сведения о том, как с помощью проводника DOM изменять аспекты макета, не отображаемые в рамочной модели, см. в разделах Краткое руководство: отладка приложений (JavaScript) и Проверка правил CSS.

Просмотр и изменение макета

В этом примере мы выберем элемент списка в шаблоне приложения с разделением, интерпретируем значения рамочной модели на вкладке Макет, а затем изменим одно из значений свойств.

Просмотр и изменение макета

Создайте в Visual Studio новое приложение Приложение для Магазина Windows, созданное для Windows с использованием JavaScript, использующее шаблон проекта "Приложение с разделением".
В раскрывающемся списке рядом с кнопкой Начать отладку на панели инструментов "Отладка" выберите Имитатор.
Нажмите клавишу F5, чтобы запустить приложение в режиме отладки.

Совет

После того как приложение отобразится в имитаторе, расположите имитатор сбоку от Visual Studio. Это позволит сразу же просматривать результаты после выбора и изменения стилей CSS.
Переключитесь на Visual Studio и щелкните Выбор элемента в проводнике DOM (или нажмите CTRL+B). При этом изменится режим выделения, то есть можно будет выделить элемент щелчком, а приложение отображается на переднем плане. Вернуть предыдущий режим можно одним щелчком.

Совет

Кроме того, выбрать HTML-элементы можно непосредственно в проводнике DOM. Дополнительные сведения о выборе элементов см. в разделе Краткое руководство: отладка приложений (JavaScript).
В симуляторе наводите указатель мыши на группы на домашней странице, чтобы вокруг изображения группы и заголовка группы появлялся цветной контур. В данном случае наведем указатель мыши на третью группу. Ниже показаны изображение и заголовок группы с контуром.
Щелкните выделенную группу и изображение, чтобы выбрать его. Проводник DOM автоматически выбирает соответствующий элемент IMG. Элемент, выбранный в проводнике DOM, выглядит следующим образом:
```
<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>
```
Перейдите на вкладку Макет. На этой вкладке отображаются размеры выбранного элемента, как показано ниже.

Это представление позволяет получить некоторые полезные сведения об элементе:
- размеры элемента в самой внутренней рамке, которые обычно соответствуют свойствам высоты и ширины CSS;
- в полях Заполнение, Граница и Поле отображаются значения, равные 0 пикселей, что позволяет сделать вывод, что соответствующие свойства CSS, скорее всего, не заданы. Например, свойства CSS margin-left, margin-top, margin-right и margin-bottom, скорее всего, не заданы.
Совет

Чтобы увидеть, как применяются свойства, перейдите на вкладку Стили и обратите внимание на встроенное правило <div> в стилях inherited. Можно увидеть, что свойства высоты и ширины здесь заданы.
На вкладке Макет дважды щелкните 0px в верхней части окна Поле.
С помощью клавиши со СТРЕЛКА ВВЕРХ увеличьте значение свойства margin-top до 10px и нажмите клавишу ВВОД. Обновленное поле отображается в симуляторе, а также на вкладке Стили во встроенном правиле. Вместо использования клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ можно также ввести новые значения.