共用方式為

設計工作項目表單的配置

  • 發行項

更新：2011 年 5 月

當您設計工作項目表單時，就會想要在表單上放置欄位，讓這些欄位支援小組成員所遵循的資料輸入和工作流程。 如果您只要將少數欄位加入至現有的表單，就必須決定要在表單上加入欄位的位置。 如果您要加入許多欄位來支援所追蹤的新資料集合，可能會想要單獨針對這些欄位加入新的索引標籤。 為了盡可能減少捲動表單的需求，您可以在表單頂端或索引標籤中，將欄位分組成許多資料行。

如果您要加入新的工作項目類型，可能會想要複製現有的類型，然後加以修改，以便顯示支援新類型的欄位和工作流程。

當您設計配置時，請考慮使用下列提示來取得最佳結果：

  • 將小組成員必須參考或經常更新的欄位放置在表單頂端。

  • 將只有少數小組成員必須參考或不常更新的欄位放置在索引標籤上。 例如，連結工作項目或附加檔案的控制項通常會放置在不同的索引標籤上。

  • 將欄位分組成資料行，以便最大化資料欄位的顯示方式。 您可以在表單頂端或索引標籤上使用資料行。 您也可以用多欄格式來顯示索引標籤。

  • 在不同的索引標籤或相同的索引標籤上使用一個或多個連結控制項來限制可在工作項目類型欄位之間建立的連結類型。

如需如何匯出、匯入和驗證工作項目表單變更的詳細資訊，請參閱變更工作項目表單配置。

本主題內容

  • 將表單分割成區域

  • 使用索引標籤

  • 將欄位分組

  • 調整資料行大小

  • 使用分隔器來支援可變的資料行大小

  • 控制表單和表單項目的大小

  • 針對不同的目標指定不同的配置

將表單分割成區域

配置項目可用來將工作項目表單分成不同的區域，以依據資料輸入需求，分組相關的欄位，以及配置表單上的空間。 下表說明可用來將表單分割成不同區域的項目。

項目

說明

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 (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) 流程範本之工作項目類型的許多定義都會使用許多索引標籤來控制可建立的連結類型 (根據連結類型)。 如需詳細資訊，請參閱工作項目和工作流程 (Agile) 或工作項目和工作流程 (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 項目中指定任何子項目。

含有分隔器的雙欄式配置

有分隔器的 2 個資料行配置

包含 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

選擇性。 指定表單上控制項之間的垂直間距。 整數。

N/A

回到頁首

控制表單項目的大小

您可以使用 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 內容和網頁的連結

加入 Attachments 控制項

定義連結控制項以限制連結關聯性

變更記錄

日期

記錄

原因

2011 年 5 月

已更正數個 XML 項目的大小寫。 追蹤工作項目的結構描述定義會將 FORM 項目的所有子項目定義為依照 Camel 命名法的大小寫慣例，並將其他所有項目名稱中的所有字母變成大寫。

內容 Bug 修正。

2010 年 6 月

已加入圖例和其他程式碼範例。

資訊加強。

2010 年 7 月

為了說明清楚起見，已重寫某些章節。 已更正最後一節中 Team Explorer Everywhere 的參考。

資訊加強。