Share via

Criar o formulário de item de trabalho

  • Artigo

Quando você cria um formulário de item de trabalho, você deseja posicionar campos no formulário para que eles oferecem suporte os processos de entrada e o fluxo de trabalho de dados que serão seguidos por membros da equipe. Se você estiver adicionando apenas alguns campos a um formulário existente, você deve determinar onde você deseja adicioná-los no formulário. Se você estiver adicionando vários campos para dar suporte a um novo conjunto de dados para controlar, convém adicionar uma nova guia apenas para esses campos. Para minimizar a necessidade de rolar um formulário, você pode agrupar campos em várias colunas na parte superior do formulário ou em uma guia.

Se você estiver adicionando um novo tipo de item de trabalho, convém copiar um tipo existente e modificá-lo para exibir os campos e o processo de fluxo de trabalho que suporte o novo tipo.

Ao projetar o layout, considere as seguintes dicas para obter os melhores resultados:

  • Coloque os campos na parte superior do formulário que devem fazer referência a membros da equipe ou atualização com frequência.

  • Coloque campos em um guia que devem fazer referência a apenas alguns membros da equipe ou a atualização com pouca freqüência. Por exemplo, os controles que vincular itens de trabalho ou anexar arquivos normalmente são posicionados em guias separadas.

  • Agrupar campos em colunas para maximizar a exibição dos campos de dados. Você pode usar colunas na parte superior do formulário ou em uma guia. Você também pode exibir guias em um formato de várias colunas.

  • Use um ou mais controles de link em guias separadas ou na mesma guia para restringir os tipos de links que podem ser criadas entre campos de tipos de item de trabalho.

Para obter informações sobre como exportar, importar e verifique se as alterações de formulário de item de trabalho, consulte Alterar o layout do formulário de item de trabalho.

Neste tópico

  • Segmentar o formulário em áreas

  • Trabalhar com guias

  • Campos de grupo

  • Colunas de tamanho

  • Use um divisor para dar suporte a dimensionamento de coluna variável

  • Controlar o tamanho do formulário e elementos de formulário

  • Especificar layouts diferentes para diferentes destinos

Segmentar o formulário em áreas

Você pode usar elementos de layout para segmentar o seu formulário de item de trabalho em diferentes áreas, agrupar campos relacionados e alocar espaço no formulário de acordo com os requisitos de entrada de dados. A tabela a seguir descreve os elementos que são usados para segmentar o formulário em diferentes áreas.

Elemento

Descrição

FORM

Contém o Layout elementos que especificam a exibição de campos e controles para o tipo de item de trabalho.

Layout

Contém todos os elementos que especificam a exibição de campos e controles para um destino específico. Você pode especificar diferentes layouts para diferentes destinos, como Visual Studio ou Team Web Access. Elementos filho que você pode especificar um Layout elemento incluir Control, Group, TabGroup, e Splitter elementos.

Group

Clusters de elementos filho do formulário. Um grupo visualmente é separado por uma borda e um rótulo opcional. Os grupos são definidos em uma posição adjacente na pilha de XML são divididos verticalmente no formulário exibido. Você pode especificar o Column elemento como um filho de um Group elemento.

Column

Mantém todos os elementos filho em uma coluna vertical ou divide um formulário verticalmente. Colunas devem aparecer em uma Group. Groupelementos de Column elementos podem ser usados para criar áreas aninhadas. Por padrão, as colunas de dividir um Group uniformemente. Você pode especificar um atributo de largura de porcentagem opcional para alocar mais espaço para uma ou mais colunas.

Elementos filho que você pode especificar um Column elemento incluir Control, Group, TabGroup, e Splitter elementos.

Splitter

Os usuários podem redimensionar a largura alocada para duas colunas em um formulário.

Tab

Adiciona guias diferentes a um formulário para dar suporte a exibição de controles e campos adicionais. Elementos filho que você pode especificar um Tab elemento incluir Control, Group, TabGroup, e Splitter elementos.

TabGroup

Contém um grupo de TAB elementos. Em geral, você deve adicionar guias a um grupo único guia. No entanto, você pode empilhar dois ou mais grupos de guia vertical em um formulário.

