Définir la disposition du formulaire d'élément de travail

Lorsque vous concevez un formulaire d'élément de travail, vous pouvez positionner les champs sur le formulaire afin qu'ils prennent en charge les processus de flux de travail et d'entrée de données qui seront suivis par les membres de l'équipe.Si vous ajoutez simplement quelques champs à un formulaire existant, vous devez déterminer où vous souhaitez les ajouter sur le formulaire.Si vous ajoutez plusieurs champs pour prendre en charge une nouvelle collection de données à suivre, vous pouvez ajouter un nouvel onglet simplement pour ces champs.Afin d'éviter d'avoir à faire défiler un formulaire, vous pouvez regrouper des champs dans plusieurs colonnes en haut du formulaire ou dans un onglet.

Si vous ajoutez un nouveau type d'élément de travail, vous pouvez copier un type existant et le modifier pour afficher les champs et processus de flux de travail qui prennent en charge le nouveau type.

Lorsque vous concevez la disposition, prenez en compte les conseils suivants afin d'obtenir les meilleurs résultats :

• Placez en haut du formulaire les champs que les membres de l'équipe doivent référencer ou mettre à jour fréquemment.

• Placez sous un onglet les champs que quelques membres de l'équipe seulement doivent référencer ou mettre à jour de temps en temps.Par exemple, les contrôles qui permettent de lier des éléments de travail ou de joindre des fichiers sont généralement placés sous des onglets séparés.

• Regroupez les champs dans des colonnes pour maximiser l'affichage des champs de données.Vous pouvez utiliser les colonnes situées en haut du formulaire ou sous un onglet.Vous pouvez également afficher des onglets dans un format multicolonne.

• Utilisez un ou plusieurs contrôles de liens sous des onglets séparés ou sous le même onglet pour restreindre les types de liens qui peuvent être créés entre des champs de types d'éléments de travail.

Pour plus d'informations sur l'exportation, l'importation et la vérification de modifications apportées à un formulaire d'élément de travail, consultez Modifier la disposition du formulaire d'élément de travail.

Dans cette rubrique

• Segmentation du formulaire en zones

• Utilisation des onglets

• Regroupement de champs

• Dimensionnement de colonnes

• Utilisation d'un séparateur pour prendre en charge le dimensionnement variable des colonnes

• Contrôle de la taille du formulaire et de ses éléments

• Spécification de différentes dispositions pour différentes cibles

Segmentation du formulaire en zones

Vous utilisez des éléments de disposition pour segmenter votre formulaire d'élément de travail en différentes zones, en regroupant les champs connexes et en allouant de l'espace sur le formulaire en fonction des conditions d'entrée des données.Le tableau suivant décrit les éléments utilisés pour segmenter le formulaire en différentes zones.

L'illustration suivante présente un formulaire dont la zone supérieure affiche huit champs répartis en deux colonnes.La partie inférieure affiche deux ensembles de trois onglets dont la disposition forme deux colonnes.

Personnaliser un formulaire avec trois onglets en une disposition à deux colonnes

Haut du formulaire

Le code suivant définit le haut du formulaire.Vous pouvez ajouter autant de colonnes que nécessaire.Comme illustré dans cet exemple, la première colonne, dimensionnée à 70 % de la largeur du formulaire, contient deux groupes de champs.Le second groupe de champs, qui contient les champs PU (Use Area Path) et Priority, présente une disposition à deux colonnes.La seconde colonne occupe les 30 % restants de la largeur du formulaire.Lorsque le formulaire est redimensionné, les zones allouées aux colonnes varient proportionnellement.

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

Retour au début

Utilisation des onglets

Vous utilisez les onglets pour regrouper un groupe de champs ou prendre en charge un ou plusieurs contrôles spéciaux, tels que les contrôles qui permettent de lier des éléments de travail, de lier l'historique des éléments de travail ou de joindre des fichiers.Plusieurs définitions de types d'éléments de travail pour les modèles de processus Microsoft Solutions Framework (MSF) utilisent plusieurs onglets pour contrôler les types de liens qui peuvent être créés, selon le type de lien.Pour plus d'informations, consultez Éléments de travail et workflow (Agile) ou Éléments de travail et flux de travail (CMMI).

Pour plus d'informations sur l'utilisation de contrôles spéciaux, consultez les rubriques suivantes :

• Fournir un texte d'aide, un guide de processus, un contenu Web et des liens vers les pages Web sur un formulaire d'élément de travail

• Ajouter le contrôle Pièces jointes

• Définir des contrôles de liens pour restreindre les relations de liens

En utilisant les attributs décrits dans le tableau suivant, vous pouvez ajouter une étiquette à l'onglet et spécifier la marge intérieure et les marges qui contrôlent le nombre de pixels à l'intérieur et à l'extérieur de la bordure du contrôle onglet.

Six onglets disposés côte à côte

Le code suivant répertorie la syntaxe utilisée pour créer la disposition illustrée précédemment.

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

Retour au début

Regroupement de champs

Vous utilisez l'élément Group pour fournir un regroupement visuel des éléments, semblable à Windows GroupBox.En utilisant les attributs décrits dans le tableau suivant, vous pouvez ajouter une étiquette à chaque groupe et spécifier la marge intérieure et les marges qui contrôlent le nombre de pixels à l'intérieur et à l'extérieur de la bordure de la zone de groupe.L'élément Group doit toujours être suivi par un élément Column, même si le groupe n'a qu'une seule colonne.

Vous devez utiliser l'élément Group comme conteneur pour les champs d'une colonne et comme conteneur pour les colonnes d'une zone segmentée sur le formulaire.Vous ne pouvez spécifier l'élément Column qu'en tant qu'élément enfant d'un élément Group.

