Partilhar via

Criar o layout do formulário de item de trabalho

  • Artigo

Quando você cria um itemde trabalhoformulário, 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áriode 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 acompanhar, você poderá adicionar uma nova guia apenas para esses campos.Para minimizar a necessidade de rolar um formulário, pode-se campos de grupo 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 de fluxo de trabalho processo que suportam 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 , o que devem fazer referência a membros da equipe ou atualização com freqüência.

  • 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 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, importare verifique se as alterações deformulário de itemde trabalho, consulte Alterar o layout do formulário de item de trabalho.

Neste tópico

  • Segmentando o formulário em áreas

  • 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

  • Especificando diferentes Layouts para diferentes destinos

Segmentando o formulário em áreas

Você pode usar elementos de layout para segmentar o seu itemde trabalhoformulário 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 determinado destino.Você pode especificar diferentes layouts para diferentes destinos, como Visual Studio ou Team Web Access.Elementos filho que podem ser especificados 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ótulode opcional.Grupos definidos em uma posição adjacente na pilha de XML são divididos verticalmente no formulárioexibido.Você pode especificar o Column como um filho do elemento 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 em Column elementos podem ser usados para criar aninhados áreas.Por padrão, as colunas dividir uma Group uniformemente.Você pode especificar uma largura de porcentagem opcional atributo alocar mais espaço para uma ou mais colunas.

Elementos filho que podem ser especificados em um Column elemento incluir Control, Group, TabGroup, e Splitter elementos.

Splitter

Permite que os usuários para 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 podem ser especificados 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 uma única guia de grupo.No entanto, você pode empilhar dois ou mais grupos de guias verticalmente em um formulário.

A ilustração a seguir mostra um formulário cujo superior área exibe oito campos que são organizados aproximadamente em duas colunas.A parte inferior exibe dois conjuntos de três guias que 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 é 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, é 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>

De volta 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, de itemde trabalho do linkhistóricoou anexar arquivos. Várias definições de tipos de item de trabalho para os modelos de processo de Microsoft Solutions Framework 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 e fluxo de trabalho de trabalho (ágeis) ou Itens e fluxo de trabalho de trabalho (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 rótulo na 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

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

Formulário personalizado mostrando dois grupos de seis guias

O código a seguir lista a sintaxe que é usado 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>
</FORM>

De volta ao topo

Campos de agrupamento

Você pode usar o Group elemento para visualmente grupo elementos, semelhantes à caixa de grupo do Windows.Usando os atributos que são descritos na tabela a seguir, você pode rótulo cada grupo e especificar o preenchimento e margens que controlam o número de pixels dentro e fora da borda daárea 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 campos em uma coluna e como um contêiner 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 é usado para criar o grupo de campos que é 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>

De volta ao topo

Trabalhando com colunas

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 contido 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 usando um divisor de dimensionamento de coluna variável suporte descreve.

Layout de três colunas

Exibição da coluna 3

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 cada coluna de campos.Opcionalmente, você pode rótulo 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 as 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 na Splitter elemento.

Layout de 2 colunas com divisor

Layout de duas colunas com divisor

A Group o elemento que contém Splitter e Column elementos devem especificar exatamente três Column elementos na seguinte sequência:

  1. um Column à esquerda do separador

  2. um Column que contém somente 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>

De volta 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 é redimensionada 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 formulário propriamente dito 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 que estão sujeitos a rolagem, como HTML e o histórico de campos, na sua própria guia.

De volta ao topo

ms194952.collapse_all(pt-br,VS.110).gifControlar 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.Seqüência de caracteres do formulário (largura, altura).Esse valor Especifica o tamanho mínimo para o formulário em si.Quando o contêiner que exibe o layout do formulário for menor que esse tamanho, aparecem as barras de rolagem horizontais e verticais.Quando o tamanho combinado dos controles de campo do layout de formulário for maior que o definido pelo MinimumSize atributo, o atributo é ignorado.

(100,100)

Margin

Opcional.Seqüência de caracteres do formulário(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.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

De volta ao topo

ms194952.collapse_all(pt-br,VS.110).gifControlar 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 é exibida 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 obtenham 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 ao redor do controle.Para obter mais informações, consulte os seguintes tópicos:

De volta ao topo

Especificando diferentes Layouts para diferentes destinos

Você pode especificar diferentes layouts para diferentes destinos usando o Layout elemento Target atributo. To destino Visual Studio or Team Explorer Everywhere, you specify WinForms, and to destino Team Web Access, you specify Web.

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

De volta ao topo

Consulte também

Tarefas

Alterar o layout do formulário de item de trabalho

Conceitos

Criar e personalizar um formulário de item de trabalho

Controlar a exibição dos campos de item de trabalho

Adicionar o controle de anexos

Definir controles de link para restringir as relações de link

Outros recursos

Fornecer texto da Ajuda, diretrizes de processo, conteúdo da Web e links para páginas da Web em um formulário de item de trabalho