다음을 통해 공유

작업 항목 폼의 레이아웃 디자인

  • 아티클

작업 항목 폼을 디자인할 때 팀 멤버가 따를 데이터 입력 및 워크플로 프로세스를 지원하도록 필드를 폼에 배치할 수 있습니다.기존 폼에 필드를 몇 개만 추가할 경우 폼에서 필드를 추가할 위치를 결정해야 합니다.추적할 새 데이터 컬렉션을 지원하기 위해 여러 필드를 추가할 경우 이러한 필드 전용으로 새 탭을 추가할 수 있습니다.폼을 스크롤할 필요가 거의 없도록 폼 상단이나 탭에서 필드를 여러 열로 그룹화할 수 있습니다.

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

레이아웃을 디자인할 때 최상의 결과를 얻으려면 다음 팁을 고려하십시오.

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

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

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

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

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

항목 내용

  • 영역으로 폼 분할

  • 탭 작업

  • 필드 그룹화

  • 열 크기 조정

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

  • 폼 및 폼 요소의 크기 제어

  • 다양한 대상에 대해 여러 레이아웃 지정

영역으로 폼 분할

레이아웃 요소를 사용하여 작업 항목 폼을 다른 영역으로 나누어 관련 필드를 그룹화하고 데이터 항목 요구 사항에 따라 폼에 공간을 할당합니다.다음 표에서는 폼을 다양한 요소로 분할하는 데 사용되는 요소에 대해 설명합니다.

요소

설명

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열 레이아웃으로 정렬된 세 탭의 두 집합이 표시됩니다.

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>

맨 위로 이동

탭 작업

탭을 사용하여 필드 그룹을 클러스터링하거나 하나 이상의 특수 컨트롤(예: 작업 항목을 연결하거나 작업 항목 기록을 연결하거나 파일을 첨부하는 컨트롤)을 지원할 수 있습니다.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열 레이아웃

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 요소는 다음 순서로 정확히 세 개의 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 및 기록 필드와 같이 스크롤이 필요한 필드 컨트롤을 고유의 탭에 배치해야 합니다.

맨 위로 이동

ms194952.collapse_all(ko-kr,VS.110).gif레이아웃 크기 제어

다음 표에 설명된 특성을 지정하여 전체 폼 레이아웃의 간격과 크기를 제어할 수 있습니다.

특성

설명

패턴 값 예

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

맨 위로 이동

ms194952.collapse_all(ko-kr,VS.110).gif폼 요소의 크기 제어

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>

맨 위로 이동

참고 항목

작업

작업 항목 폼 레이아웃 변경

개념

작업 항목 폼 디자인 및 사용자 지정

작업 항목 필드의 표시 제어

Attachments 컨트롤 추가

링크 관계를 제한하기 위한 링크 컨트롤 정의

기타 리소스

도움말 텍스트, 프로세스 지침, 웹 콘텐츠 및 작업 항목 폼의 웹 페이지 링크 제공