A ilustração a seguir mostra um formulário cuja área superior exibe oito campos que são organizados aproximadamente em duas colunas. A parte inferior exibe dois conjuntos de três guias são organizados em um layout de duas colunas.

Formulário personalizado com três guias em um Layout de duas colunas

Formulário de item de trabalho personalizados

Parte superior do formulário

O código a seguir define a parte superior do formulário. Você pode introduzir colunas conforme necessário. Como mostrado neste exemplo, a primeira coluna, que é dimensionada em 70 por cento da largura do formulário, contém dois grupos de campos. O segundo grupo de campos, que contém o PU (usar caminho de área) e prioridade campos, é definido em um layout de duas colunas. A segunda coluna ocupa a largura de 30 por cento restante do formulário. Como o formulário é redimensionado, as áreas que são alocadas para as colunas variam proporcionalmente.

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

Trabalhar com guias

Use guias para um grupo de campos de cluster ou para dar suporte a um ou mais controles especiais, como os controles vinculados a itens de trabalho, vincular o histórico de item de trabalho, ou anexar arquivos. Várias definições de tipos de item de trabalho para os modelos de processo do Microsoft Solutions Framework (MSF) usam várias guias para controlar os tipos de links que podem ser criados, com base no tipo de link. Para obter mais informações, consulte Tipos de item de trabalho e fluxo de trabalho do modelo de processo do Agile ou Tipos de item de trabalho e fluxo de trabalho do modelo de processo do CMMI.

Para obter mais informações sobre como usar controles especiais, consulte os tópicos a seguir:

Usando os atributos que são descritos na tabela a seguir, você pode rotular a guia e especificar o preenchimento e margens que controlam o número de pixels dentro e fora da borda do controle guia.

Atributo

Descrição

Label

Obrigatório. Texto que especifica o nome da página da guia.

Margin

Opcional. Especifica, em pixels, a quantidade de espaço em torno da guia.

Padding

Opcional. Especifica, em pixels, a quantidade de espaço ao redor da borda externa e dentro da guia.

Seis guias organizados em um lado a lado pelo Layout

Formulário personalizado mostrando dois grupos de seis guias

O código a seguir lista a sintaxe usada para criar o layout é mostrado na ilustração anterior.

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

Campos de grupo

Você usa o Group elemento visualmente agrupar elementos, como a caixa de grupo do Windows. Usando os atributos que são descritos na tabela a seguir, você pode rotular cada grupo e especificar o preenchimento e margens que controlam o número de pixels dentro e fora da borda da área do grupo. O Group elemento deve sempre ser seguido por um Column elemento, mesmo se o grupo tiver apenas uma coluna.

Você deve usar o Group elemento como um contêiner para campos em uma coluna e como um contêiner para colunas em uma área segmentada no formulário. Você pode especificar o Column somente como um elemento do filho em um Group elemento.

Você pode controlar o espaçamento e o tamanho do layout do formulário geral, especificando os atributos que são descritos na tabela a seguir.

Atributo

Descrição

Label

Opcional. Texto que especifica o nome do grupo.

Margin

Opcional. Especifica, em pixels, a quantidade de espaço em torno do grupo e entre o controle e seus vizinhos. Você pode variar a quantidade de espaço em cada lado.

Padding

Opcional. Especifica, em pixels, a quantidade de espaço ao redor da borda externa do grupo. Você pode variar a quantidade de espaço em cada lado.

Grupo de campos organizados em uma guia

Grupo de vários campos

O código a seguir lista a sintaxe usada para criar o grupo de campos é mostrado na ilustração anterior. Para obter mais informações sobre como especificar os campos usando o Control elemento, consulte Controlar a exibição dos campos de item de trabalho.

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

Colunas de tamanho

Você pode criar uma área em um formulário que tenha duas ou mais colunas. Você pode especificar a largura da coluna como fixo ou como uma porcentagem da largura do elemento que contém usando o FixedWidth ou PercentWidth atributos, respectivamente. Esses dois Column atributos são mutuamente exclusivos. Para permitir que um usuário redimensionar a coluna, você pode especificar um Splitter controle, como Use um divisor para dar suporte a dimensionamento de coluna variável descreve.

Layout de três colunas

Exibição da coluna 3

O código a seguir produziu o layout de três colunas anterior de campos. Ao organizar os grupos de campos em colunas, use o Group elemento para conter cada coluna de campos. Opcionalmente, você pode rotular os grupos de campos.

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

