다음을 통해 공유

작업 항목 폼 디자인

  • 아티클

작업 항목 폼을 디자인할 때 팀 멤버들이 따라서 진행할 워크플로 프로세스 및 데이터 입력을 지원할 수 있도록 폼에 필드를 배치하려고 합니다. 기존 폼에 적은 수의 필드만 추가하는 경우 폼에서 필드를 추가할 위치를 결정해야 합니다. 추적할 새 데이터 컬렉션을 지원하도록 여러 필드를 추가하는 경우 이러한 필드에 대해서만 새 탭을 추가하려 할 수 있습니다. 폼에서 스크롤할 필요를 최소화하기 위해 폼 상단 또는 탭에서 여러 열로 필드를 그룹화할 수 있습니다.

새 작업 항목 형식을 추가하는 경우 기존 형식을 복사한 후 수정하여 새 형식을 지원하는 필드 및 워크플로 프로세스를 표시할 수 있습니다.

레이아웃을 디자인할 때는 다음 팁을 고려하여 최상의 결과를 얻으세요.

  • 팀 멤버들이 자주 참조하거나 업데이트해야 하는 필드는 폼 상단에 배치합니다.

  • 소수의 팀 멤버만 가끔씩 참조하는 필드는 탭에 배치합니다. 예를 들어 작업 항목을 연결하거나 파일을 첨부하는 컨트롤은 일반적으로 별도의 탭에 배치됩니다.

  • 데이터 필드를 최대한 많이 표시하려면 필드를 열로 그룹화합니다. 폼 상단이나 탭에 있는 열을 사용할 수 있습니다. 또한 탭을 여러 열 형식으로 표시할 수도 있습니다.

  • 별도의 탭 또는 동일한 탭에 있는 하나 이상의 링크 컨트롤을 사용하여 작업 항목 형식 필드 간에 만들 수 있는 링크 형식을 제한합니다.

작업 항목 폼 변경 내용을 내보내고 가져오고 확인하는 방법에 대한 자세한 내용은 작업 항목 폼 레이아웃 변경을 참조하세요.

항목 내용

  • 폼을 영역으로 분할

  • 탭 사용

  • 필드 그룹화

  • 열 크기 지정

  • 분할자를 사용하여 가변 열 크기 조정 지원

  • 폼 및 폼 요소 크기 제어

  • 대상마다 다른 레이아웃 지정

폼을 영역으로 분할

레이아웃 요소를 사용하여 작업 항목 폼을 여러 영역으로 분할하고, 데이터 입력 요구 사항에 따라 폼의 관련 필드를 그룹화하고 공간을 할당합니다. 다음 테이블에는 폼을 여러 다른 영역으로 분할하는 데 사용되는 요소가 설명되어 있습니다.

요소

설명

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 요소의 그룹을 포함합니다. 일반적으로 단일 탭 그룹에 탭을 추가합니다. 그러나 둘 이상의 탭 그룹을 폼에 세로로 쌓을 수 있습니다.

다음 그림에는 상단 영역에 8개의 필드가 대략 2개의 열로 정렬된 폼을 보여 줍니다. 아래쪽 부분에는 3개의 탭씩 2열로 정렬되어 표시됩니다.

2열 레이아웃에 3개 탭이 포함된 사용자 지정 양식

사용자 지정 작업 항목 폼

폼의 상단

다음 코드는 폼의 상단을 정의합니다. 필요에 따라 열을 추가할 수 있습니다. 이 예와 같이 폼 너비의 70%를 차지하는 첫 번째 열에는 두 필드 그룹이 포함됩니다. PU(영역 경로 사용) 및 우선 순위 필드를 포함하는 두 번재 필드 그룹은 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>

탭 사용

탭을 사용하여 필드 그룹을 클러스터링하거나 작업 항목 연결, 작업 항목 기록 연결, 파일 첨부 등의 여러 가지 특수한 컨트롤을 지원할 수 있습니다. MSF(Microsoft Solutions Framework) 프로세스 템플릿에 대한 작업 항목 형식의 여러 정의에서는 링크 형식에 따라 만들 수 있는 링크 형식을 제어하는 여러 탭이 사용됩니다. 자세한 내용은 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" />
              </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 GroupBox와 비슷하게 Group 요소를 사용하여 요소를 시각적으로 그룹화합니다. 다음 테이블에 설명된 특성을 사용하여 각 그룹에 레이블을 지정하고 그룹 영역 테두리 내외부의 픽셀 수를 제어하는 안쪽 여백과 여백을 지정할 수 있습니다. 그룹에 열이 하나만 들어 있더라도 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열 레이아웃

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

선택 사항입니다. 형식(너비, 높이)의 문자열입니다. 이 값은 폼 자체의 최소 크기를 지정합니다. 폼 레이아웃을 표시하는 컨테이너가 이 크기보다 작은 경우 가로 및 세로 스크롤 막대가 나타납니다. 레이아웃 폼에서 필드 컨트롤의 조합된 크기가 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 특성을 사용하여 각 폼 요소가 차지하는 최소 너비 및 높이를 지정합니다. 세로 공간이 충분하지 않은 경우 최소 크기를 유지할 수 있도록 스크롤 막대가 나타납니다. 이 특성을 사용하지 않으면 다른 탭의 컨트롤이 더 많은 공간을 차지하여 탭 크기를 증가시키지 않는 한 컨트롤은 기본 크기를 사용하여 그려집니다. Margin 및 Padding 등의 다른 특성을 사용하여 컨트롤을 맞추거나 늘리고 컨트롤 주변의 테두리 크기를 정의할 수 있습니다. 자세한 내용은 다음 항목을 참조하세요.

대상마다 다른 레이아웃 지정

Layout 요소 Target 특성을 사용하여 대상마다 다른 레이아웃을 지정할 수 있습니다. Visual Studio 또는 Team Explorer Everywhere을 대상으로 지정하려면 WinForms를 지정하고, Team Web Access을 대상으로 지정하려면 Web을 지정합니다.

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

참고 항목

작업

작업 항목 폼 레이아웃 변경