Condividi tramite

Progettare il form elemento di lavoro

  • Articolo

Quando si progetta un form elemento di lavoro, è utile posizionare i campi nel form in modo che supportino i processi di flusso di lavoro e immissione dati che verranno seguiti dai membri del team. Se si aggiungono solo alcuni campi a un form esistente, è necessario stabilire in quale punto del form devono essere aggiunti. Se si aggiungono più campi per supportare una nuova raccolta di dati di cui tenere traccia, è possibile aggiungere una nuova scheda solo per tali campi. Per ridurre al minimo la necessità di scorrere un form, è possibile raggruppare i campi in diverse colonne nella parte superiore del form o in una scheda.

Se si aggiunge un nuovo tipo di elemento di lavoro, è possibile copiare un tipo esistente e modificarlo per visualizzare i campi e il processo di flusso di lavoro che supportano il nuovo tipo.

Quando si progetta il layout, tenere presenti i suggerimenti seguenti per ottimizzare i risultati:

  • Posizionare i campi nella parte superiore del form a cui i membri del team devono fare riferimento o che devono aggiornare di frequente.

  • Posizionare i campi in una scheda a cui solo alcuni membri del team devono fare riferimento o che devono aggiornare raramente. Ad esempio, i controlli che collegano gli elementi di lavoro o allegano file vengono generalmente posizionati in schede separate.

  • Raggruppare i campi in colonne per ottimizzare la visualizzazione dei campi dati. È possibile usare colonne nella parte superiore del form o in una scheda. È anche possibile visualizzare le schede in un formato a più colonne.

  • Per limitare i tipi di collegamenti che possono essere creati tra campi di tipi elemento di lavoro, usare uno o più controlli dei collegamenti in schede separate o nella stessa scheda.

Per informazioni su come esportare, importare e verificare le modifiche ai form elemento di lavoro, vedere Modificare il layout del form elemento di lavoro.

Contenuto dell'argomento

  • Segmentare il form in aree

  • Usare le schede

  • Raggruppare i campi

  • Ridimensionare le colonne

  • Usare una barra di divisione per supportare il ridimensionamento di colonna variabile

  • Controllare le dimensioni del form e degli elementi del form

  • Specificare layout diversi per destinazioni diverse

Segmentare il form in aree

È possibile usare gli elementi di layout per segmentare i form elemento di lavoro in diverse aree, raggruppando i campi correlati e allocando lo spazio nel form in base ai requisiti di immissione dati. Nella tabella seguente sono descritti gli elementi usati per segmentare il form in aree.

Elemento

Descrizione

FORM

Contiene gli elementi Layout che specificano la visualizzazione di campi e controlli per il tipo di elemento di lavoro.

Layout

Contiene tutti gli elementi che specificano la visualizzazione di campi e controlli per una destinazione specifica. È possibile specificare layout diversi per destinazioni diverse, ad esempio Visual Studio o Team Web Access. Gli elementi figlio che è possibile specificare in un elemento Layout includono Control, Group, TabGroup e Splitter.

Group

Raggruppa gli elementi figlio nel form. Un gruppo è separato visivamente mediante un bordo e un'etichetta facoltativa. I gruppi definiti in una posizione adiacente nello stack XML sono divisi verticalmente nel form visualizzato. È possibile specificare l'elemento Column come elemento figlio in un elemento Group.

Column

Mantiene tutti gli elementi figlio in una colonna verticale o divide un form in verticale. Le colonne devono essere visualizzate in un Group. Gli elementi Group negli elementi Column possono essere usati per creare aree annidate. Per impostazione predefinita, le colonne dividono un Group in parti uguali. È possibile specificare un attributo di larghezza percentuale facoltativo per allocare più spazio a una o più colonne.

Gli elementi figlio che è possibile specificare in un elemento Column includono Control, Group, TabGroup e Splitter.

Splitter

Consente agli utenti di ridimensionare la larghezza allocata a due colonne in un form.

Tab

Aggiunge diverse schede a un form per supportare la visualizzazione di campi e controlli aggiuntivi. Gli elementi figlio che è possibile specificare in un elemento Tab includono Control, Group, TabGroup e Splitter.

TabGroup

Contiene un gruppo di elementi TAB. In generale si aggiungono schede a un solo gruppo di schede. È comunque possibile impilare due o più gruppi di schede in verticale in un form.

Nella figura seguente è illustrato un form in cui l'area superiore presenta otto campi disposti approssimativamente in due colonne. La parte inferiore mostra due set di tre schede disposte in un layout a due colonne.

