Entwerfen des Layouts des Arbeitsaufgabenformulars
Positionieren Sie beim Entwerfen eines Arbeitsaufgabenformulars die Felder so auf dem Formular, dass die von den Teammitgliedern befolgten Dateneingabe- und Workflowprozesse unterstützt werden. Wenn Sie nur einem vorhandenen Formular einige Felder hinzufügen möchten, müssen Sie bestimmen, wo diese hinzugefügt werden sollen. Wenn Sie mehrere Felder hinzufügen, um eine neue Auflistung nachzuverfolgender Daten zu unterstützen, sollten Sie nur für diese Felder eine neue Registerkarte hinzufügen. Um möglichst wenige Bildläufe in einem Formular durchführen zu müssen, können Sie Felder oben im Formular in mehrere Spalten oder in einer Registerkarte gruppieren.
Wenn Sie einen neuen Arbeitsaufgabentyp hinzufügen, können Sie einen vorhandenen Typ kopieren und ihn so ändern, dass die Felder und Workflowprozess angezeigt werden, die den neuen Typ unterstützen.
Wenn Sie das Layout entwerfen, beachten Sie die folgenden Tipps, um die besten Ergebnisse zu erzielen:
Platzieren Sie Felder, die von Teammitgliedern häufig verwendet oder aktualisiert werden müssen, am oberen Rand des Formulars.
Platzieren Sie Felder, die nur von wenigen Teammitgliedern verwendet bzw. nur selten aktualisiert werden müssen, auf einer Registerkarte. Zum Beispiel werden Steuerelemente, die Arbeitsaufgaben verknüpfen oder Dateien anfügen, in der Regel auf separaten Registerkarten positioniert.
Gruppieren Sie Felder in Spalten, um die Anzeige von Datenfeldern zu maximieren. Sie können Spalten im oberen Bereich des Formulars oder auf einer Registerkarte verwenden. Sie können auch Registerkarten in einem mehrspaltigen Format anzeigen.
Verwenden Sie ein oder mehrere Link-Steuerelemente auf separaten Registerkarten oder der gleichen Registerkarte, um die Links einzuschränken, die zwischen Arbeitsaufgabentypen-Feldern erstellt werden können.
Informationen zum Exportieren, Importieren und Überprüfen von Arbeitsaufgabenformularänderungen finden Sie unter Ändern des Formularlayouts von Arbeitsaufgaben.
In diesem Thema
Unterteilen des Formulars in Bereiche
Arbeiten mit Registerkarten
Gruppieren von Feldern
Ändern der Größe von Spalten
Unterstützen von variabler Spaltengrößenanpassung mithilfe eines Splitters
Steuern der Größe des Formulars und der Formularelemente
Festlegen unterschiedlicher Layouts für verschiedene Ziele
Unterteilen des Formulars in Bereiche
Sie verwenden Layoutelemente, um das Arbeitsaufgabenformular in unterschiedliche Bereiche aufzuteilen, verwandte Felder zu gruppieren und den Platz im Formular gemäß den Anforderungen der Dateneingabe zuzuordnen. In der folgenden Tabelle werden die Elemente beschrieben, die verwendet werden, um das Formular in verschiedene Bereiche zu unterteilen.
Element |
Beschreibung |
---|---|
FORM |
Enthält die Layout-Elemente, die die Anzeige von Feldern und Steuerelementen für den Arbeitsaufgabentyp festlegen. |
Layout |
Enthält alle Elemente, die die Anzeige von Feldern und Steuerelementen für ein bestimmtes Ziel festlegen. Sie können unterschiedliche Layouts für verschiedene Ziele festlegen, wie z. B. Visual Studio oder Team Web Access. Untergeordnete Elemente, die Sie in einem Layout-Element angeben können, sind beispielsweise Control, Group, TabGroup und Splitter. |
Group |
Gruppiert untergeordnete Elemente auf dem Formular. Eine Gruppe ist jeweils optisch durch einen Rahmen und eine optionale Bezeichnung abgetrennt. Gruppen, die im XML-Stapel nebeneinander liegen, sind im angezeigten Formular vertikal geteilt. Sie können das Column-Element als untergeordnetes Element eines Group-Elements angeben. |
Column |
Enthält alle untergeordneten Elemente in einer vertikalen Spalte oder teilt ein Formular vertikal. Spalten müssen in einem Group-Element angezeigt werden. Group-Elemente innerhalb von Column können zum Erstellen verschachtelter Bereiche verwendet werden. Group-Elemente werden von Spalten automatisch gleichmäßig unterteilt. Sie können ein optionales Prozentbreitenattribut angeben, um einer oder mehreren Spalten mehr Speicherplatz zuzuordnen. Untergeordnete Elemente, die Sie in einem Column-Element angeben können, sind beispielsweise Control, Group, TabGroup und Splitter. |
Splitter |
Ermöglicht das Ändern der Breite, die zwei Spalten in einem Formular zugeordnet wird. |
Tab |
Fügt einem Formular weitere Registerkarten hinzu, um die Anzeige von zusätzlichen Feldern und Steuerelementen zu unterstützen. Untergeordnete Elemente, die Sie in einem Tab-Element angeben können, sind beispielsweise Control, Group, TabGroup und Splitter. |
TabGroup |
Enthält eine Gruppe von TAB-Elementen. Im Allgemeinen werden Registerkarten einer einzelnen Registerkartengruppe hinzugefügt. Sie könnten jedoch auch zwei oder mehr Registerkartengruppen in einem Formular vertikal stapeln. |
Die folgende Abbildung zeigt ein Formular mit acht Feldern im oberen Bereich, die grob in zwei Spalten angeordnet sind. Unten werden zwei Sätze mit je drei Registerkarten angezeigt, die in einem zweispaltigen Layout angeordnet sind.
Benutzerdefiniertes Formular mit drei Registerkarten in einem zweispaltigen Layout
Der obere Bereich des Formulars
Der folgende Code definiert den oberen Bereich des Formulars. Sie können je nach Bedarf Spalten einfügen. Die erste Spalte in diesem Beispiel, deren Größe auf 70 Prozent der Breite des Formulars festgelegt ist, enthält zwei Gruppen von Feldern. Die zweite Gruppe, die die Felder PU (Use Area Path) und Priority enthält, ist als zweispaltiges Layout definiert. Die zweite Spalte umfasst die restlichen 30 Prozent der Formularbreite. Wird die Größe des Formulars geändert, ändern sich die den Spalten zugeordneten Bereiche proportional.
<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>
Zurück nach oben
Arbeiten mit Registerkarten
Verwenden Sie Registerkarten, um Felder zu gruppieren oder ein oder mehrere spezielle Steuerelemente zu unterstützen, wie z. B. Steuerelemente, die Arbeitsaufgaben und Arbeitsaufgabenverläufe verknüpfen oder Dateien anfügen. Einige Definitionen von Arbeitsaufgabentypen für die Microsoft Solutions Framework (MSF)-Prozessvorlagen verwenden verschiedene Registerkarten, um die Linktypen, die erstellt werden können, abhängig vom jeweiligen Linktyp zu steuern. Weitere Informationen finden Sie unter Arbeitsaufgaben und Workflow (Agile) oder Arbeitsaufgaben und Workflow (CMMI).
Weitere Informationen zur Verwendung spezieller Steuerelemente finden Sie in den folgenden Themen:
Mit den Attributen, die in der folgenden Tabelle beschrieben werden, können Sie die Registerkarte bezeichnen sowie Auffüllungen und Ränder angeben, die die Anzahl der Pixel innerhalb und außerhalb des Rahmens des Tab-Steuerelements steuern.
Attribut |
Beschreibung |
---|---|
Label |
Erforderlich. Text, der den Namen der Registerkartenseite angibt. |
Margin |
Optional. Legt den Abstand um die Registerkarte in Pixel fest. |
Padding |
Optional. Legt den Abstand um den äußeren und inneren Rahmen der Registerkarte in Pixel fest. |
Sechs Registerkarten, die durch das Layout nebeneinander angeordnet werden
Der folgende Code enthält die Syntax für das in der vorherigen Abbildung dargestellte Layout.
<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>
Zurück nach oben
Gruppieren von Feldern
Verwenden Sie das Group-Element, um Elemente visuell zu gruppieren, ähnlich wie in der Windows GroupBox. Mit den Attributen, die in der folgenden Tabelle beschrieben werden, können Sie jede Gruppe bezeichnen sowie Auffüllungen und Ränder angeben, die die Anzahl der Pixel innerhalb und außerhalb des Rahmens des Gruppenbereichs steuern. Dem Group-Element sollte immer ein Column-Element folgen, auch wenn die Gruppe nur eine Spalte hat.
Verwenden Sie das Group-Element als Container für Felder in einer Spalte und für Spalten in einem unterteilten Bereich auf dem Formular. Sie können das Column-Element nur als ein untergeordnetes Element in einem Group-Element angeben.
Sie können Abstände und Größen des gesamten Formularlayouts steuern, indem Sie die in der folgenden Tabelle aufgeführten Attribute angeben.
Attribut |
Beschreibung |
---|---|
Label |
Optional. Text, der den Namen der Gruppe angibt. |
Margin |
Optional. Gibt den Abstand um die Gruppe sowie zwischen dem Steuerelement und benachbarten Elementen in Pixel an. Auf den einzelnen Seiten können unterschiedliche Abstände angegeben werden. |
Padding |
Optional. Gibt den Abstand um den äußeren Rahmen der Gruppe in Pixel an. Auf den einzelnen Seiten können unterschiedliche Abstände angegeben werden. |
Gruppe von Feldern, die auf einer Registerkarte angeordnet sind
Der folgende Code enthält die Syntax für die in der vorherigen Abbildung dargestellte Gruppe von Feldern. Weitere Informationen zum Angeben der Felder mit dem Control-Element finden Sie unter Steuern der Anzeige von Arbeitsaufgabenfeldern.
<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>
Zurück nach oben
Arbeiten mit Spalten
Sie können einen Bereich in einem Formular mit zwei oder mehr Spalten entwerfen. Mit dem FixedWidth- bzw. dem PercentWidth-Attribut können Sie die Spaltenbreite als festen Wert oder als Prozentsatz der Breite des Elements angeben, das die Spalte enthält. Sie können nur jeweils eins dieser beiden Column-Attribute verwenden. Verwenden Sie ein Splitter-Steuerelement, um es dem Benutzer zu ermöglichen, die Größe der Spalte zu ändern, wie unter Unterstützen von variabler Spaltengrößenanpassung mithilfe eines Splitters beschrieben.
Layout mit drei Spalten
Der folgende Code erzeugt das obige Drei-Spalten-Layout für Felder. Wenn Sie Feldergruppen in Spalten organisieren, verwenden Sie das Group-Element, sodass alle Spalten mit Feldern enthalten sind. Optional können Sie die Feldergruppen bezeichnen.
<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>
Unterstützen von variabler Spaltengrößenanpassung mithilfe eines Splitters
Verwenden Sie das Splitter-Element, wenn Sie es Benutzern ermöglichen möchten, die Größe der Spalten des angezeigten Formulars dynamisch zu ändern. Der Splitter wird als gepunktete Zeile auf dem Formular angezeigt, wie in der folgenden Abbildung dargestellt. Sie können keine untergeordneten Elemente im Splitter-Element angeben.
2-Spalten-Layout mit Splitter
Ein Group-Element, das die Elemente Splitter und Column enthält, muss genau drei Column-Elemente in der folgenden Reihenfolge festlegen:
ein Column-Element links vom Splitter
ein Column-Element, das nur das Splitter-Element enthält
ein Column-Element rechts vom Splitter
Weitere Informationen finden Sie im folgenden Beispiel.
<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>
Zurück nach oben
Steuern der Größe des Formulars und der Formularelemente
Sie können die minimale horizontale und vertikale Größe jedes Formularlayouts mit dem MinimumSize-Attribut für das Layout angeben. Die Größe des Formulars wird jedoch entsprechend der kombinierten Dimensionen geändert, wenn die horizontalen und vertikale Größen der Feldsteuerelemente und Layouts, die für jedes Formular definiert werden, zusammen größer als die angegebenen minimalen Dimensionen sind. Außerdem entspricht die vertikale Größe aller Registerkarten der Dimension, die erforderlich ist, um die Größe der Registerkarte mit dem maximalen vertikalen Layout festzulegen. Die Größe des letzten Feldsteuerelements auf jeder Registerkarte wird möglicherweise geändert, um die vertikale Dimension entsprechend auszufüllen.
Bildlaufleisten werden angezeigt, wenn der Container, der das Formularlayout anzeigt, kleiner als die minimale horizontale oder vertikale Größe des Formulars ist. In diesem Fall können aufgrund des doppelten Bildlaufs Probleme auftreten. Bei einem doppelten Bildlauf müssen Benutzer möglicherweise sowohl einen Bildlauf durch das Formular als auch durch das Feldsteuerelement durchführen, um nach den gewünschten Informationen zu suchen. Um Probleme mit doppelten Bildläufen zu vermeiden, sollten Sie Feldsteuerelemente, für die ein Bildlauf durchgeführt werden muss, wie z. B. HTML- und Verlaufsfelder, auf ihrer eigenen Registerkarte platzieren.
Zurück nach oben
Steuern der Größe des Layouts
Sie können Abstände und Größen des gesamten Formularlayouts steuern, indem Sie die in der folgenden Tabelle aufgeführten Attribute angeben.
Attribut |
Beschreibung |
Beispiel für einen Musterwert |
---|---|---|
MinimumSize |
Optional. Zeichenfolge der Form (Width, Height). Dieser Wert gibt die minimale Größe des Formulars an. Wenn der Container, der das Formularlayout anzeigt, kleiner als diese Größe ist, werden horizontale und vertikale Bildlaufleisten angezeigt. Wenn die Größe aller Feldsteuerelemente auf dem Layoutformular zusammengenommen die durch das MinimumSize-Attribut festgelegte Größe übersteigt, wird das Attribut ignoriert. |
(100,100) |
Margin |
Optional. Zeichenfolge der Form (Left, Top, Right, Bottom), die den Abstand um das Layout in Pixel angibt. Auf den einzelnen Seiten können unterschiedliche Abstände angegeben werden. |
(2,0,2,0) |
Padding |
Optional. Eine Zeichenfolge der Form (Left, Top, Right, Bottom), die den Abstand zwischen dem äußeren und dem inneren Rahmen des Layouts in Pixel angibt. Auf den einzelnen Seiten können unterschiedliche Abstände angegeben werden. |
(2,0,2,0) |
ControlSpacing |
Optional. Gibt den vertikalen Abstand zwischen Steuerelementen auf dem Formular an. Integer. |
Nicht zutreffend |
Zurück nach oben
Steuern der Größe der Formularelemente
Verwenden Sie das MinimumSize-Attribut des Control-Elements, um die Mindestbreite und -höhe für jedes Formularelement anzugeben. Wenn in vertikaler Richtung nicht genügend Platz vorhanden ist, wird eine Bildlaufleiste angezeigt, um die Mindestgröße beizubehalten. Ohne dieses Attribut werden die Steuerelemente mit ihren Standardgrößen gezeichnet, sofern Steuerelemente auf anderen Registerkarten nicht mehr Platz benötigen, durch den die Registerkarte vergrößert wird. Sie können mithilfe von anderen Attributen, wie z. B. Dock, Margin und Padding, das Steuerelement ausrichten oder strecken und die Größe des Rahmens um das Steuerelement festlegen. Weitere Informationen finden Sie unter den folgenden Themen:
Zurück nach oben
Festlegen unterschiedlicher Layouts für verschiedene Ziele
Sie können mit dem Target-Attribut des Layout-Elements verschiedene Layouts für unterschiedliche Ziele angeben. Geben Sie WinForms für das Ziel Visual Studio oder das Ziel Team Explorer Everywhere 2010 an, und Web für das Ziel Team Web Access.
<FORM>
<Layout Target="WinForms" >
. . .
</Layout>
<Layout Target="Web" >
. . .
</Layout >
</FORM>
Zurück nach oben
Siehe auch
Aufgaben
Ändern des Formularlayouts von Arbeitsaufgaben
Konzepte
Entwerfen und Anpassen eines Arbeitsaufgabenformulars
Weitere Ressourcen
Steuern der Anzeige von Arbeitsaufgabenfeldern
Hinzufügen des Anlagen-Steuerelements
Definieren von Link-Steuerelementen zum Einschränken der Link-Beziehungen
Änderungsprotokoll
Datum |
Versionsgeschichte |
Grund |
---|---|---|
Mai 2011 |
Die Groß- und Kleinschreibung mehrerer XML-Elemente wurde korrigiert. In der Schemadefinition für die Nachverfolgung von Arbeitsaufgaben werden alle untergeordneten Elemente des FORM-Elements mit Binnenversalien definiert und alle Buchstaben in den Namen sämtlicher anderer Elemente nur in Großschreibung dargestellt. |
Korrektur inhaltlicher Fehler. |
Juni 2010 |
Hinzugefügte Abbildungen und weitere Codebeispiele. |
Informationsergänzung. |
Juli 2010 |
Aus Gründen der Übersichtlichkeit wurden einige Abschnitte neu geschrieben. Der Verweis auf Team Explorer Everywhere 2010 im letzten Abschnitt wurde korrigiert. |
Informationsergänzung. |