通过

设计工作项窗体的布局

  • 项目

更新：2011 年 5 月

在设计工作项窗体时，您需要将字段置于该窗体上，使它们能支持数据输入和团队成员将遵循的工作流过程。 如果只向现有窗体中添加几个字段，则必须确定要将这些字段添加到窗体上的哪个位置。 如果添加多个字段以支持要跟踪的新数据集，则可能需要为这些字段添加一个新选项卡。 若要使滚动窗体的需求降至最低，您可以将字段分组到窗体顶部或选项卡中的多个列中。

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

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

  • 将字段放在团队成员必须经常引用或更新的窗体的顶部。

  • 将字段放在仅几个团队成员偶尔引用或更新的选项卡上。 例如，链接工作项或附加文件的控件通常位于单独的选项卡上。

  • 将字段分组到多个列中，以便最大限度地显示数据字段。 您可以使用窗体顶部或选项卡上的列。 也可以用多列形式显示选项卡。

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

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

主题内容

  • 将窗体分为多个区域

  • 使用选项卡

  • 分组字段

  • 调整列的大小

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

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

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

将窗体分为多个区域

可以使用 Layout 元素将工作项窗体分成不同区域，并根据数据项要求分组相关字段以及分配窗体上的空间。 下表描述了用于将窗体分为不同区域的元素。

元素

说明

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) 过程模板的某些工作项类型定义使用几个选项卡来控制可根据链接类型创建的链接的类型。 有关更多信息，请参见工作项和工作流 (Agile)或工作项和工作流 (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" 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 控件，如使用拆分器支持可变列大小调整中所述。

三列布局

三列显示

下面的代码生成了前面的字段的三列布局。 在将各组字段分组到列中时，请使用 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. 只包含 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

可选。 （宽度，高度）格式的字符串。 此值指定窗体自身的最小尺寸。 如果显示窗体布局的容器小于此大小，将出现水平滚动条和垂直滚动条。 如果布局窗体上的字段控件的总大小大于 MinimumSize 特性设置的大小，将忽略该特性。

(100,100)

Margin

可选。 （左、上、右、下）格式的字符串，指定布局周围的空间量（以像素为单位）。 可以为每个边指定不同的空间量。

(2,0,2,0)

Padding

可选。 （左、上、右、下）格式的字符串，指定布局外边框和内边框之间的空间量（以像素为单位）。 可以为每个边指定不同的空间量。

(2,0,2,0)

ControlSpacing

可选。 指定窗体上的各个控件之间的垂直间距。 Integer。

不可用

返回页首

控制窗体元素的大小

使用 Control 元素 MinimumSize 特性指定每个窗体元素应占据的最小宽度和高度。 如果没有足够的垂直空间，则之后将出现滚动条以保持其最小大小。 如果没有此特性，则会使用其默认大小绘制控件，除非其它选项卡中的控件占用更多会增加选项卡尺寸的空间。 您可以使用其他特性（如 Dock、Margin 和 Padding）对齐或拉伸控件并定义控件边框的大小。 有关更多信息，请参见下列主题：

返回页首

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

可以使用 Layout 元素的 Target 特性为不同目标指定不同的布局。 若要将 Visual Studio 或 Team Explorer Everywhere 作为目标，请指定 WinForms；若要将 Team Web Access 作为目标，请指定 Web。

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

返回页首

请参见

任务

更改工作项窗体布局

概念

设计和自定义工作项窗体

其他资源

控制工作项字段的显示

在工作项窗体上提供帮助文本、过程指导、Web 内容和网页链接

添加附件控件

定义链接控件以限制链接关系

修订记录

日期

修订记录

原因

2011 年 5 月

更正了某些 XML 元素的大小写。 用于跟踪工作项的架构定义以 Camel 大小写格式定义 FORM 元素的所有子元素，并将所有其他元素的名称中的所有字母设置为大写。

内容 Bug 修复

2010 年 6 月

已添加图示和更多代码示例。

信息补充。

2010 年 7 月

为清楚起见，已重新编写一些章节。 已更正对最后一节中对 Team Explorer Everywhere 的引用。

信息补充。