Vous pouvez contrôler l'espacement et la taille de la disposition de formulaire globale en spécifiant les attributs décrits dans le tableau suivant.

Groupe de champs organisés sous un onglet

Le code suivant répertorie la syntaxe utilisée pour créer le groupe de champs illustré précédemment.Pour plus d'informations sur la spécification des champs à l'aide de l'élément Control, consultez Contrôler l'affichage des champs d'éléments de travail.

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

Retour au début

Utilisation des colonnes

Vous pouvez concevoir une zone dans un formulaire qui a deux colonnes ou plus.Vous pouvez spécifier la largeur de colonne comme étant fixe ou comme un pourcentage de la largeur de l'élément conteneur, à l'aide des attributs FixedWidth ou PercentWidth, respectivement.Ces deux attributs Column s'excluent mutuellement.Pour permettre à un utilisateur de redimensionner la colonne, vous pouvez spécifier un contrôle Splitter, comme le décrit la section Utilisation d'un séparateur pour prendre en charge le dimensionnement variable des colonnes.

Disposition à trois colonnes

Le code suivant a permis de créer la disposition à trois colonnes précédente des champs.Lorsque vous organisez des groupes de champs en colonnes, utilisez l'élément Group pour contenir chaque colonne de champs.Éventuellement, vous pouvez ajouter une étiquette aux groupes de champs.

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

Utilisation d'un séparateur pour prendre en charge le dimensionnement variable des colonnes

Vous utilisez l'élément Splitter lorsque vous souhaitez permettre à celui ou celle qui verra le formulaire de redimensionner les colonnes dynamiquement.Le séparateur s'affiche sous forme de trait en pointillé sur le formulaire, comme dans l'illustration suivante.Vous ne pouvez pas spécifier d'élément enfant dans l'élément Splitter.

Disposition à 2 colonnes avec séparateur

Un élément Group qui contient les éléments Splitter et Column doit spécifier exactement trois éléments Column dans la séquence suivante :

1. un élément Column à gauche du séparateur

2. un élément Column qui contient uniquement l'élément Splitter

3. un élément Column à droite du séparateur

Pour plus d'informations, consultez l'exemple suivant.

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

Retour au début

Contrôle de la taille du formulaire et de ses éléments

Vous pouvez spécifier la taille minimale horizontale et verticale de chaque disposition de formulaire à l'aide de l'attribut MinimumSize pour la disposition.Toutefois, le formulaire est redimensionné d'après les dimensions combinées lorsque les tailles horizontales et verticales combinées des contrôles de champs et les dispositions définies pour chaque formulaire sont supérieures aux dimensions minimales spécifiées.De plus, la taille verticale de tous les onglets est conforme à la dimension requise pour dimensionner l'onglet avec la disposition verticale maximale.Le dernier contrôle de champ sous chaque onglet peut être redimensionné en conséquence pour remplir la dimension verticale.

Des barres de défilement s'affichent lorsque le conteneur qui affiche la disposition de formulaire est plus petit que la taille horizontale ou verticale minimale du formulaire.Si le cas se présente, un problème de double défilement peut survenir.Le double défilement signifie que les utilisateurs devront peut-être faire défiler à la fois le formulaire lui-même et le contrôle de champ pour trouver les informations qu'ils cherchent.Pour éviter ce problème de double défilement, vous pouvez placer les contrôles de champs soumis au défilement, tel que les champs HTML et Historique, sous leur propre onglet.

Retour au début

Contrôle de la taille de la disposition

Vous pouvez contrôler l'espacement et la taille de la disposition de formulaire globale en spécifiant les attributs décrits dans le tableau suivant.

Retour au début

Contrôle de la taille des éléments du formulaire

Vous utilisez l'attribut MinimumSize de l'élément Control pour spécifier la largeur et la hauteur minimales que chaque élément de formulaire doit occuper.Si vous n'avez pas un espace vertical suffisant, une barre de défilement s'affiche pour conserver sa taille minimale.Sans cet attribut, les contrôles sont dessinés avec leur taille par défaut, à moins que des contrôles d'autres onglets n'occupent un espace plus important qui augmente la taille de l'onglet.Vous pouvez utiliser d'autres attributs, tels que Dock, Margin et Padding, pour aligner ou étirer le contrôle et définir la taille de la bordure autour du contrôle.Pour plus d'informations, consultez les rubriques suivantes :

• Contrôler l'affichage des champs d'éléments de travail

• Fournir un texte d'aide, un guide de processus, un contenu Web et des liens vers les pages Web sur un formulaire d'élément de travail

• Ajouter le contrôle Pièces jointes

• Définir des contrôles de liens pour restreindre les relations de liens

Retour au début

Spécification de différentes dispositions pour différentes cibles

Vous pouvez spécifier des dispositions différentes pour des cibles différentes en utilisant l'attribut Target de l'élément Layout.Pour cibler Visual Studio ou Team Explorer Everywhere, vous spécifiez WinForms, et pour cibler Team Web Access, vous spécifiez Web.

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

Retour au début

Voir aussi

Tâches

Modifier la disposition du formulaire d'élément de travail

Concepts

Concevoir et personnaliser un formulaire d'élément de travail

Contrôler l'affichage des champs d'éléments de travail

Ajouter le contrôle Pièces jointes

Définir des contrôles de liens pour restreindre les relations de liens

Autres ressources

Fournir un texte d'aide, un guide de processus, un contenu Web et des liens vers les pages Web sur un formulaire d'élément de travail