Projektowanie formularza elementu roboczego

Artykuł
09/13/2015

Podczas projektowania formularza elementu pracy, chcesz umieścić pola, tak aby obsługują danych wpisu i przepływ pracy procesy następuje członków zespołu. Jeśli dodajesz kilka pól do istniejącego formularza, należy określić, której chcesz dodać je na formularzu. Jeśli dodajesz kilka pól do obsługi nowych kolekcję danych do śledzenia, warto dodać nową kartę tylko dla tych pól. Aby zminimalizować konieczność przewijania formularza, można grupować pól w kilku kolumn w górnej części formularza lub na karcie.

Jeśli dodajesz nowy typ elementu pracy, można skopiować z istniejącym typem i zmodyfikuj go, aby wyświetlić pola i proces przepływu pracy, który obsługuje nowego typu.

Podczas projektowania układu, należy wziąć pod uwagę następujące porady, aby uzyskać najlepsze wyniki:

Umieść często pola w górnej części formularza, który musi odwoływać się członków zespołu lub aktualizacji.
Rzadko miejsce pól w kartę, która musi odwoływać się tylko kilka członków zespołu lub aktualizacji. Na przykład formanty, które łącze pozycje robocze lub Dołącz pliki są zwykle ustawiony na oddzielne karty.
Grupa pola do kolumny, aby zwiększyć do wyświetlania pola danych. Można używać kolumn, u góry formularza lub na karcie. Można także wyświetlać karty w formacie wielokolumnowych.
Umożliwia łączenie formantów na oddzielnych kartach lub na tej samej karcie ograniczyć typy łączy, które mogą być tworzone między pola typy elementów roboczych.

Aby dowiedzieć się, jak wyeksportować i zaimportować zweryfikować zmiany formularza elementu pracy, zobacz Zmian układu formularza elementu pracy.

W tym temacie:

Segmenty formularza w obszary
Praca z karty
Grupa pól
Rozmiar kolumn
Umożliwia obsługuje zmiany rozmiaru kolumny zmienna rozdzielacz
Kontroluje rozmiar formularza i elementów formularza
Określ różne układy dla różnych celów

Segmenty formularza w obszary

Ułóż elementy służy do segmentu formularza elementu pracy na różnych obszarach grupowanie powiązanych pól i przydzielanie przestrzeni na formularzu zgodnie z wymaganiami zapisu danych. W poniższej tabeli opisano elementy, które są używane do segmentu formularza w różnych obszarach.

Element	Opis
FORM	Zawiera Layout elementów określających wyświetlania pola i formanty typu elementu roboczego.
Layout	Zawiera wszystkie elementy określających wyświetlanie pól i formantów dla określonego celu. Można określić różne układy dla różnych celów, takich jak Visual Studio lub Team Web Access. Elementy podrzędne, które można określić w Layout element zawierać Control, Group, TabGroup, i Splitter elementy.
Group	Klastry elementy podrzędne na formularzu. Grupa jest wizualnie oddzielone obramowania i etykiety opcjonalne. Grupy, które są definiowane w sąsiadujących pozycji w stosie XML są dzielone w pionie w formularzu wyświetlanego. Można określić Column element jako element podrzędny elementu Group elementu.
Column	Śledzi wszystkie elementy podrzędne w kolumnie pionowej lub dzieli formularza w pionie. Kolumny musi występować Group. Group elementy w Column elementów może służyć do tworzenia zagnieżdżonych obszarów. Domyślnie kolumny podzielone Group równomiernie. Można określić szerokość atrybut procentową Opcjonalnie można przydzielić więcej miejsca na co najmniej jedną kolumnę. Elementy podrzędne, które można określić w Column element zawierać Control, Group, TabGroup, i Splitter elementy.
Splitter	Pozwala użytkownikom na zmienianie rozmiaru przydzielonej do dwóch kolumn w postaci szerokość.
Tab	Dodaje różne karty do obsługi wyświetlania dodatkowe pola i formanty formularza. Elementy podrzędne, które można określić w Tab element zawierać Control, Group, TabGroup, i Splitter elementy.
TabGroup	Zawiera grupę TAB elementów. Ogólnie rzecz biorąc można dodawać do karty grupy jedną kartę. Można jednak stosu co najmniej dwa grupy kart w pionie w formularzu.

Poniższa ilustracja pokazuje formularza, w których górny obszar Wyświetla osiem pola, które są rozmieszczane około na dwie kolumny. W dolnej części wyświetlana dwóch zestawów z trzech kart ułożone w układzie dwie kolumny.

Formularz niestandardowy z trzema kartami w układzie dwie kolumny

Custom work item form

Góry formularza

