设计工作项窗体

  • 项目

设计工作项窗体时，你希望将字段放置在窗体上，以使它们可支持团队成员将遵循的数据输入和工作流程。 如果只是将几个字段添加到现有窗体，则必须确定要将它们添加到窗体上的位置。 如果要添加几个字段以支持要跟踪的新数据集合，则你可能要只为这些字段添加一个新选项卡。 若要尽量减少滚动窗体的需要，可以在窗体顶部或选项卡中将字段分组为多个列。

如果要添加新工作项类型，则可能要复制现有类型并修改它，以显示支持新类型的字段和工作流程。

设计布局时，请考虑以下提示以获得最佳结果：

  • 将只有少数团队成员必须偶尔引用或更新的字段放置在选项卡上。 例如，链接工作项或附加文件的控件通常放置在单独的选项卡上。

  • 将字段分组为多列，以最大化数据字段的显示。 可以在窗体顶部或选项卡中使用列。 也可以采用多列格式显示选项卡。

  • 在不同选项卡上或同一选项卡上使用一个或多个链接控件来限制可以在工作项类型字段之间创建的链接类型。

有关如何导出、导入和验证工作项窗体更改的信息，请参阅更改工作项窗体布局。

主题内容

  • 将窗体划分为各个区域

  • 使用选项卡

  • 对字段分组

  • 调整列的大小

  • 使用拆分器支持可变列大小调整

  • 控制窗体和窗体元素的大小

  • 为不同目标指定不同布局

将窗体划分为各个区域

可使用布局元素将工作项窗体划分为不同区域，从而对相关字段分组并根据数据输入要求在窗体上分配空间。 下表介绍用于将窗体划分为不同区域的元素。

元素

描述

FORM

包含为工作项类型指定字段和控件的显示的 Layout 元素。

Layout

包含为特定目标指定字段和控件的显示的所有元素。 可以为不同目标指定不同布局，如 Visual Studio 或 Team Web Access。 可以在 Layout 元素中指定的子元素包括 Control、Group、TabGroup 和 Splitter 元素。

Group

在窗体上聚集子元素。 组可直观地通过边框和可选标签进行分隔。 在 XML 堆栈中的相邻位置定义的组会在显示的窗体中垂直拆分。 可以指定 Column 元素作为 Group 元素的子级。

Column

将所有子元素保留在垂直列中或垂直拆分窗体。 列必须出现在 Group 中。 Column 元素中的 Group 元素可以用于创建嵌套区域。 默认情况下，列会均匀拆分 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 Solutions Framework (MSF) 过程模板的工作项类型的几个定义使用几个选项卡基于链接类型控制可以创建的链接类型。 有关详细信息，请参阅敏捷过程模板工作项类型和工作流或CMMI 过程模板工作项类型和工作流。

有关如何使用特殊控件的详细信息，请参阅以下主题：

通过使用下表中介绍的特性，可以标记选项卡，并指定控制选项卡控件边框内部和外部的像素数的填充和边距。

特性

描述

Label

必需。 指定选项卡页的名称的文本。

Margin

可选。 指定选项卡周围的空间量（以像素为单位）。

Padding

可选。 指定选项卡边框外部和内部周围的空间量（以像素为单位）。

通过布局并排排列的六个选项卡

显示两组六个选项卡的自定义窗体

下面的代码列出了用于创建上图所示的布局的语法。

<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 分组框相似）。 通过使用下表中介绍的特性，可以标记每个组，并指定控制组区域边框内部和外部的像素数的填充和边距。 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 控件（如“使用拆分器支持可变列大小调整”中所述）。

三列布局

三列显示

下面的代码生成字段以前的三列布局。 按列组织字段组时，使用 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 元素中指定任何子元素。

带拆分器的两列布局

带拆分器的两列布局

包含 Splitter 和 Column 元素的 Group 元素必须确切地按以下顺序指定三个 Column 元素：

  1. 拆分器左侧的 Column

  2. 仅包含 Splitter 元素的 Column

  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

可选。 (Width, Height) 格式的字符串。 此值指定窗体自身的最小尺寸。 如果显示窗体布局的容器小于此大小，将显示水平滚动条和垂直滚动条。 当布局窗体上字段控件的组合大小大于 MinimumSize 特性设置的大小时，会忽略该特性。

(100,100)

Margin

可选。 (Left, Top, Right, Bottom) 格式的字符串，指定布局周围的空间量（以像素为单位）。 可以为每个边指定不同的空间量。

(2,0,2,0)

Padding

可选。 ((Left, Top, Right, Bottom) 格式的字符串，指定布局外部边框与内部边框之间的空间量（以像素为单位）。 可以为每个边指定不同的空间量。

(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>

请参见

任务

更改工作项窗体布局