作業項目フォームのデザイン

[アーティクル]
11/30/2015

作業項目フォームを設計する場合、フォーム上にフィールドを配置して、後でチームメンバーによるデータ入力とワークフロープロセスがサポートされるようにすることができます。既存のフォームに少数のフィールドだけを追加する場合は、フォーム上に追加する場所を決定する必要があります。追跡するデータの新しいコレクションをサポートするためにいくつかのフィールドを追加する場合には、それらのフィールド専用に新しいタブを追加することができます。フォームをスクロールする必要性を最小限に抑えるには、フォームの上部またはタブで、複数のフィールドをいくつかの列にグループ化できます。

新しい作業項目の種類を追加する場合は、既存の種類をコピーし、新しい種類をサポートするフィールドとワークフロープロセスを表示するように変更できます。

レイアウトを設計するとき、最適な結果を得るために次のヒントについて考えてください。

少数のチームメンバーのみが低頻度で参照または更新するフィールドは、タブに配置します。たとえば、作業項目または添付ファイルをリンクするコントロールは、通常別々のタブで配置します。
フィールドを列にグループ化し、データフィールドの表示を最大化します。フォーム上部またはタブにある列を使用できます。また、複数列の形式でタブを表示することができます。
別個のタブまたは同一のタブで 1 つ以上のリンクコントロールを使用し、作業項目の種類のフィールド間に作成できるリンクの種類を制限します。

作業項目フォームの変更をエクスポート、インポート、および確認する方法については、「作業項目フォームのレイアウトの修正」を参照してください。

このトピックの内容

フォームをいくつかの領域に分割する
タブを使用する
フィールドをグループ化する
列をサイズ変更する
可変列のサイズ変更をサポートするためにスプリッターを使用する
フォームおよびフォーム要素のサイズを制御する
さまざまな対象ごとに異なるレイアウトを指定する

フォームをいくつかの領域に分割する

レイアウト要素を使用し、作業項目フォームをいくつかの異なる領域に分割し、データエントリの要件に従って、フォーム上で関連フィールドをグループ化して領域を割り振ります。次の表に、さまざまな領域にフォームを分割する際に使用する要素について説明します。

要素	説明
FORM	作業項目の種類に関するフィールドとコントロールの表示形式を指定する Layout 要素が含まれます。
Layout	特定のターゲットのフィールドとコントロールの表示形式を指定するすべての要素が含まれます。 Visual Studio または Team Web Access などの各種ターゲットにそれぞれ異なるレイアウトを指定できます。 Layout 要素で指定できる子要素には、Control、Group、TabGroup、および Splitter の各要素があります。
Group	フォーム上の子要素をクラスター化します。グループは、罫線および省略可能なラベルで視覚的に区切られます。 XML スタックで隣接して定義されているグループは、表示されているフォーム内で縦方向に分割されます。 Column 要素は Group 要素の子として指定できます。
Column	すべての子要素を縦方向の 1 列に納めるか、フォームを左右に分割します。列は、Group 内に表示する必要があります。 Group 要素に Column 要素を入れて、入れ子になった領域を作成することができます。既定では、列は Group で均等に分割されます。 1 つ以上の列に追加スペースを割り当てるため、パーセンテージによる幅属性を指定できます (省略可能)。 Column 要素で指定できる子要素には、Control、Group、TabGroup、および Splitter の各要素があります。
Splitter	ユーザーが、フォームで 2 つの列に割り当てられている幅をサイズ変更できるようにします。
Tab	追加のフィールドとコントロールの表示形式をサポートするため、フォームにさまざまなタブを追加します。 Tab 要素で指定できる子要素には、Control、Group、TabGroup、および Splitter の各要素があります。
TabGroup	TAB 要素のグループを含みます。一般に、1 つのタブグループに複数のタブを追加します。ただし、フォームの縦方向には、2 つ以上のタブグループをスタックできます。

次の図の例の場合、フォームの上部の領域には 8 つのフィールドがあり、ほぼ 2 つの列に配置されています。下部には、それぞれ 3 つのタブがあり、2 列構成のレイアウトになっているものが 2 組示されています。

3 つのタブがあり、2 列構成のレイアウトのカスタムフォーム

カスタム作業項目フォーム

フォームの上部

次のコードは、フォームの上部を定義します。必要に応じて、列を挿入ができます。この例のように、最初の列はフォームの幅の 70% にサイズ設定され、2 つのフィールドグループが入っています。 2 番目のフィールドグループには [PU (Use Area Path)] と [Priority] フィールドが入り、2 列構成レイアウトで定義されています。 2 番目の列は、フォームの残りの 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>

タブを使用する

タブは、フィールドグループをクラスター化するために、また、作業項目のリンク、作業項目履歴のリンク、あるいはファイルの添付のためのコントロールなど、1 つ以上の特殊なコントロールをサポートするために使用します。 Microsoft Solutions Framework (MSF) プロセステンプレートの作業項目の種類の定義の中には、いくつかのタブを使用して、リンクの種類に応じて作成可能なリンクの種類を制御するものもあります。詳細については、「アジャイルプロセステンプレートの作業項目の種類とワークフロー」または「CMMI プロセステンプレートの作業項目の種類とワークフロー」を参照してください。

特殊なコントロールの使用方法に関する詳細については、次のトピックを参照してください。

次の表に記載されている属性を使用すると、タブにラベルを付けたり、タブコントロールの枠線の内側および外側のピクセル数を制御する埋め込みと余白を指定したりできます。

属性	説明
Label	必須。タブページの名前を指定するテキストです。
Margin	省略可能です。タブの周囲の空白の量をピクセル単位で指定します。
Padding	省略可能です。タブの境界線の外側と内側の空白の容量をピクセル単位で指定します。

6 つのタブが横並びで配置されているレイアウト

6 つのタブがある 2 つのグループが表示されたカスタムフォーム

次のコードには、前の図に表示されているレイアウトを作成する際に使用する構文が示されています。

<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 要素が続きます。それは、グループに含まれる列が 1 列だけであっても当てはまります。

Group 要素を 1 つの列内にあるフィールドのコンテナーとして、およびフォーム上の分割された領域の列のコンテナーとして使用してください。 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>

列をサイズ変更する

フォーム内に、2 つ以上の列が含まれる領域を設計できます。 FixedWidth 属性を使用して固定の長さの列幅を指定することも、PercentWidth 属性を使用して含まれる要素の幅をパーセンテージとして指定することもできます。これらの 2 つの Column 属性は相互に排他的です。ユーザーが列のサイズを変更できるようにするには、Splitter コントロールを、「可変列のサイズ変更をサポートするためにスプリッターを使用する」の説明に従って指定できます。

3 列構成のレイアウト

3 列表示

前述の 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 列構成のレイアウト

分割線を使用した 2 列のレイアウト

Group 要素に Splitter 要素と Column 要素が含まれる場合、以下の順序で 3 つの 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	省略可能です。 (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。	N/A

フォーム要素のサイズを制御する

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>

参照

処理手順

作業項目フォームのレイアウトの修正

次の方法で共有