Form personalizzato con tre schede in un layout a due colonne

Form dell'elemento di lavoro personalizzato

Parte superiore del form

Il codice seguente definisce la parte superiore del form. È possibile aggiungere colonne in base alle esigenze. Come mostrato in questo esempio, la prima colonna, con dimensioni pari al 70% della larghezza del form, contiene due gruppi di campi. Il secondo gruppo di campi, che contiene i campi PU (Use Area Path) e Priority, è definito in un layout a due colonne. La seconda colonna si estende per il restante 30% della larghezza del form. Al ridimensionamento del form, le aree allocate alle colonne variano proporzionalmente.

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

Usare le schede

Le schede vengono usate per raggruppare un gruppo di campi o per supportare uno o più controlli speciali, ad esempio i controlli che collegano gli elementi di lavoro, collegano la cronologia degli elementi di lavoro o allegano file. Molte definizioni di tipi di elemento di lavoro per i modelli di processo Microsoft Solutions Framework (MSF) usano molte schede per controllare i tipi di collegamenti che possono essere creati in base al tipo di collegamento. Per altre informazioni, vedere Tipi di elemento di lavoro e flusso di lavoro del modello di processo Agile o Tipi di elemento di lavoro e flusso di lavoro del modello di processo CMMI.

Per altre informazioni sull'uso dei controlli speciali, vedere gli argomenti seguenti:

Gli attributi descritti nella tabella seguente consentono di assegnare un'etichetta alla scheda e di specificare la spaziatura interna e i margini che controllano il numero di pixel all'interno e all'esterno del bordo del controllo scheda.

Attributo

Descrizione

Label

Obbligatorio. Testo che specifica il nome della scheda.

Margin

Facoltativo. Specifica la quantità di spazio attorno alla scheda, espressa in pixel.

Padding

Facoltativo. Specifica la quantità di spazio intorno al bordo esterno e al bordo interno della scheda, espressa in pixel.

Sei schede disposte in un layout affiancato

Form personalizzato con 2 gruppi e 6 schede

Nel codice seguente viene elencata la sintassi usata per creare i layout mostrati nella figura precedente.

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

Raggruppare i campi

L'elemento Group viene usato per raggruppare visivamente gli elementi, analogamente al controllo GroupBox di Windows. Gli attributi descritti nella tabella seguente consentono di assegnare un'etichetta a ogni gruppo e specificare la spaziatura interna e i margini che controllano il numero di pixel all'interno e all'esterno del bordo dell'area del gruppo. L'elemento Group deve sempre essere seguito da un elemento Column, anche se il gruppo contiene una sola colonna.

È consigliabile usare l'elemento Group come contenitore per i campi in una colonna e come contenitore per le colonne in un'area segmentata nel form. È possibile specificare l'elemento Column solo come elemento figlio in un elemento Group.

È possibile controllare la spaziatura e la dimensione del layout complessivo del form specificando gli attributi facoltativi descritti nella tabella seguente.

Attributo

Descrizione

Label

Facoltativo. Testo che specifica il nome del gruppo.

Margin

Facoltativo. Specifica la quantità di spazio intorno al gruppo e tra il controllo e gli elementi adiacenti, espressa in pixel. La quantità di spazio su ciascun lato può essere variata.

Padding

Facoltativo. Specifica la quantità di spazio intorno al bordo esterno del gruppo, espressa in pixel. La quantità di spazio su ciascun lato può essere variata.

Gruppo di campi disposti in una scheda

Gruppo di campi

Nel codice seguente viene elencata la sintassi usata per creare il gruppo di campi mostrato nella figura precedente. Per altre informazioni su come specificare i campi usando l'elemento Control, vedere Controllare la visualizzazione dei campi elemento di lavoro.

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

Ridimensionare le colonne

È possibile progettare un'area in un form contenente due o più colonne. È possibile specificare la larghezza della colonna sia come valore fisso sia come percentuale della larghezza dell'elemento contenitore mediante l'attributo FixedWidth o PercentWidth rispettivamente. Questi due attributi di Column si escludono a vicenda. Per consentire a un utente di ridimensionare la colonna, è possibile specificare un controllo Splitter come descritto in Uso di un controllo Splitter per supportare il ridimensionamento variabile di colonne.

Layout a tre colonne

Visualizzazione su 3 colonne

Il codice seguente ha prodotto il precedente layout di campi disposti su tre colonne. Per organizzare i gruppi di campi in colonne, usare l'elemento Group per contenere ogni colonna di campi. Facoltativamente, è possibile assegnare un'etichetta ai gruppi di campi.

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

