Progettare il layout del form elemento di lavoro
Quando si progetta un form elemento di lavoro, è opportuno posizionare i campi sul form in modo che supportino l'immissione di dati e i processi del flusso di lavoro che verrà seguito dai membri del team.Se si aggiungono solo alcuni campi a un form esistente, è necessario determinare dove si desidera aggiungerli sul form.Se si aggiungono diversi campi per supportare una nuova raccolta di dati di cui tenere traccia, è preferibile aggiungere una nuova scheda solo per tali campi.Per ridurre la necessità di scorrere un form, è possibile raggruppare i campi in diverse colonne nella parte superiore del form oppure in una scheda.
Se si aggiunge un nuovo tipo di elemento di lavoro, è opportuno copiare un tipo esistente e modificarlo per visualizzare i campi e il processo del flusso di lavoro che supportano il nuovo tipo.
Nella progettazione del layout, considerare i suggerimenti riportati di seguito per ottenere i migliori risultati.
Posizionare nella parte superiore del form i campi a cui i membri del team devono fare riferimento o che devono essere aggiornati frequentemente.
Posizionare in una scheda i campi a cui solo alcuni membri del team devono fare riferimento o che devono essere aggiornati raramente.Ad esempio, i controlli che collegano elementi di lavoro o allegano file vengono posizionati in genere su schede separate.
Raggruppare i campi in colonne per massimizzare la visualizzazione dei campi dati.È possibile utilizzare colonne nella parte superiore del form oppure in una scheda.È inoltre possibile visualizzare schede in un formato a più colonne.
Utilizzare uno o più controlli di collegamento in schede separate o nella stessa scheda per limitare i tipi di collegamenti che possono essere creati tra campi dei tipi di elemento di lavoro.
Per informazioni sul modo per esportare, importare e verificare le modifiche al form elemento di lavoro, vedere Modificare il layout del form elemento di lavoro.
In questo argomento
Segmentazione del form in aree
Utilizzo di schede
Raggruppamento di campi
Ridimensionamento di colonne
Utilizzo di un controllo Splitter per supportare il ridimensionamento variabile di colonne
Controllo della dimensione del form e dei rispettivi elementi
Specifica di layout diversi per destinazioni diverse
Segmentazione del form in aree
Gli elementi di layout vengono utilizzati per segmentare il form elemento di lavoro in diverse aree, raggruppare campi correlati e allocare spazio nel form in base ai requisiti di immissione di dati.Nella tabella riportata di seguito vengono descritti gli elementi utilizzati per segmentare il form in aree diverse.
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, quali ad esempio Visual Studio o Team Web Access.Fra gli elementi figlio che possono essere specificati in un elemento Layout sono inclusi gli elementi Control, Group, TabGroupe Splitter. |
Group |
Raggruppa gli elementi figlio nel form.Un gruppo viene separato visivamente da un bordo e da 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 figlio di un elemento Group. |
Column |
Mantiene tutti gli elementi figlio in una colonna verticale oppure suddivide verticalmente un form.Le colonne devono essere visualizzate in un elemento Group.Gli elementi Group contenuti in elementi Column possono essere utilizzati per creare aree annidate.Per impostazione predefinita, le colonne dividono un elemento Group in modo uniforme.È possibile specificare un attributo di larghezza percentuale facoltativo per allocare più spazio a una o più colonne. Fra gli elementi figlio che possono essere specificati in un elemento Column sono inclusi gli elementi Control, Group, TabGroupe Splitter. |
Splitter |
Consente agli utenti di ridimensionare la larghezza allocata per due colonne in un form. |
Tab |
Aggiunge schede diverse a un form per supportare la visualizzazione di campi e controlli aggiuntivi.Fra gli elementi figlio che possono essere specificati in un elemento Tab sono inclusi gli elementi Control, Group, TabGroup e Splitter. |
TabGroup |
Contiene un gruppo di elementi TAB.In generale, si aggiungono schede a un solo gruppo di schede.È tuttavia possibile impilare verticalmente due o più gruppi di schede in un form. |
Nella figura riportata di seguito viene illustrato un form la cui area superiore visualizza otto campi disposti approssimativamente in due colonne.La parte inferiore visualizza due set di tre schede disposti in un layout a due colonne.
Form personalizzato con tre schede in un layout a due colonne
.png "Form dell'elemento di lavoro personalizzato")
Parte superiore del form.
Nel codice riportato di seguito viene definita la parte superiore del form.È possibile aggiungere colonne in base alle necessità.Come illustrato in questo esempio, la prima colonna, con dimensioni pari al 70 percento della larghezza del form, contiene due gruppi di campi.Il secondo gruppo di campi, che contiene i campi PU (Use Area Path) e Priorità, è definito in un layout a due colonne.La seconda colonna si estende per il restante 30 percento 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="&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>
Torna all'inizio
Utilizzo di schede
Si utilizzano schede per raggruppare un gruppo di campi o per supportare uno o più controlli speciali, quali i controlli che connettono elementi di lavoro, connettono la cronologia di elementi di lavoro o allegano file.Diverse definizioni di tipi di elemento di lavoro per i modelli di processo di Microsoft Solutions Framework (MSF) utilizzano diverse schede per controllare i tipi di collegamenti che possono essere creati, sulla base del tipo di collegamento.Per ulteriori informazioni, vedere Elementi di lavoro e flusso di lavoro (Agile) o Elementi di lavoro e flusso di lavoro (CMMI).
Per ulteriori informazioni sull'utilizzo di controlli speciali, vedere gli argomenti riportati di seguito.
Utilizzando gli attributi descritti nella tabella riportata di seguito, è possibile assegnare un'etichetta alla scheda e specificare spaziatura interna e margini che determinano il numero di pixel all'interno e all'esterno del bordo del controllo Struttura a schede.
Attributo |
Descrizione |
|---|---|
Label |
Necessario.Testo che specifica il nome della scheda. |
Margin |
Opzionale.Specifica la quantità di spazio attorno alla scheda, espressa in pixel. |
Padding |
Opzionale.Specifica la quantità di spazio in pixel intorno al bordo esterno e al bordo interno della scheda. |
Sei schede disposte in un layout affiancato
.png "Form personalizzato con 2 gruppi e 6 schede")
Nel codice riportato di seguito viene elencata la sintassi utilizzata per creare il layout illustrato 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" 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>
Torna all'inizio
Raggruppamento di campi
Si utilizza l'elemento Group per raggruppare visivamente gli elementi, analogamente a Windows GroupBox.Utilizzando gli attributi descritti nella tabella riportata di seguito, è possibile assegnare un'etichetta a ciascun gruppo e specificare spaziatura interna e margini che determinano il numero di pixel all'interno e all'esterno del bordo dell'area di raggruppamento.L'elemento Group deve essere seguito sempre da un elemento Column, anche se il gruppo dispone di una sola colonna.
È necessario utilizzare 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 generale del form specificando gli attributi descritti nella tabella riportata di seguito.
Attributo |
Descrizione |
|---|---|
Label |
Opzionale.Testo che specifica il nome del gruppo. |
Margin |
Opzionale.Specifica la quantità di spazio in pixel intorno al gruppo e tra il controllo e gli elementi adiacenti.La quantità di spazio su ciascun lato può essere variata. |
Padding |
Opzionale.Specifica la quantità di spazio in pixel intorno al bordo esterno del gruppo.La quantità di spazio su ciascun lato può essere variata. |
Gruppo di campi disposto su una scheda
.png "Gruppo di campi")
Nel codice riportato di seguito viene elencata la sintassi utilizzata per creare gruppo di campi illustrato nella figura precedente.Per ulteriori informazioni sul modo per specificare i campi utilizzando 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>
Torna all'inizio
Operazioni con le colonne
È possibile progettare un'area in un form che dispone di due o più colonne.È possibile specificare la larghezza della colonna sia come valore fisso sia come percentuale della larghezza dell'elemento contenitore utilizzando gli attributi FixedWidth o PercentWidth, rispettivamente.Questi due attributi Column si escludono reciprocamente.Per consentire a un utente di ridimensionare la colonna, è possibile specificare un controllo Splitter, come viene descritto in Utilizzo di un controllo Splitter per supportare il ridimensionamento variabile di colonne.
Layout a tre colonne
.png "Visualizzazione su 3 colonne")
Nel codice seguente viene generato il precedente layout di campi disposti su tre colonne.Per organizzare i gruppi di campi in colonne, utilizzare 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>
Utilizzo di un controllo Splitter per supportare il ridimensionamento variabile di colonne
Si utilizza l'elemento Splitter quando si desidera consentire al visualizzatore del form di ridimensionare dinamicamente le varie colonne.L'elemento splitter viene visualizzato come una linea punteggiata sul form, come illustrato nella figura seguente.Non è possibile specificare alcun elemento figlio nell'elemento Splitter.
Layout a 2 colonne con elemento Splitter (separatore)
.png "Layout a 2 colonne con separatore")
Un elemento Group che contiene elementi Splitter e Column deve specificare esattamente tre elementi Column nella sequenza riportata di seguito:
un elemento Column a sinistra dell'elemento Splitter (separatore);
un elemento Column che contiene solo l'elemento Splitter;
un elemento Column a destra dell'elemento Splitter (separatore);
Per ulteriori informazioni, vedere l'esempio riportato di seguito.
<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>
Torna all'inizio
Controllo della dimensione del form e dei rispettivi elementi
È possibile specificare la dimensione minima orizzontale e verticale di ogni layout del form utilizzando l'attributo MinimumSize per il layout.Il form tuttavia viene 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.La dimensione verticale di tutte le schede inoltre 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 in modo riempire la dimensione verticale.
Quando il contenitore in cui viene visualizzato il layout di form è più piccolo della minima dimensione orizzontale o verticale del form, vengono visualizzate barre di scorrimento.In questo caso potrebbe verificarsi un problema di doppio scorrimento.In caso di doppio scorrimento, gli utenti potrebbero dover scorrere sia il form stesso sia il controllo del campo per trovare le informazioni che desiderano.Per evitare il problema del doppio scorrimento, è necessario posizionare i controlli di campo soggetti a scorrimento, ad esempio campi HTML e Cronologia, in schede separate.
Torna all'inizio
.gif "ms194952.collapse_all(it-it,VS.110).gif")
Controllo della dimensione del layout
È possibile controllare la spaziatura e la dimensione del layout generale del form specificando gli attributi descritti nella tabella riportata di seguito.
Attributo |
Descrizione |
Esempio di valore modello |
|---|---|---|
MinimumSize |
Opzionale.Stringa del form (larghezza, altezza).Questo valore specifica la dimensione minima dello stesso form.Quando la dimensione del contenitore in cui viene visualizzato il layout del form è minore di questa dimensione, vengono visualizzate barre di scorrimento orizzontali e verticali.Quando la dimensione combinata dei controlli di campo sul layout del form sono maggiori del valore impostato dall'attributo MinimumSize, tale attributo viene ignorato. |
(100,100) |
Margin |
Opzionale.Stringa del form (a sinistra, in alto, a destra, in basso) che specifica, in pixel, la quantità di spazio intorno al layout.La quantità di spazio su ciascun lato può essere variata. |
(2,0,2,0) |
Padding |
Opzionale.Stringa del form (a sinistra, in alto, a destra, in basso) che specifica, in pixel, la quantità di spazio fra il bordo esterno del layout e il bordo interno.La quantità di spazio su ciascun lato può essere variata. |
(2,0,2,0) |
ControlSpacing |
Opzionale.Specifica la spaziatura verticale tra i controlli nel form.Integer. |
N/D |
Torna all'inizio
Controllo della dimensione del form e dei rispettivi elementi
Si utilizza l'attributo MinimumSize dell'elemento Control per 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 occupino più spazio con un aumento della dimensione della scheda.È possibile utilizzare altri attributi, ad esempio Dock, Margine Padding, per allineare o adattare il controllo e per definire la dimensione del bordo intorno al controllo.Per ulteriori informazioni, vedere i seguenti argomenti:
Torna all'inizio
Specifica di layout diversi per destinazioni diverse
È possibile specificare layout diversi per diverse destinazioni utilizzando 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>
Torna all'inizio
Vedere anche
Attività
Modificare il layout del form elemento di lavoro
Concetti
Progettare e personalizzare un form elemento di lavoro
Controllare la visualizzazione dei campi elemento di lavoro
Aggiungere il controllo allegati
Definire i controlli dei collegamenti per limitare le relazioni di collegamento