Diseñar el formulario de elemento de trabajo

Artículo
06/10/2015

Al diseñar un formulario de elemento de trabajo, desea colocar los campos en el formulario de manera que admitan los procesos de flujo de trabajo y entrada de datos que realizarán los miembros del equipo. Si está agregando solo unos cuantos campos a un formulario existente, debe determinar en qué parte del formulario desea agregarlos. Si agrega varios campos para admitir una nueva colección de datos de los realizar un seguimiento, puede que desee agregar una nueva pestaña solo para estos campos. Para minimizar la necesidad de desplazarse por un formulario, puede agrupar campos en varias columnas en la parte superior del formulario o en una pestaña.

Si va a agregar un nuevo tipo de elemento de trabajo, puede que desee copiar un tipo existente y modificarlo para que muestre los campos y el proceso de flujo de trabajo que admite el tipo nuevo.

Al planear el diseño, tenga en cuenta las siguientes sugerencias para obtener los mejores resultados:

Coloque en la parte superior del formulario los campos a los que deben hacer referencia los miembros del equipo o que deben actualizar con frecuencia.
Coloque en una pestaña los campos a los que solo unos pocos miembros del equipo deben hacer referencia o que deben actualizar con poca frecuencia. Por ejemplo, los controles que vinculan elementos de trabajo o que adjuntan archivos normalmente se colocan en pestañas separadas.
Agrupe los campos en columnas para maximizar la presentación de los campos de datos. Puede usar las columnas de la parte superior del formulario o en una pestaña. También puede mostrar las pestañas con un formato de varias columnas.
Use uno o más controles de vínculo en pestañas independientes o en la misma pestaña para restringir los tipos de vínculos que se pueden crear entre los campos de tipos de elemento de trabajo.

Para información sobre cómo exportar, importar y comprobar los cambios del formulario de elemento de trabajo, vea Cambiar el diseño del formulario del elemento de trabajo.

En este tema

Segmentar el formulario en áreas
Trabajar con pestañas
Agrupar campos
Cambiar el tamaño de las columnas
Usar un divisor para admitir el tamaño de columna variable
Controlar el tamaño del formulario y de los elementos de formulario
Especificar diseños diferentes para los distintos destinos

Segmentar el formulario en áreas

Use elementos de diseño para segmentar el formulario de elemento de trabajo en distintas áreas, agrupando los campos relacionados y asignando el espacio en el formulario según los requisitos de entrada de datos. La tabla siguiente describe los elementos que se usan para segmentar el formulario en diferentes áreas.

Elemento	Descripción
FORM	Contiene los elementos Layout que especifican la visualización de campos y controles para el tipo de elemento de trabajo.
Layout	Contiene todos los elementos que especifican la visualización de campos y controles para un destino concreto. Puede especificar diseños diferentes para los distintos destinos, como Visual Studio o Team Web Access. Entre los elementos secundarios que puede especificar en un elemento Layout se incluyen los elementos Control, Group, TabGroup y Splitter.
Group	Agrupa los elementos secundarios en el formulario. Un borde y una etiqueta opcional sirven para separar visualmente a los grupos. Los grupos que se definen en una posición adyacente en la pila XML se dividen verticalmente en el formulario mostrado. Puede especificar el elemento Column como elemento secundario de un elemento Group.
Column	Mantiene todos los elementos secundarios en una columna vertical o divide un formulario verticalmente. Las columnas deben aparecer en un elemento Group. Los elementos Group de elementos Column se pueden usar para crear áreas anidadas. De forma predeterminada, las columnas dividen un elemento Group de manera uniforme. Puede especificar un atributo de ancho de porcentaje opcional para asignar más espacio a una o más columnas. Entre los elementos secundarios que puede especificar en un elemento Column se incluyen los elementos Control, Group, TabGroup y Splitter.
Splitter	Permite a los usuarios cambiar el ancho que se asigna a dos columnas en un formulario.
Tab	Agrega diferentes pestañas a un formulario para admitir la presentación de controles y campos adicionales. Entre los elementos secundarios que puede especificar en un elemento Tab se incluyen los elementos Control, Group, TabGroup y Splitter.
TabGroup	Contiene un grupo de elementos TAB. En general, las pestañas se agregan a un grupo de pestañas único. Sin embargo, se podrían apilar dos o más grupos de pestañas en sentido vertical en un formulario.

