Разработка макета формы рабочего элемента

Статья
02/20/2013

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

Если добавляется новый тип рабочего элемента, имеет смысл скопировать существующий тип и изменить его так, чтобы поля формы и процесс работы с ней соответствовали новому типу.

При разработке макета рекомендуется придерживаться следующих принципов.

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

О том, как экспортировать, импортировать и проверять изменения форм рабочих элементов, см. в разделе Изменение макета формы рабочего элемента.

Содержание раздела

Разделение формы на области
Работа с вкладками
Группирование полей
Задание размеров столбцов
Использование разделителя для поддержки переменных размеров столбцов
Управление размером формы и элементов формы
Задание разных макетов для разных целевых объектов

Разделение формы на области

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

Элемент	Описание
FORM	Содержит элементы Layout, определяющие способ отображения полей и элементов управления для типа рабочего элемента.
Layout	Содержит все элементы, определяющие способ отображения полей и элементов управления для определенного целевого объекта.Можно задавать разные макеты для разных целевых объектов, таких как Visual Studio или Team Web Access.К дочерним элементам, которые можно указывать в элементе Layout, относятся элементы Control, Group, TabGroup и Splitter.
Group	Объединяет дочерние элементы в форме в группу.Визуально группа отделяется границей и необязательной меткой.Группы, которые определены как прилегающие в стеке XML, в отображаемой форме разбиваются вертикально.Элемент Column можно указывать в качестве дочернего элемента Group.
Column	Объединяет все дочерние элементы в вертикальный столбец или разделяет форму по вертикали.Столбцы должны находиться в элементе Group.Элементы Group внутри элементов Column можно использовать для создания вложенных областей.По умолчанию столбцы разбивают элемент Group на равные части.Можно указать необязательный атрибут ширины в процентах, чтобы отвести больше пространства под один или несколько столбцов. К дочерним элементам, которые можно указывать в элементе Column, относятся элементы Control, Group, TabGroup и Splitter.
Splitter	Позволяет пользователям изменять ширину, отведенную под два столбца в форме.
Tab	Добавляет в форму различные вкладки для отображения дополнительных полей и элементов управления.К дочерним элементам, которые можно указывать в элементе Tab, относятся элементы Control, Group, TabGroup и Splitter.
TabGroup	Содержит группу элементов TAB.Как правило, вкладки добавляются в одну группу вкладок.Можно, однако, расположить две или более групп вкладок вертикально (одна над другой).

На следующем рисунке показана форма, в верхней части которой отображается восемь полей, приблизительно скомпонованных в два столбца.В нижней части отображается два набора по три вкладки, которые также скомпонованы в виде двух столбцов.

Настраиваемая форма с вкладками, скомпонованными в два столбца

Пользовательская форма рабочего элемента

Верхняя часть формы

В следующем коде определяется верхняя часть формы.Можно указать необходимое количество столбцов.Как показано в этом примере, первый столбец, размер которого составляет 70 процентов ширины формы, содержит две группы полей.Вторая группа полей, содержащая поля PU (Use Area Path) и Priority, определена в виде двух столбцов.Второй столбец занимает оставшиеся 30 процентов ширины формы.При изменении размера формы размеры областей, отводимых под столбцы, изменяются пропорционально.

<FORM>
      <Layout>
        <Group>
          <Column PercentWidth="70">
            <Group>
              <Column PercentWidth="100">
                <Control FieldName="System.Title" Type="FieldControl" Label="Title" LabelPosition="Left" />
                <Control FieldName="System.AreaPath" Type="WorkItemClassificationControl" Label="Area Path" LabelPosition="Left" />
                <Control FieldName="System.IterationPath" Type="WorkItemClassificationControl" Label="&amp;Iteration Path:" LabelPosition="Left" />
                <Group>
                  <Column PercentWidth="50">
                    <Control FieldName="Microsoft.VSTS.Common.ProductUnit" Type="FieldControl" Label="PU (Use Area Path)" LabelPosition="Left" />
                  </Column>
                  <Column PercentWidth="50">
                    <Control FieldName="Microsoft.VSTS.Common.Priority" Type="FieldControl" Label="Priority" LabelPosition="Left" />
                  </Column>
                </Group>
              </Column>
            </Group>
          </Column>
          <Column PercentWidth="30">
            <Group Label="Status">
              <Column PercentWidth="100">
                <Control FieldName="System.Id" Type="FieldControl" Label="Id" LabelPosition="Left" />
                <Control FieldName="System.State" Type="FieldControl" Label="State" LabelPosition="Left" />
                <Control FieldName="System.AssignedTo" Type="FieldControl" Label="Assigned To" LabelPosition="Left" />
              </Column>
            </Group>
          </Column>
        </Group>
        <Group Label="">
          <Column PercentWidth="60">
