Окно Document Outline в Visual Studio

Программы --- Visual Studio --- Окно Document Outline

Редактировать HTML-файлы с помощью визуального проектировщика или средств просмотра кода иногда сложно, особенно, если приходится работать с большим количеством вложенных элементов. Когда система Visual Studio .NET впервые появилась на рынке, средство, известное как разметка документов (document outlining), экономило как минимум один рабочий день. На самом деле это свойство оказалось настолько удобным для работы с HTML-файлами, что его перекупили для работы с формами и элементами управления, не связанными с веб. В этой статье кратко описано окно Document Outline и показано, насколько эффективными бывают манипуляции с HTML-документами, формами и средствами управления.

Разметка HTML

Основной целью окна Document Outline является представление HTML-страниц в виде, допускающем простую навигацию по ним, так, чтобы можно было без труда находить разные HTML-элементы и контейнеры, в которых они находятся. Поскольку получить правильные HTML-макеты довольно сложно, особенно, если страница содержит много компонентов .NET, которые можно включить на страницу ASP.NET, окно Document Outline оказывается удобным способом для того, чтобы найти правильную позицию конкретного компонента.

На рисунке ниже показана типичная HTML-страница. Без окна Document Outline выбирать маленькие или невидимые элементы в проектировщике было бы довольно трудно. Окно Document Outline (View --> Other Windows --> Document Outline), показанное на рисунке ниже, слева, позволяет легко выбирать элементы в иерархии, чтобы определить, в каком месте страницы они расположены, и установить их свойства.

Система Visual Studio анализирует содержимое текущего активного файла и отражает его в виде дерева, содержащего каждый элемент иерархии страницы. В этом дереве отображается значение Name или ID каждого элемента (если они были присвоены), а неименованные элементы перечисляются с помощью их HTML-дескрипторов.

Когда вы выбираете какой-нибудь элемент в окне Document Outline, окно Design обновляется, позволяя выбрать этот компонент и его наследников. На рисунке выше показан выбор элемента H2 в списке дескрипторов элементов управления DIV, расположенном в окне Document Outline. Соответствующий элемент управления выделен в окне Design. Это позволяет увидеть, в каком месте страницы расположен данный элемент. Соответственно, выбирая элемент управления или компонент в окне Design, вы выбираете дескриптор в иерархии страницы, показанной в окне Document Outline (впрочем, для того, чтобы окно Document Outline было обновлено правильно, вам придется снова установить фокус на него).

Разметка элементов управления

Окно Document Outline существует в системе Visual Studio с первой версии .NET для HTML-файлов, но редко применялось для файлов других типов. После появления версии Visual Studio 2003 была разработана надстройка, обеспечивающая аналогичные возможности для элементов управления Windows Forms.

Этот инструмент стал настолько популярным, что компания Microsoft внедрила его функциональные возможности в инструментальное окно Document Outline, и теперь аналогичным образом можно просматривать элементы управления Windows Forms и WPF.

На рисунке ниже показано простое окно с несколькими элементами управления, создающее структуру и обеспечивающее средства управления для визуальных элементов. Каждый компонент в окне Document Outline представлен своим именем и типом. Как только компонент выбран в окне Document Outline, соответствующий визуальный элемент отображается на макете Design view.

Это значит, что если элементом управления является меню, то система Visual Studio автоматически откроет меню и выберет команду, готовую для редактирования. Легко представить, что это невероятно полезно для навигации по вашим макетам окон и часто позволяет быстро найти затерянные элементы.

Окно Document Outline обладает большими функциональными возможностями, когда оно используется в режиме Control Outline, а не как простое средство навигации. Щелкнув правой кнопкой мыши на элементе, откройте небольшое контекстное меню команд, которые можно быстро выполнить. Наиболее очевидным является доступ к окну Properties. Одним из наиболее рутинных занятий является переименование компонентов после того, как они уже были добавлены в форму. Можете выбирать их по очереди и устанавливать свойство Name в окне Properties, но, используя окно Document Outline, можно просто выбрать команду Rename в контекстном меню, и система Visual Studio автоматически переименует компоненты в проектном коде, тем самым обновив свойство Name без необходимости прокручивать список Properties.

Сложный дизайн окна иногда может привести к неожиданным результатам. Это часто происходит, когда компонент размещен в неправильном или неподходящем контейнере элементов управления. В этой ситуации можно переместить компонент в правильный контейнер. Разумеется, сначала необходимо обнаружить неполадку, даже если проблема еще не проявилась.

Окно Document Outline поможет в решении обеих этих задач. Во-первых, используя иерархическое представление, вы можете легко найти любой компонент и его базовые контейнерные элементы. В примере, приведенном на рисунке выше, показано, что элемент управления TextBox принадлежит панели Grid, которая в свою очередь принадлежит контейнеру Window. Тем самым можно легко идентифицировать ситуацию, в которой элемент размещен на макете некорректно.

Если возникает необходимость переместить компонент, бывает трудно сохранить макет в правильном порядке. В окне Document Outline эта задача решается просто. Достаточно перетащить и отпустить элемент управления в правильную позицию в иерархии.

Пользователь также имеет возможность вырезать, копировать и вставлять отдельные элементы или целые наборы контейнеров и их содержимое с помощью контекстного меню, которое открывается после щелчка правой кнопкой мыши. Функция "копировать-вставить" является особенной полезной, поскольку вы можете дублировать части макета в разные места формы, не пользуясь методом проб и ошибок при выборе правильных элементов на закладке Design view, или переупорядочивать их для дублирования в коде.

Вырезав элемент, не забудьте немедленно вставить его в нужную позицию.