Poniższy kod definiuje górnej części formularza. W razie potrzeby można wprowadzać kolumn. Jak pokazano w tym przykładzie, pierwsza kolumna jest dopasowywany w 70 procent width formularza, zawiera dwie grupy pól. Druga grupa pól zawiera PU (Użyj obszaru ścieżki) i priorytet pola, jest zdefiniowany w układzie dwie kolumny. Druga kolumna obejmuje pozostałe 30-procentowy szerokość formularza. Zgodnie z rozmiarów formularza, obszarów, które są przydzielone do kolumn, które różnią się proporcjonalnie.

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

Praca z karty

Umożliwia karty klastra grupy pól lub do obsługi co najmniej jeden specjalne formanty, takie jak formanty połączonych elementów pracy, łączenie Historia elementów roboczych, lub Dołącz pliki. Kilka definicje typów elementów roboczych dla szablony procesów w ramach rozwiązań firmy Microsoft (Opracowywanie) umożliwia kilka kart kontrolować typy łączy, które można było utworzyć, w zależności od typu łącza. Aby uzyskać więcej informacji, zobacz Typy szablonów elementów roboczych procesu Agile i przepływ pracy lub Typy elementów szablonów roboczych procesu CMMI oraz przepływ pracy.

Aby uzyskać więcej informacji na temat używania specjalnych kontrolek zobacz następujące tematy:

Przy użyciu atrybutów, które są opisane w poniższej tabeli, możesz etykiety karty i określać dopełnienia i marginesów kontrolujących liczbę pikseli i spoza obramowania formantu karty.

Atrybut	Opis
Label	Parametr wymagany. Tekst, który określa nazwę karty.
Margin	Parametr opcjonalny. Określa wyrażoną w pikselach ilość wolnego miejsca karty.
Padding	Parametr opcjonalny. Określa wyrażoną w pikselach ilość wolnego miejsca i wewnętrznego obramowania karty.

Sześć kart rozmieszczone obok siebie według układu

Custom form showing two groups of 6 tabs

Poniżej przedstawiono kod składni, który jest używany do tworzenia układu, który jest wyświetlany na poprzedniej ilustracji.

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

Grupa pól

Możesz użyć Group elementu, aby wzrokowo grupy elementów, podobnie jak okno grupowe systemu Windows. Przy użyciu atrybutów, które są opisane w poniższej tabeli, możesz etykieta każdej grupy i określać dopełnienia i marginesów kontrolujących liczbę pikseli i spoza obramowania obszaru grupy. Group Element powinien zawsze być następuje Column elementu, nawet jeśli grupa ma tylko jedną kolumnę.

Skorzystaj z Group kodu jako kontener dla pola w kolumnie jako kontener dla kolumn w obszarze podzielonej na segmenty w formularzu. Można określić Column elementu tylko jako element podrzędny w Group elementu.

Odstępy, a rozmiar ogólny układ formularza można kontrolować, określając atrybuty, które są opisane w poniższej tabeli.

Atrybut	Opis
Label	Parametr opcjonalny. Tekst, który określa nazwę grupy.
Margin	Parametr opcjonalny. Określa wyrażoną w pikselach ilość miejsca wokół grupy i między wokół i kontroli. Ilość miejsca na każdej stronie mogą się różnić.
Padding	Parametr opcjonalny. Określa wyrażoną w pikselach ilość wolnego miejsca zewnętrznego obramowania grupy. Ilość miejsca na każdej stronie mogą się różnić.

Grupa pól rozmieszczone na karcie

Group of several fields

Poniżej przedstawiono kod składni, który służy do tworzenia grup pól, które jest wyświetlane w poprzedniej ilustracji. Aby uzyskać więcej informacji o sposobie określania pól przy użyciu Control elementu, zobacz Kontrola wyświetlania pól elementów pracy.

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

Rozmiar kolumn

Można zaprojektować obszar formularza, który ma co najmniej dwie kolumny. Można określić szerokość kolumny ustalonej lub jako procent szerokość elementu zawierającego przy użyciu FixedWidth lub PercentWidth atrybuty odpowiednio. Te dwa Column atrybuty wzajemnie się wykluczają. Umożliwia użytkownikowi zmiany rozmiaru kolumny można określić Splitter kontroli, jako umożliwia obsługuje zmiany rozmiaru kolumny zmienna rozdzielacz opisuje.

Układ trzy kolumny

3-Column Display

Poniższy kod utworzone poprzedni układ trzy kolumny pól. Jeśli można zorganizować grupy pól w kolumnach, użyj Group element zawiera każdej kolumny pól. Opcjonalnie można opisać grupy pól.

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