. . .
</Layout>
</FORM>

К началу

Работа с вкладками

Вкладки используются для объединения группы полей или для поддержки одного или нескольких особых элементов управления, таких как элементы управления для связывания рабочих элементов, привязки истории рабочего элемента или вложения файлов.Несколько определений типов рабочих элементов для шаблонов процессов Microsoft Solutions Framework (MSF) предполагают использование нескольких вкладок для управления типами создаваемых связей в зависимости от типа связи.Дополнительные сведения см. в разделе Рабочие элементы и рабочий процесс (гибкая разработка) или Рабочие элементы и рабочий процесс (CMMI).

Дополнительные сведения об использовании особых элементов управления см. в следующих разделах.

С помощью описанных в следующей таблице атрибутов можно указать метку вкладки и задать заполнение и поля (количество пикселей внутри и снаружи границы набора вкладок).

Атрибут	Описание
Label	Обязательное.Текст, определяющий название вкладки.
Margin	Необязательный параметр.Задает размер пространства вокруг вкладки в пикселях.
Padding	Необязательный параметр.Задает размер пространства вокруг внешней и внутренней границы вкладки в пикселях.

Шесть вкладок, скомпонованных параллельно

Пользовательская форма, содержащая две группы из 6 вкладок

В следующем примере кода показан синтаксис, используемый для создания макета на предыдущем рисунке.

<FORM>
      <Layout>
        . . . 
            <TabGroup>
              <Tab Label="Planning">
                <Group Label="Status" Padding="(0,0,0,3)">
                  <Column PercentWidth="50">
                    <Control FieldName="Microsoft.DevDiv.Importance" Type="FieldControl" Label="Importance" LabelPosition="Left" />
                    <Control FieldName="Microsoft.DevDiv.Commitment" Type="FieldControl" Label="Commitment / Confidence" LabelPosition="Left" />
                    . . .
                  </Column>
                  <Column PercentWidth="50" />
                </Group>
                <Group>
                  <Column PercentWidth="100">
                    <Control FieldName="Microsoft.DevDiv.Story" Type="HtmlFieldControl" Label="Story Board" LabelPosition="Top" />
                  </Column>
                </Group>
                <Group>
                  <Column PercentWidth="100">
                    <Control FieldName="System.Description" Type="HtmlFieldControl" Label="Value Proposition Description" LabelPosition="Top" />
                  </Column>
                </Group>
              </Tab>
              <Tab Label="Marketing">
                <Group>
                  <Column PercentWidth="100">
                    <Control FieldName="Microsoft.DevDiv.MarketingOwner" Type="FieldControl" Label="Marketing Owner" LabelPosition="Top" />
                    <Control FieldName="Microsoft.DevDiv.MarketingDescription" Type="HtmlFieldControl" Label="Marketing Description" LabelPosition="Top" />
                  </Column>
                </Group>
              </Tab>
              <Tab Label="Relationships">
                <Control Type="LinksControl" Label="Pillars" LabelPosition="Top" Name="Pillars">
                  . . . 
                </Control>
                <Control Type="LinksControl" Label="Experiences - Feature Groups" LabelPosition="Top" Name="Experiences">
                  . . . 
                </Control>
                <Control Type="LinksControl" Label="Flags / Associations" LabelPosition="Top" Name="Flags">
                  . . . 
                </Control>
              </Tab>
            </TabGroup>
          </Column>
          <Column PercentWidth="40">
            <TabGroup>
              <Tab Label="History">
                <Control FieldName="System.History" Type="WorkItemLogControl" Label="Detailed Description and History" LabelPosition="Top" Dock="Fill" />
              </Tab>
              <Tab Label="Links">
                <Control Type="LinksControl" LabelPosition="Top" >
                  . . . 
                </Control>
              </Tab>
              <Tab Label="File Attachments">
                <Control Type="AttachmentsControl" LabelPosition="Top" />
              </Tab>
            </TabGroup>
          </Column>
        </Group>
      </Layout>
</FORM>

К началу

Группирование полей

Элемент Group используется для визуальной группировки элементов, аналогично элементу управления Windows GroupBox.С помощью описанных в следующей таблице атрибутов можно указать метку для каждой группы и задать заполнение и поля (количество пикселей внутри и снаружи границы области группы).После элемента Group должен всегда следовать элемент Column, даже если группа имеет только один столбец.

Элемент Group следует использовать в качестве контейнера для полей в столбце и в качестве контейнера для столбцов в сегментированной области формы.Элемент Column можно указывать только в качестве дочернего в элементе Group.

