Criar o Layout do formulário de Item de trabalho

Artigo
08/01/2011

Quando você cria um formulário de item de trabalho, que você deseja posicionar os campos do formulário para que eles oferecem suporte os processos de fluxo de trabalho e de entrada de dados que serão seguidos pelos integrantes da equipe. Se você estiver adicionando apenas alguns campos a um formulário existente, você deve determinar onde deseja adicioná-los no formulário. Se você estiver adicionando vários campos para dar suporte a uma nova coleção 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, você poderá copiar um tipo existente e modificá-lo para exibir os campos e o processo de fluxo de trabalho que suportam o novo tipo.

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

Freqüentemente, colocar campos na parte superior do formulário que devem fazer referência a membros da equipe ou atualização.
Coloque os 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 geralmente são posicionados em guias separadas.
Agrupar campos em colunas para maximizar a exibição de campos de dados. Você pode usar as colunas na parte superior do formulário ou em uma guia. Você também pode exibir as 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 os campos de tipos de item de trabalho.

Para obter informações sobre como exportar, importar e verificar as alterações de formulário de item de trabalho, consulte Alterar o Layout de formulário de Item de trabalho.

Neste tópico

O formulário em áreas de segmentação
Trabalhar com guias
Campos de agrupamento
Colunas de dimensionamento.
Usando um divisor de dimensionamento de coluna de variável de suporte
Controlar o tamanho do formulário e elementos de formulário
A especificação de diferentes Layouts para diferentes destinos

O formulário em áreas de segmentação

Você pode usar elementos de layout para segmentar o seu formulário de item de trabalho em diferentes áreas, agrupando os 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 especificar 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 em um LAYOUT elemento incluir CONTROL, GROUP, TABGROUP, e SPLITTER elementos.
GROUP	Clusters de elementos filho do formulário. Visualmente, um grupo é 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 verticalmente de um formulário. Colunas devem aparecer em um GROUP. GROUPelementos de COLUMN elementos podem ser usados para criar áreas aninhados. Por padrão, as colunas dividir uma 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 em um COLUMN elemento incluir CONTROL, GROUP, TABGROUP, e SPLITTER elementos.
SPLITTER	Permite aos usuários redimensionar a largura alocada para duas colunas em um formulário.
TAB	Adiciona guias diferentes para um formulário para dar suporte a exibição de controles e campos adicionais. Elementos filho que você pode especificar em 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 de guia. No entanto, você pode empilhar dois ou mais grupos de guia verticalmente em um formulário.

A ilustração a seguir mostra um formulário cuja área superior exibe os campos de oito 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

TrabalhoPersonalizar <>item><>>formulário

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 é dimensionada de 70% 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, que é definido em um layout de duas colunas. A segunda coluna ultrapassa a largura de 30 por cento restante do formulário. Como o formulário é redimensionado, as áreas que estã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>

Voltar ao topo

Trabalhar com guias

Você pode usar guias para um grupo de campos de cluster ou para oferecer suporte a um ou mais controles especiais, como, por exemplo, os controles que vincular itens de trabalho, vincular o histórico de itens de trabalho ou anexar arquivos. Várias definições dos tipos de item de trabalho para os modelos de processo de 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 Itens de trabalho e o fluxo de trabalho (Agile) ou Itens de trabalho e o fluxo de trabalho (CMMI).

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

Usando os atributos que são descritos na tabela a seguir, você pode rotular a guia e especificar o preenchimento e margens controlarem 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 interna da guia.

Seis guias organizadas em um lado a lado por Layout

Personalizar<>mostrando dois grupos de seis guias de formulário de>

O código a seguir lista a sintaxe que é usada para criar o layout que é 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" 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>

Voltar ao topo

Campos de agrupamento

Você pode usar o GROUP elemento para visualmente agrupar elementos, semelhantes à 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 controlarem o número de pixels dentro e fora da borda da área de grupo. O GROUP elemento sempre deve ser seguido por um COLUMN elemento, mesmo se o grupo tem apenas uma coluna.

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

Você pode controlar o espaçamento e o tamanho do layout geral do formulário, 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 ao redor 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 que é 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 de 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>

Voltar ao topo

Trabalhando com colunas

Você pode criar uma área em um formulário que tem duas ou mais colunas. Você pode especificar a largura da coluna como fixo ou como uma porcentagem da largura do elemento contido usando o FixedWidth ou PercentWidth atributos, respectivamente. Esses dois COLUMN atributos são mutuamente exclusivas. Para permitir que um usuário redimensionar a coluna, você pode especificar um SPLITTER o controle, como usando um divisor de dimensionamento de coluna variável suporte descreve.