La ilustración siguiente muestra un formulario cuya área superior muestra ocho campos que están organizados aproximadamente en dos columnas. La parte inferior muestra dos conjuntos de tres pestañas que se organizan en un diseño de dos columnas.

Formulario personalizado con tres pestañas en un diseño de dos columnas

Formulario de elemento de trabajo personalizado

Parte superior del formulario

El código siguiente define la parte superior del formulario. Puede introducir las columnas según sea necesario. Como se muestra en este ejemplo, la primera columna, que tiene un tamaño del 70 por ciento del ancho del formulario, contiene dos grupos de campos. El segundo grupo de campos, que contiene los campos PU (Usar ruta de acceso de área) y Prioridad, se define en un diseño de dos columnas. La segunda columna abarca el ancho restante del formulario, el 30 por ciento. Como el tamaño del formulario cambió, la áreas que se asignan a las columnas varían 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>

Trabajar con pestañas

Use las pestañas para agrupar un conjunto de campos o para admitir uno o más controles especiales, como los controles que vinculan elementos de trabajo, vinculan al historial de elementos de trabajo o adjuntan archivos. Varias definiciones de tipos de elemento de trabajo para las plantillas de proceso de Microsoft Solutions Framework (MSF) usan varias pestañas para controlar los tipos de vínculos que se pueden crear, según el tipo de vínculo. Para obtener más información, vea Tipos y flujo de trabajo de elementos de trabajo de la plantilla de proceso para Agile o Tipos y flujo de trabajo de elementos de trabajo de la plantilla de proceso para CMMI.

Para más información sobre cómo usar controles especiales, vea los temas siguientes:

Mediante el uso de los atributos que se describen en la tabla siguiente, puede etiquetar la pestaña y especificar el relleno y los márgenes que controlan el número de píxeles dentro y fuera del borde del control de pestaña.

Atributo	Descripción
Label	Requerido. Texto que especifica el nombre de la ficha.
Margin	Opcional. Especifica, en píxeles, la cantidad de espacio alrededor de la pestaña.
Padding	Opcional. Especifica, en píxeles, la cantidad de espacio alrededor del borde exterior e interior de la pestaña.

Seis pestañas organizadas en un diseño en paralelo

Formulario personalizado que muestra dos grupos de seis pestañas

En el código siguiente se muestra la sintaxis que se usa para crear el diseño que se muestra en la ilustración 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>

Agrupar campos

Use el elemento Group para agrupar visualmente los elementos, de forma similar a Windows GroupBox. Mediante el uso de los atributos que se describen en la tabla siguiente, puede etiquetar cada grupo y especificar el relleno y los márgenes que controlan el número de píxeles dentro y fuera del borde del área de grupo. El elemento Group siempre debe ir seguido de un elemento Column, incluso aunque el grupo solo tenga una columna.

Debe usar el elemento Group como contenedor para los campos de una columna y como contenedor para las columnas de un área segmentada en el formulario. Puede especificar el elemento Column únicamente como elemento secundario de un elemento Group.

Puede controlar el espaciado y el tamaño del diseño general del formulario mediante la especificación de los atributos que se describen en la tabla siguiente.

Atributo	Descripción
Label	Opcional. Texto que especifica el nombre del grupo.
Margin	Opcional. Especifica, en píxeles, la cantidad de espacio alrededor del grupo y entre el control y sus vecinos. Se puede variar la cantidad de espacio en cada lado.
Padding	Opcional. Especifica, en píxeles, la cantidad de espacio alrededor del borde exterior del grupo. Se puede variar la cantidad de espacio en cada lado.

Grupo de campos organizados en una pestaña

Grupo de varios campos

En el código siguiente se muestra la sintaxis que se usa para crear el grupo de campos que se muestra en la ilustración anterior. Para más información sobre cómo especificar los campos mediante el elemento Control, vea Controlar cómo se muestran los campos de elementos de trabajo.

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

Cambiar el tamaño de las columnas

Puede diseñar un área de un formulario que tenga dos o más columnas. Puede especificar el ancho de columna como fijo o como un porcentaje del ancho del elemento contenedor mediante los atributos FixedWidth o PercentWidth, respectivamente. Estos dos atributos Column son mutuamente excluyentes. Para permitir que un usuario cambie el tamaño de la columna, puede especificar un control Splitter, como se describe en Usar un divisor para admitir el tamaño de columna variable.

Diseño de tres columnas

Presentación en tres columnas

