Share via

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

  • Статья

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

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

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

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

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

  • Группируйте поля в колонки, чтобы в максимальной степени отображать поля с данными. Можно использовать колонки наверху формы или во вкладках. Также можно отображать вкладки в многоколонном формате.

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

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

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

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

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

  • Группировка полей

  • Размер колонок

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

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

  • Определение различных разметок для различных целей

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

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

Элемент

Описание

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 (Путь пользовательской области) и Приоритет, определены в двухколонной разметке. Вторая колонка занимает остальные 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 (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" />
              </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 в следующей последовательности:

  1. Column слева от разделителя

  2. Column, который содержит только элемент Splitter

  3. 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.

Н/Д

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

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

Определение различных разметок для различных целей

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

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

См. также

Задачи

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