Use um divisor para dar suporte a dimensionamento de coluna variável

Você usa o Splitter elemento quando quiser permitir que o Visualizador do formulário para redimensionar as colunas dinamicamente. O divisor aparece como uma linha pontilhada no formulário, conforme mostrado na ilustração a seguir. Você não pode especificar todos os elementos filho no Splitter elemento.

Layout de coluna 2 com divisor

Layout com duas colunas com divisor

Um Group elemento que contém Splitter e Column elementos devem especificar exatamente três Column elementos na sequência a seguir:

  1. um Column à esquerda do separador

  2. um Column que contém apenas o Splitter elemento

  3. um Column à direita do separador

Consulte o exemplo a seguir para obter mais informações.

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

Controlar o tamanho do formulário e elementos de formulário

Você pode especificar o tamanho mínimo horizontal e vertical de cada layout de formulário usando o MinimumSize atributo para o layout. No entanto, o formulário é redimensionado de acordo com as dimensões combinadas quando os tamanhos horizontais e verticais combinados dos controles de campo e layouts que são definidos para cada formulário são maiores do que as dimensões mínimas especificadas. Além disso, o tamanho de todas as guias vertical está de acordo com a dimensão que é necessário para a guia com o layout vertical máximo de tamanho. O último controle de campo em cada guia pode ser devidamente redimensionado para preencher a dimensão vertical.

Barras de rolagem são exibidas quando o contêiner que está exibindo o layout do formulário é menor do que o tamanho mínimo horizontal ou vertical do formulário. Se isso ocorrer, o problema de rolagem dupla pode ocorrer. Com rolagem dupla, os usuários talvez tenha que rolar o formulário em si e o controle de campo para localizar as informações desejadas. Para evitar o problema de rolagem dupla, convém colocar controles de campo estão sujeitos a rolagem, como campos de HTML e histórico, em sua própria guia.

Controlar o tamanho do layout

Você pode controlar o espaçamento e o tamanho do layout do formulário geral, especificando os atributos que são descritos na tabela a seguir.

Atributo

Descrição

Exemplo de valor padrão

MinimumSize

Opcional. Cadeia de caracteres de formato (largura, altura). Esse valor Especifica o tamanho mínimo para o próprio formulário. Quando o contêiner que exibe o layout do formulário for menor do que esse tamanho, barras de rolagem horizontais e verticais são exibidos. Quando o tamanho combinado de controles de campo do formulário de layout é maior do que o definido pelo MinimumSize atributo, o atributo é ignorado.

(100,100)

Margin

Opcional. Cadeia de caracteres de formato (à esquerda, superior, direita, inferior) que especifica, em pixels, a quantidade de espaço em torno do layout. Você pode variar a quantidade de espaço em cada lado.

(2,0,2,0)

Padding

Opcional. Cadeia de caracteres de formato ((à esquerda, superior, direita, inferior) que especifica, em pixels, a quantidade de espaço entre a borda externa do layout e dentro de borda. Você pode variar a quantidade de espaço em cada lado.

(2,0,2,0)

ControlSpacing

Opcional. Especifica o espaçamento vertical entre os controles no formulário. Inteiro.

N/D

Controlar o tamanho dos elementos de formulário

Você usa o Control elemento MinimumSize atributo para especificar a largura e altura mínimas que cada elemento de formulário deve ocupar. Se você não tem suficiente espaço vertical, uma barra de rolagem aparecerá manter seu tamanho mínimo. Sem esse atributo, os controles são desenhados usando seus tamanhos padrão, a menos que controles em outras guias ocupam mais espaço que aumenta o tamanho da guia. Você pode usar outros atributos, como Margin e Padding, para alinhar ou ampliar o controle e definir o tamanho da borda ao redor do controle. Para obter mais informações, consulte os seguintes tópicos:

Especificar layouts diferentes para diferentes destinos

Você pode especificar diferentes layouts para diferentes destinos usando o Layout elemento Target atributo. Destino Visual Studio ou Team Explorer Everywhere, você especificar WinFormse ao destino Team Web Access, você especificar Web.

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

Consulte também

Tarefas

Alterar o layout do formulário de item de trabalho