Управлять размером и полями макета формы в целом можно путем задания атрибутов, описанных в следующей таблице.

Атрибут	Описание
Label	Необязательный параметр.Текст, определяющий название группы.
Margin	Необязательный параметр.Задает размер пространства вокруг группы и между элементом управления и его соседями в пикселях.Можно задавать разное количество свободного места для каждой стороны.
Padding	Необязательный параметр.Задает размер пространства вокруг внешней границы группы в пикселях.Можно задавать разное количество свободного места для каждой стороны.

Группа полей на вкладке

Группа из нескольких полей

В следующем примере кода показан синтаксис, используемый для создания группы полей на предыдущем рисунке.Дополнительные сведения о задании полей с помощью элемента Control см. в разделе Управление отображением полей рабочих элементов.

<TabGroup>
<Tab Label="Planning">
<Group Label="Status" Padding="(0,0,0,3)">
   <Column PercentWidth="5100">
      <Control FieldName="Microsoft.DevDiv.Importance" Type="FieldControl" Label="Importance" LabelPosition="Left" />
      <Control FieldName="Microsoft.DevDiv.Commitment" Type="FieldControl" Label="Commitment / Confidence" LabelPosition="Left" />
      <Control FieldName="Microsoft.DevDiv.VisionDoc" Type="FieldControl" Label="Vision Doc" LabelPosition="Left" />
      <Control FieldName="Microsoft.DeveloperDivision.Features.EstimatedCost" Type="FieldControl" Label="Estimated Cost" LabelPosition="Left" />
      <Control FieldName="Microsoft.DevDiv.BusinessUnit" Type="FieldControl" Label="BU (Use Area Path)" LabelPosition="Left" />
      <Control FieldName="Microsoft.DevDiv.Website" Type="FieldControl" Label="Website" LabelPosition="Left" />
   </Column>
</Group>
   . . .
</Tab>
</TabGroup>

К началу

Работа со столбцами

Можно создать в форме область, состоящую из двух или более столбцов.Ширину столбцов можно указывать в виде фиксированного значения или в виде процента от ширины элемента-контейнера — с помощью атрибутов FixedWidth или PercentWidth соответственно.Эти два атрибута элемента Column являются взаимоисключающими.Чтобы разрешить пользователю изменять размер столбца, можно задать элемент управления Splitter, как описано в подразделе Использование разделителя для поддержки переменных размеров столбцов.

Трехстолбцовая компоновка

Представление с 3 столбцами

Следующий код позволяет получить показанную выше трехстолбцовую компоновку полей.При организации групп полей в столбцы необходимо использовать элемент Group в качестве контейнера для каждого столбца полей.При необходимости можно снабдить группы полей метками.

<FORM>
   <Layout>
      <Group>
          <Column PercentWidth="36">
            <Group>
            <Control FieldName="System.Title" Type="FieldControl" Label="Title" LabelPosition="Left" />
            <Control FieldName="System.AreaPath" Type="WorkItemClassificationControl" Label="Area" LabelPosition="Left" />
            <Control FieldName="Microsoft.VSTS.Common.ProductUnit" Type="FieldControl" Label="Product Unit" LabelPosition="Left" />
            <Control FieldName="Microsoft.DevDiv.BusinessUnit" Type="FieldControl" Label="Business Unit" LabelPosition="Left" />
            </Group>
          </Column>
          <Column PercentWidth="33">
            <Group>
            <Control FieldName="Microsoft.DevDiv.SubTitle" Type="FieldControl" Label="Sub Title" LabelPosition="Left" />
            <Control FieldName="System.IterationPath" Type="WorkItemClassificationControl" Label="Iteration" LabelPosition="Left" />
            <Control FieldName="Microsoft.DevDiv.Other" Type="FieldControl" Label="Other" LabelPosition="Left" />
            </Group>
          </Column>
          <Column PercentWidth="31">
            <Group>
            <Control FieldName="Microsoft.DevDiv.Type" Type="FieldControl" Label="Type" LabelPosition="Left" />
            <Control FieldName="System.AssignedTo" Type="FieldControl" Label="Assigned To" LabelPosition="Left" />
            <Control FieldName="System.State" Type="FieldControl" Label="State" LabelPosition="Left" />
            </Group>
          </Column>
      </Group>
. . .
   </Layout>
</FORM>

Использование разделителя для поддержки переменных размеров столбцов

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

Двухстолбцовая компоновка с разделителем

В элементе Group, содержащем элементы Splitter и Column, должно быть указано в точности три элемента Column в следующей последовательности.

Столбец (элемент Column) слева от разделителя.
Столбец (элемент Column), содержащий только разделитель (элемент Splitter).
Столбец (элемент Column) справа от разделителя.