Layout de três colunas

O seguinte código produzido o layout de três colunas anterior de campos. Quando você organiza grupos de campos em colunas, use o GROUP elemento para conter a 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>

Usando um divisor de dimensionamento de coluna de variável de suporte

Você pode usar o SPLITTER elemento quando você deseja permitir que o Visualizador do formulário dinamicamente redimensionar colunas. O divisor é exibido como uma linha pontilhada no formulário, conforme mostrado na ilustração a seguir. Não é possível especificar quaisquer elementos filho de SPLITTER elemento.

Layout de coluna 2 com o divisor

Layout de duas colunas com divisor

A GROUP elemento que contém SPLITTER e COLUMN elementos devem especificar exatamente três COLUMN elementos na seqüência a seguir:

um COLUMN para a esquerda do separador
AA COLUMN que contém somente o SPLITTER elemento
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>

Voltar ao topo

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 de 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 de mínimas especificadas. Além disso, o tamanho vertical de todas as guias em conformidade com a dimensão que é necessário para dimensionar a guia com o layout vertical máxima. O último controle de campo em cada guia pode ser redimensionado de acordo para preencher a dimensão vertical.

Barras de rolagem aparecem quando o contêiner que está exibindo o layout do formulário é menor que o tamanho mínimo horizontal ou vertical do formulário. Se isso ocorrer, o problema de rolagem dupla pode ocorrer. Com a rolagem dupla, os usuários podem ter que rolar o próprio formulário e o controle de campo para localizar as informações que desejarem. Para evitar o problema de rolagem dupla, você talvez queira colocar controles de campo estão sujeitos a rolagem, como HTML e o histórico de campos, na próprio guia.

Voltar ao topo

Controlar o tamanho do Layout

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

Atributo	Descrição	Exemplo de valor padrão
MinimumSize	Opcional. A seqüência de caracteres do formulário (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 é menor do que esse tamanho, aparecem as barras de rolagem horizontais e verticais. Quando o tamanho combinado dos controles de campo no formulário layout é maior que o definido pelo MinimumSize atributo, o atributo é ignorado.	(100,100)
Margin	Opcional. String no formato (esquerda, superior, direita, inferior) que especifica, em pixels, a quantidade de espaço em torno de layout. Você pode variar a quantidade de espaço em cada lado.	(2,0,2,0)
Padding	Opcional. A seqüência de caracteres do formulário ((esquerda, superior, direita, inferior) que especifica, em pixels, a quantidade de espaço entre a borda externa do layout e interna 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. Número inteiro.	N/A

Voltar ao topo

Controlar o tamanho dos elementos de formulário

Você pode usar 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 aparece para manter o seu tamanho mínimo. Sem esse atributo, os controles são desenhados usando seus tamanhos padrão, a menos que os controles em outras guias levar mais espaço que aumenta o tamanho da guia. Você pode usar outros atributos, como Dock, Margin, e Padding, para alinhar ou alongar o controle e defina o tamanho da borda do controle. Para obter mais informações, consulte os seguintes tópicos:

Voltar ao topo

A especificação de diferentes Layouts 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 para o destino Team Web Access, você especificar Web.

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

Voltar ao topo

Consulte também

Histórico de alterações

Date	History	Motivo
Junho de 2010	As ilustrações adicionadas e mais amostras de código.	Aprimoramento de informações.
Julho de 2010	Reescreveu algumas seções para maior clareza. Corrigida a referência a Team Explorer Everywhere na última seção.	Aprimoramento de informações.

Junho de 2010

As ilustrações adicionadas e mais amostras de código.

Aprimoramento de informações.

Julho de 2010

Reescreveu algumas seções para maior clareza. Corrigida a referência a Team Explorer Everywhere na última seção.

Aprimoramento de informações.

Compartilhar via

Criar o Layout do formulário de Item de trabalho

O formulário em áreas de segmentação

Trabalhar com guias

Campos de agrupamento

Trabalhando com colunas

Usando um divisor de dimensionamento de coluna de variável de suporte

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

Controlar o tamanho do Layout

Controlar o tamanho dos elementos de formulário

A especificação de diferentes Layouts para diferentes destinos

Consulte também

Tarefas

Conceitos

Outros recursos

Histórico de alterações

Recursos adicionais