Umożliwia obsługuje zmiany rozmiaru kolumny zmienna rozdzielacz

Możesz użyć Splitter element, aby umożliwić podgląd formularza, aby dynamicznie zmienić rozmiar kolumn. Rozdzielacz jest wyświetlany jako linię kropkowaną na formularzu, co zostało pokazane na poniższej ilustracji. Nie można określić żadnych elementów podrzędnych w Splitter elementu.

Układ 2 kolumny z podziału

2 Column Layout with Splitter

Element Group zawierający Splitter i Column elementy należy określić dokładnie trzy Column elementów w następującej kolejności:

Column w lewo rozdzielacz
Column zawierający tylko Splitter elementu
Column z prawej strony rozdzielacz

Poniższy przykład, aby uzyskać więcej informacji, zobacz.

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

Kontroluje rozmiar formularza i elementów formularza

Minimalny rozmiar w poziomie i w pionie każdego układu formularza można określić przy użyciu MinimumSize atrybutu dla układu. Jednak rozmiarów formularza zgodnie z określonymi połączonych wymiarów w przypadku połączonych rozmiary poziomie i w pionie formanty pól i układy, które są definiowane dla każdego formularza większy niż określony minimalne wymiary. Ponadto pionowy rozmiar wszystkich kart jest zgodna z wymiaru, który jest wymagany do karty w układzie pionowym maksymalny rozmiar. Ostatni formant pola na każdej karcie może ulec zmianie w związku z tym do wypełnienia pionowy wymiar.

Paski przewijania są wyświetlane, gdy kontenera, w którym są wyświetlane układ formularza jest mniejsza niż minimalna poziomy lub pionowy rozmiar formularza. W takim przypadku może wystąpić problem liczba o podwójnej precyzji przewijania. Liczba o podwójnej precyzji przewijania użytkowników może być konieczne przewijanie w formularzu i w formancie pola można znaleźć informacje, które powinny być. Aby uniknąć problemu liczba o podwójnej precyzji przewijania, można umieścić formanty pola, które podlegają przewijania, takich jak pola HTML i Historia, własne karty.

Kontrola rozmiaru układu

Odstępy, a rozmiar ogólny układ formularza można kontrolować, określając atrybuty, które są opisane w poniższej tabeli.

Atrybut	Opis	Przykład wartość wzorzec
MinimumSize	Parametr opcjonalny. Ciąg w postaci (szerokość, wysokość). Ta wartość określa minimalny rozmiar samego formularza. Gdy kontenera, który wyświetla układ formularza jest mniejsza niż rozmiar, są wyświetlane paski przewijania poziomie i w pionie. Jeśli łączny rozmiar formantów pola na formularzu układu jest większy niż ustawionego MinimumSize atrybutu, atrybut jest ignorowana.	(100,100)
Margin	Parametr opcjonalny. Ciąg w postaci (pozostanie, Top, prawym przyciskiem, dołu) określająca ilość miejsca wokół układu wyrażona w pikselach. Ilość miejsca na każdej stronie mogą się różnić.	(2,0,2,0)
Padding	Parametr opcjonalny. Ciąg w postaci ((pozostanie, Top, prawym przyciskiem, dołu) który określa, w pikselach, ilość miejsca między zewnętrznego obramowania układu i wewnątrz obramowania. Ilość miejsca na każdej stronie mogą się różnić.	(2,0,2,0)
ControlSpacing	Parametr opcjonalny. Określa odstępy w pionie między formantami na formularzu. Liczba całkowita.	Brak

Kontroluje rozmiar elementów formularza

Możesz użyć Control elementu MinimumSize atrybutu, aby określić minimalną szerokość i wysokość, który każdy element formularza ma zajmować. Jeśli użytkownik nie ma wystarczającej ilości miejsca w pionie, aby zachować jego minimalny rozmiar pojawia się paska przewijania. Bez tego atrybutu formantów są rysowane przy użyciu domyślnej wielkości, chyba że kontrolek w inne karty wykonać więcej miejsca, która zwiększa rozmiar karty. Można użyć innych atrybutów, takich jak Margin i Padding, aby wyrównać lub zwiększyć kontrolę i zdefiniuj rozmiaru obramowania wokół formantu. Aby uzyskać więcej informacji, zobacz następujące tematy:

Określ różne układy dla różnych celów

Można określić różne układy dla poszczególnych obiektów docelowych przy użyciu Layout elementu Target atrybutu. Do obiektu docelowego Visual Studio lub Team Explorer Everywhere, należy określić WinForms, a do obiektu docelowego Team Web Access, należy określić Web.

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

Zobacz też

Zadania

Zmian układu formularza elementu pracy

Udostępnij za pośrednictwem