Дополнительные сведения см. в следующем примере.

<Group>
   <Column PercentWidth="50">
      <Group Label="First Group Left ">
         <Column PercentWidth="50">
            <Control FieldName="Microsoft.VSTS.Common.Priority" Type="FieldControl" Name="Pri2" Label="Priority:" />
            <Control FieldName="Microsoft.VSTS.Common.Rank" Type="FieldControl" Label="Stack Rank:" />
            <Control FieldName="Microsoft.VSTS.Scheduling.BaselineWork" Type="FieldControl" Label="Original Estimate:" />
            <Control FieldName="Microsoft.VSTS.Scheduling.RemainingWork" Type="FieldControl" Label="Remaining:" />
   </Column>
   <Column>
      <Splitter>
   </Column>
   <Column PercentWidth="50">
      <Group Label="Second Group Right">
            <Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.ChangeDate" Label="Change Date" Format="Short" LabelPosition="Right" />
            <Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.EstimateStartDate" Label="Estimated Start Date" Format="Short" LabelPosition="Right" />
            <Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.ActualStartDate" Label="Actual Start Date" Format="Short" LabelPosition="Right" />
            <Control Type="DateTimeControl" FieldName="ABC_Company.Project.Manual.FinishDate" Label="Finish Date" Format="Short" LabelPosition="Right" />
      </Group>
   </Column>
</Group>

К началу

Управление размером формы и элементов формы

Указать минимальные горизонтальный и вертикальный размер каждого макета формы можно, используя атрибут MinimumSize для макета.Размер формы, однако, изменяется в соответствии с суммой размеров, когда сумма горизонтальных и вертикальных размеров полей и компоновок, заданных для каждой формы, превышает указанные минимальные размеры.Кроме того, вертикальный размер всех вкладок соответствует размеру, необходимому для вкладки с максимальной вертикальной компоновкой.Размер последнего поля на каждой вкладке может быть изменен соответствующим образом для заполнения пространства по вертикали.

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

К началу

Управление размером макета

Атрибут	Описание	Пример значения шаблона
MinimumSize	Необязательный параметр.Строка вида (ширина, высота).Это значение определяет минимальный размер самой формы.Когда контейнер, в котором отображается макет формы, меньше этого размера, появляются горизонтальные и вертикальные полосы прокрутки.Когда суммарный размер полей на макете формы превышает значение атрибута MinimumSize, этот атрибут игнорируется.	(100,100)
Margin	Необязательный параметр.Строка вида (слева, сверху, справа, снизу), задающая размер пространства вокруг макета в пикселях.Можно задавать разное количество свободного места для каждой стороны.	(2,0,2,0)
Padding	Необязательный параметр.Строка вида (слева, сверху, справа, снизу), задающая размер пространства между внешней границей макета и внутренней границей в пикселях.Можно задавать разное количество свободного места для каждой стороны.	(2,0,2,0)
ControlSpacing	Необязательный параметр.Задает расстояние по вертикали между элементами управления в форме.Integer.	Неприменимо

К началу

Управление размером элементов формы

Атрибут MinimumSize элемента Control используется для задания минимальной ширины и высоты пространства, занимаемого каждым элементом формы.Если вертикального пространства недостаточно, появляется полоса прокрутки, чтобы сохранить минимальный размер.Без этого атрибута элементы управления отрисовываются с размерами по умолчанию, если только элементы управления на других вкладках не занимают больше места, увеличивая размер вкладки.С помощью других атрибутов, таких как Dock, Margin и Padding, можно выравнивать или растягивать элемент управления, а также задавать размер границы вокруг элемента управления.Дополнительные сведения см. в следующих разделах:

К началу

Задание разных макетов для разных целевых объектов

С помощью атрибута Target элемента Layout можно задавать разные макеты для разных целевых объектов.Если целевым объектом является Visual Studio или Team Explorer Everywhere, атрибуту присваивают значение WinForms; если целевым объектом является Team Web Access, атрибуту присваивают значение Web.

<FORM>
   <Layout Target="WinForms" >
      . . . 
   </Layout>
   <Layout Target="Web" >
      . . . 
   </Layout >
</FORM>

К началу

См. также

Поделиться через

Разработка макета формы рабочего элемента

Разделение формы на области

Работа с вкладками

Группирование полей

Работа со столбцами

Использование разделителя для поддержки переменных размеров столбцов

Управление размером формы и элементов формы

Управление размером макета

Управление размером элементов формы

Задание разных макетов для разных целевых объектов

См. также

Задачи

Основные понятия

Другие ресурсы

Дополнительные ресурсы