Usare una barra di divisione per supportare il ridimensionamento di colonna variabile

L'elemento Splitter viene usato per consentire al visualizzatore del form di ridimensionare le colonne in modo dinamico. Viene visualizzato sotto forma di linea punteggiata sul form, come mostrato nella figura seguente. Non è possibile specificare elementi figlio nell'elemento Splitter.

Layout a 2 colonne con separatore

Layout a 2 colonne con separatore

Un elemento Group che contiene elementi Splitter e Column deve specificare esattamente tre elementi Column nella sequenza seguente:

  1. un elemento Column a sinistra della barra di divisione

  2. un elemento Column che contiene solo l'elemento Splitter

  3. un elemento Column a destra della barra di divisione

Per altre informazioni, vedere l'esempio che segue.

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

Controllare le dimensioni del form e degli elementi del form

È possibile specificare le dimensioni orizzontali e verticali minime di ogni layout del form usando l'attributo MinimumSize per il layout. Il form viene però ridimensionato sulla base delle dimensioni combinate, quando le dimensioni orizzontali e verticali combinate dei controlli dei campi e dei layout definite per ogni form sono maggiori delle dimensioni minime specificate. Inoltre, la dimensione verticale di tutte le schede viene adattata alla dimensione necessaria per ridimensionare la scheda contenente il layout verticale massimo. L'ultimo controllo di campo in ogni scheda può essere ridimensionato ni modo da riempire la dimensione verticale.

Quando il contenitore in cui viene visualizzato il layout del form è più piccolo della dimensione minima orizzontale o verticale del form, vengono visualizzate barre di scorrimento. In questo caso, potrebbe verificarsi il problema del doppio scorrimento. Con il doppio scorrimento, è possibile che gli utenti debbano scorrere sia il form stesso che il controllo del campo per trovare le informazioni desiderate. Per evitare il problema del doppio scorrimento, è possibile posizionare i controlli di campo soggetti a scorrimento, ad esempio i campi HTML e Cronologia, in una scheda separata.

Controllare le dimensioni del layout

È possibile controllare la spaziatura e la dimensione del layout complessivo del form specificando gli attributi facoltativi descritti nella tabella seguente.

Attributo

Descrizione

Esempio di valore modello

MinimumSize

Facoltativo. Stringa del form (Larghezza, Altezza). Questo valore specifica la dimensione minima dello stesso form. Quando le dimensioni del contenitore che visualizza il layout del form sono minori di questa dimensione, vengono visualizzate barre di scorrimento orizzontali e verticali. Quando la dimensione combinata dei controlli di campo sul layout del form è maggiore di quella impostata dall'attributo MinimumSize, l'attributo viene ignorato.

(100,100)

Margin

Facoltativo. Stringa del form (Left, Top, Right, Bottom) che specifica la quantità di spazio intorno al layout, espressa in pixel. La quantità di spazio su ciascun lato può essere variata.

(2,0,2,0)

Padding

Facoltativo. Stringa del form (Left, Top, Right, Bottom) che specifica la quantità di spazio fra il bordo esterno del layout e il bordo interno, espressa in pixel. La quantità di spazio su ciascun lato può essere variata.

(2,0,2,0)

ControlSpacing

Facoltativo. Specifica la spaziatura verticale tra i controlli nel form. Integer.

N/D

Controllare le dimensioni degli elementi del form

L'attributo MinimumSize dell'elemento Control consente di specificare la larghezza e l'altezza minime che ogni elemento del form deve occupare. Se non si dispone di spazio verticale sufficiente, viene visualizzata una barra di scorrimento per mantenere la dimensione minima. Senza questo attributo, i controlli vengono disegnati con le rispettive dimensioni predefinite, a meno che i controlli nelle altre schede non occupino più spazio con un aumento della dimensione della scheda. È possibile usare altri attributi, ad esempio Margin e Padding, per allineare o adattare il controllo e per definire la dimensione del bordo intorno al controllo. Per altre informazioni, vedere i seguenti argomenti:

Specificare layout diversi per destinazioni diverse

È possibile specificare layout diversi per diverse destinazioni mediante l'attributo Target dell'elemento Layout. Per definire come destinazione Visual Studio o Team Explorer Everywhere, specificare WinForms, mentre per definire come destinazione Team Web Access, specificare Web.

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

Vedere anche

Attività

Modificare il layout del form elemento di lavoro