El código siguiente generó el diseño de tres columnas de campos anterior. Al organizar los grupos de campos en columnas, use el elemento Group para que contenga cada columna de campos. Opcionalmente, puede etiquetar los 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>

Usar un divisor para admitir el tamaño de columna variable

Use el elemento Splitter cuando desee permitir que el visor del formulario cambie dinámicamente el tamaño de las columnas. El divisor aparece como una línea de puntos en el formulario, como se muestra en la siguiente ilustración. No se puede especificar ningún elemento secundario en el elemento Splitter.

Diseño en dos columnas con Splitter

Presentación en dos columnas con Splitter

Un elemento Group que contiene los elementos Splitter y Column debe especificar exactamente tres elementos Column en la secuencia siguiente:

un elemento Column a la izquierda del separador
un elemento Column que contenga solo el elemento Splitter
un elemento Column a la derecha del separador

Para más información, vea el ejemplo siguiente.

<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 el tamaño del formulario y de los elementos de formulario

Puede especificar el tamaño mínimo horizontal y vertical de cada diseño de formulario mediante el atributo MinimumSize del diseño. Sin embargo, el formulario cambia de tamaño según las dimensiones combinadas cuando los tamaños combinados horizontal y vertical de los controles de campo y los diseños que se definen para cada formulario son más grandes que las dimensiones mínimas especificadas. Además, el tamaño vertical de todas las pestañas se ajusta a la dimensión necesaria para cambiar el tamaño de la pestaña con el diseño vertical máximo. El último control de campo de cada pestaña puede cambiar de tamaño según corresponda para rellenar la dimensión vertical.

Cuando el contenedor que muestra el diseño del formulario sea menor que el tamaño mínimo horizontal o vertical del formulario, aparecen barras de desplazamiento. Si esto ocurre, podría producirse el problema del desplazamiento doble. Con el desplazamiento doble, los usuarios puede que tengan que desplazar tanto el propio formulario y como el control de campo para encontrar la información que desean. Para evitar el problema del desplazamiento doble, puede que desee colocar los controles de campo que se ven afectados por el desplazamiento, como los campos HTML e Historial, en su propia pestaña.

Controlar el tamaño del diseño

Puede controlar el espaciado y el tamaño del diseño general del formulario mediante la especificación de los atributos que se describen en la tabla siguiente.

Atributo	Descripción	Ejemplo de un valor de modelo
MinimumSize	Opcional. Cadena con el formato (Ancho, Alto). Este valor especifica el tamaño mínimo para el propio formulario. Cuando el tamaño del contenedor que muestra el diseño del formulario sea menor que este tamaño, aparecen barras de desplazamiento horizontales y verticales. Cuando el tamaño combinado de los controles de campo del formulario de diseño sea mayor que el establecido por el atributo MinimumSize, se omite el atributo.	(100,100)
Margin	Opcional. Cadena con el formato (Izquierda, Superior, Derecha, Inferior) que especifica, en píxeles, la cantidad de espacio alrededor del diseño. Se puede variar la cantidad de espacio en cada lado.	(2,0,2,0)
Padding	Opcional. Cadena con el formato (Izquierda, Superior, Derecha, Inferior) que especifica, en píxeles, la cantidad de espacio entre el borde exterior del diseño y el borde interior. Se puede variar la cantidad de espacio en cada lado.	(2,0,2,0)
ControlSpacing	Opcional. Especifica el espaciado vertical entre los controles del formulario. Integer.	N/D

Controlar el tamaño de los elementos de formulario

Use el atributo MinimumSize del elemento Control para especificar el ancho y alto mínimos que debe ocupar cada elemento de formulario. Si no tiene espacio vertical suficiente, aparecerá una barra de desplazamiento para mantener el tamaño mínimo. Sin este atributo, los controles se dibujan usando sus tamaños predeterminados, a menos que los controles de otras pestañas ocupen más espacio que aumente el tamaño de la pestaña. Puede usar otros atributos, como Margin y Padding, para alinear o ajustar el control y definir el tamaño del borde alrededor del control. Para obtener más información, vea los temas siguientes:

Especificar diseños diferentes para los distintos destinos

Puede especificar diseños diferentes para los distintos destinos mediante el atributo Target del elemento Layout. Para tener como destino Visual Studio o Team Explorer Everywhere, especifique WinForms y, para tener como destino Team Web Access, especifique Web.

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

Vea también

Tareas

Cambiar el diseño del formulario del elemento de trabajo