作業項目フォームのレイアウトのデザイン

  • [アーティクル]

更新 : 2011 年 5 月

作業項目フォームを設計するときは、チーム メンバーによるデータ入力およびワークフロー プロセスがサポートされるように、フィールドをフォーム上に配置します。 既存のフォームに 2、3 個のフィールドだけを追加する場合は、フォームのどこに追加するかを決定する必要があります。 新しいデータ コレクションの追跡をサポートするための複数のフィールドを追加する場合は、これらのフィールド専用の新しいタブを追加することができます。 フォームをできるだけスクロールしないですむように、フォームの上部やタブ内の複数の列にフィールドをグループ化します。

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

レイアウトを設計するときには、最高の結果が得られるように次のヒントを考慮してください。

  • チーム メンバーが頻繁に参照または更新する必要のあるフィールドはフォームの上部に配置します。

  • 小数のチーム メンバーだけがまれに参照または更新するフィールドはタブに配置します。 たとえば、作業項目や添付ファイルにリンクするコントロールは、別個のタブに配置するのが一般的です。

  • フィールドを列にグループ化して、データ フィールドを最大限に表示できるようにします。 フォームの上部またはタブで列を使用できます。 複数列の形式でタブを表示することもできます。

  • 個々のタブ上または同じタブ上で 1 つ以上のリンク コントロールを使用して、作業項目の種類のフィールド間で作成できるリンクの種類を制限します。

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

このトピックの内容

  • 領域へのフォーム分割

  • タブの使用

  • フィールドのグループ化

  • 列のサイズ設定

  • 分割線を使用した可変列のサイズ変更

  • フォームおよびフォーム要素のサイズの制御

  • ターゲットごとに異なるレイアウトの指定

領域へのフォーム分割

レイアウト要素は、作業項目フォームを複数の領域に分割し、データ入力要件に応じて関連するフィールドをグループ化してフォーム上の領域を割り当てるために使用します。 フォームを複数の領域に分割するために使用する要素を次の表に示します。

要素

説明

FORM

作業項目の種類に関するフィールドおよびコントロールの表示を指定する Layout 要素を含みます。

Layout

特定のターゲットに関するフィールドおよびコントロールの表示を指定するすべての要素を含みます。 Visual Studio や Team System Web Access などの異なるターゲットに対して、異なるレイアウトを指定できます。 Layout 要素で指定できる子要素には、Control、Group、TabGroup、および Splitter の各要素があります。

Group

子要素をフォーム上でクラスター化します。 グループは境界線によって視覚的に区切られており、必要に応じてグループにラベルを付けることもできます。 XML スタック内で隣り合って定義されているグループは、垂直方向に分割されてフォームに表示されます。 Column 要素は Group 要素の子として指定できます。

Column

すべての子要素を縦の 1 列に保持するか、フォームを左右に分割します。 列は、1 つの Group 内に表示される必要があります。 Column 要素内で Group 要素を使用して、入れ子になった領域を作成できます。 既定では、列は Group 内で同じ幅に分割されます。 オプションのパーセンテージ幅属性を指定して、より多くのスペースを 1 つ以上の列に割り当てることができます。

Column 要素で指定できる子要素には、Control、Group、TabGroup、および Splitter の各要素があります。

Splitter

1 つのフォーム内で 2 つの列に割り当てられている幅のサイズをユーザーが変更できるようにします。

Tab

フォームに別のタブを追加して、追加のフィールドやコントロールを表示できるようにします。 Tab 要素で指定できる子要素には、Control、Group、TabGroup、および Splitter の各要素があります。

TabGroup

TAB 要素のグループを含みます。 通常、タブは単一のタブ グループに追加します。 ただし、2 つ以上のタブ グループをフォーム内で縦方向にスタックできます。

次に示すフォームでは、大まかに 2 つの列に配置される 8 つのフィールドが上部の領域に表示されています。 下の部分には、3 つ 1 組のタブ セット 2 つが 2 列のレイアウトで配置されています。

3 つ 1 組のタブ セットを 2 列のレイアウトに配置したカスタム フォーム

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

フォームの上部

次のコードは、フォームの上部を定義しています。 必要な数だけ列を指定できます。 この例で示すように、フォーム幅の 70% にサイズが設定されている最初の列には 2 つのフィールド グループが含まれています。 [PU (Use Area Path)] フィールドと [Priority] フィールドを含む 2 番目のフィールド グループは、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" 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>

ページのトップへ

フィールドのグループ化

Windows のグループ ボックスのように要素を視覚的にグループ化するには、Group 要素を使用します。 次の表に示す属性を指定して、各グループにラベルを付け、埋め込みおよび余白を指定して、グループ領域の境界線の内側と外側のピクセル数を制御できます。 Group 要素の後には、必ず Column 要素が続きます。グループの列が 1 つだけの場合であっても同様です。

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>

ページのトップへ

列の使用

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 列のレイアウト

Splitter 要素と Column 要素が含まれている Group 要素では、3 つの 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。

N/A

ページのトップへ

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

各フォーム要素の最小の幅と高さを指定するには、Control 要素の MinimumSize 属性を使用します。 高さが十分でない場合は、スクロール バーが表示されて、最小サイズが維持されます。 この属性を指定しない場合、その他のタブでコントロールがより多くの領域を使用してタブのサイズが大きくなることのない限り、コントロールは既定のサイズで表示されます。 Dock、Margin、Padding などのその他の属性を使用して、コントロールを整列または伸縮したり、コントロールの周囲の境界線のサイズを定義したりできます。 詳細については、次のトピックを参照してください。

ページのトップへ

ターゲットごとに異なるレイアウトの指定

Layout 要素の Target 属性を使用して、ターゲットごとに異なるレイアウトを指定できます。 Visual Studio または Team Explorer Everywhere をターゲットにする場合は WinForms を指定し、Team System Web Access をターゲットにする場合は Web を指定します。

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

ページのトップへ

参照

処理手順

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

その他の技術情報

作業項目フォームのデザインとカスタマイズ

作業項目フィールドの表示の制御

作業項目フォーム上の Web ページへのヘルプ テキスト、プロセス ガイダンス、Web コンテンツ、およびリンクの追加

添付ファイル コントロールの追加

リンク コントロールの定義とリンク関係の制限

履歴の変更

日付

履歴

理由

2011 年 5 月

複数の XML 要素の大文字と小文字を訂正。 作業項目トラッキングのスキーマ定義では、FORM 要素のすべての子要素が Camel 形式で、その他の要素名がすべて大文字で定義されます。

コンテンツ バグ修正

2010 年 6 月

図およびコード例が追加されました。

情報の拡充

2010 年 7 月

わかりやすいように一部のセクションが書き直されました。 また、最後のセクションの Team Explorer Everywhere のリファレンスが修正されました。

情報の拡充