Aracılığıyla paylaş

Çalışma Öğesi Formunun Düzenini Tasarlama

  • Makale

İş öğesi formu tasarladığınızda, alanları, ekip üyeleri tarafından takip edilecek veri girişi ve iş akışı süreçlerini destekleyecek şekilde konumlandırmalısınız. Varolan bir forma sadece birkaç alan ekliyorsanız, forma eklemek istediğiniz yeri belirlemeniz gerekir. İzleyecek yeni bir veri koleksiyonunu desteklemek için bazı alanlar ekliyorsanız, yalnızca bu alanlar için yeni bir sekme eklemek isteyebilirsiniz. Bir formu kaydırma gereksinimini en aza indirgemek için alanları formun tepesinde veya bir sekmede bir kaç kolon halinde gruplayabilirsiniz.

Yeni bir iş öğesi türü ekliyorsanız, varolan bir türünü kopyalamak ve alanları ve yeni türü destekleyen iş akışı sürecini ve alanları görüntülemek için değiştirmek isteyebilirsiniz.

Düzeni tasarlarken, en iyi sonucu almak için aşağıdaki ipuçlarını göz önünde bulundurun:

  • Alanları takım üyelerinin sık sık başvurması veya güncelleştirmesi gereken formun en üstüne yerleştirin.

  • Alanları, yalnızca birkaç takım üyesinin seyrek olarak başvurması veya güncelleştirmesi gereken bir sekmeye yerleştirin. Örneğin, bağlantı iş öğelerinin ve ekleme dosyalarının tipik olarak ayrı sekmelerde konumlandırıldığını denetler.

  • Veri alanlarının görüntülenmesini büyütmek için alanları sütunlar halinde gruplandırın. Sütunları bir formun üstünde ya da bir sekmede kullanabilirsiniz. Ayrıca sekmeleri bir çoklu sütun biçiminde görüntüleyebilirsiniz.

  • Çalışma öğeleri türleri alanlarında oluşturulabilen bağlantıları sınırlandırmak için ayrı sekmelerdeki veya aynı sekmedeki bir ya da daha fazla bağlantı denetimini kullanın.

İş öğesi değişikliklerini dışarı aktarma, içeri aktarma ve doğrulama konusunda bilgi için bkz. Çalışma Öğesi Form Düzenini Değiştirme.

Bu konuda

  • Form Alanlarını Bölümlere Ayırma

  • Sekmelerle çalışma

  • Alanları Gruplandırma

  • Sütunları Boyutlandırma

  • Değişken Sütun Boyutlandırmasını Desteklemek İçin Bir Bölümlendirici Kullanmak

  • Form ve Form Öğelerinin Boyutunu Denetleme

  • Farklı Hedefler için Farklı Düzenler Belirtme

Form Alanlarını Bölümlere Ayırma

Çalışma öğesi formunuzu farklı alanlara bölmek, ilgili alanları gruplamak ve veri girişi gereksinimlerine göre formda yer ayırmak için düzen öğelerini kullanırsınız. Aşağıdaki tablo biçimi farklı alanlara bölmek için kullanılan öğeleri açıklar.

Öge

Description

FORM

İş öğesi için Layout alan ve denetimlerin görüntülenmesini belirleyen tüm öğeleri içerir.

Layout

Belirli bir hedefe yönelik alan ve denetimlerin görüntülenmesini belirleyen tüm öğeleri içerir. Visual Studio ya da Ekip Web Erişimi gibi, farklı hedefler için farklı düzenler belirleyebilirsiniz. Bir Layout öğesi içerisinde belirleyebileceğiniz alt öğeler Control, Group, TabGroup ve Splitter öğelerini içerir.

Group

Form üzerindeki Küme alt öğeleri. Bir grup, bir kenarlık ve isteğe bağlı olarak bir etiket tarafından görsel olarak ayrılır. XML yığınında bitişik konumlarda tanımlanan gruplar görüntülenen formda dikey olarak ayrılır. Bir Group öğesinin alt öğesi olarak Column öğesini belirtebilirsiniz.

Column

Tüm alt öğeler bir dikey sütun halinde tutar veya formu dikey olarak böler. Sütunlar bir Group'ta görünmelidir. Group öğeleri Column öğelerinin içinde, iç içe alanlar oluşturmak için kullanılabilirler. Varsayılan olarak, sütunlar bir Group'u eşit olarak böler. Bir veya daha fazla sütuna daha fazla alan ayırmak için bir isteğe bağlı yüzde genişlik özniteliği belirleyebilirsiniz.

Bir Column öğesi içerisinde belirleyebileceğiniz alt öğeler Control, Group, TabGroup ve Splitter öğelerini içerir.

Splitter

Kullanıcıların bir formda iki sütuna tahsis edilen genişliği yeniden boyutlandırmasını sağlar.

Tab

Ek alanların ve denetimlerin görüntülenmesini desteklemek için forma farklı sekmelerde ekler. Bir Tab öğesi içerisinde belirleyebileceğiniz alt öğeler Control, Group, TabGroup ve Splitter öğelerini içerir.

TabGroup

Bir TAB öğeleri grubu içerir. Genel olarak, bir tek sekme grubuna sekmeler eklersiniz. Ancak, bir formda iki ya da daha fazla sekme grubundan dikey olarak yığın oluşturabilirsiniz.

Aşağıda şekil olan üst alanı kabaca iki sütun olarak düzenlenmiş sekiz alanı gösteren bir biçim gösterir. Alt bölüm iki sütun şeklinde düzenlenmiş üç sekmenin iki kümesini görüntüler.

İki Sütun Düzeninde Üç Sekmeli Özel Form

Özel çalışma öğesi formu

Formun Tepesi

Aşağıdaki kod biçimin üstünü tanımlar. Gerektiğinde sütunlar tanıtabilirsiniz. Bu örnekte gösterildiği gibi, formun genişliğinin yüzde 70'i büyüklüğündeki ilk sütun iki alan grubu içerir. PU (Alan Yolu Kullan) ve Öncelik alanlarını içeren ikinci grup alanlar, iki sütun düzeni içinde tanımlanır. İkinci sütun formun kalan yüzde 30 oranındaki genişliğini kapsar. Form yeniden boyutlandırıldığındaki gibi bu sütunlara ayrılmış alanlar orantılı olarak değişir.

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

Başa dön

Sekmelerle çalışma

Bir grup alanı küme haline getirmek veya iş öğelerine ve iş öğesi geçmişine bağlantısı olan ya da dosyalar ekleyen denetimler gibi bir veya birden fazla özel denetimi desteklemek için sekmeleri kullanın. Microsoft Çözüm Çerçevesi (MSF) işlem şablonlarının iş öğesi türlerinin çeşitli tanımları, bağlantı türüne göre oluşturulabilen bağlantı türlerini kontrol etmek için çeşitli sekmelerini kullanır. Daha fazla bilgi için bkz. Çalışma Öğeleri ve İş Akışı (Çevik) veya Çalışma Öğeleri ve İş Akışı (CMMI).

Özel denetimlerin kullanımı hakkında daha fazla bilgi için, şu konulara bakın:

Aşağıdaki tabloda açıklanan öznitelikleri kullanarak, sekmeyi etiketleyebilir ve sekme denetiminin kenarlığının içindeki ve dışındaki piksel sayısını kontrol eden doldurma ve kenar boşlukları belirtebilirsiniz.

Öznitelik

Description

Label

Gerekli. Sekme sayfasının adını belirten metin.

Margin

İsteğe Bağlı. Sekmenin çevresindeki boşluğun miktarını piksel cinsinden belirler.

Padding

İsteğe Bağlı. Sekmenin dış ve iç sınırının çevresindeki boşluğun miktarını piksel cinsinden belirtir.

Yan Yana Mizanpaj ile Düzenlenmiş Altı Sekme

6 Sekmelerinin iki grup gösteren özel form

Aşağıdaki kod önceki resimde gösterilen düzeni oluşturmak için kullanılan sözdizimini listeler.

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

Başa dön

Alanları Gruplandırma

Windows GroupBox'a benzer öğeleri görsel olarak gruplandırmak için Group öğesini kullanın. Aşağıdaki tabloda açıklanan öznitelikleri kullanarak, her grubu etiketleyebilir ve grup alanının kenarlığının içindeki ve dışındaki piksel sayısını kontrol eden doldurma ve kenar boşlukları belirtebilirsiniz. Group öğesinin ardından grubun yalnızca bir sütunu olsa bile her zaman Column öğesi gelmelidir.

Bir sütundaki alanların kapsayıcısı olarak veya bir formdaki bölümlenmiş alandaki sütunların kapsayıcısı olarak Group öğesini kullanmanız gerekir. Bir Group öğesi içinde Column öğesini yalnızca bir alt öğe olarak belirtebilirsiniz.

Aşağıdaki tabloda açıklanan öznitelikleri belirterek, genel form düzeninin aralık ve boyutunu denetleyebilirsiniz.

Öznitelik

Description

Label

İsteğe Bağlı. Grubun adını belirten metin.

Margin

İsteğe Bağlı. Grubun çevresindeki ve denetim ile komşu öğeleri arasındaki boşluğun miktarını piksel cinsinden belirtir. Her iki taraftaki alan miktarını değiştirebilirsiniz.

Padding

İsteğe Bağlı. Grubun kenarlığının dış boşluk miktarını piksel cinsinden belirler. Her iki taraftaki alan miktarını değiştirebilirsiniz.

Bir Sekmede Düzenlenmiş Alan Grupları

Birkaç alan grubu

Aşağıdaki kod önceki resimde gösterilen alanların grubunu oluşturmak için kullanılan sözdizimini listeler. Control öğesini kullanarak alanları belirleme hakkında daha fazla bilgi için bkz. Çalışma Öğesi Alanlarının Görüntülenmesini Denetleme.

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

Başa dön

Sütunlarla Çalışma

Bir alanı iki veya daha fazla sütunu olan bir formda tasarlayabilirsiniz. Sırasıyla, FixedWidth ya da PercentWidth özniteliklerini kullanarak, sütun genişliğini sabit ya da içeren öğenin bir yüzdesi olarak belirtebilirsiniz. Bu iki Column öznitelik birlikte kullanılamaz. Bir kullanıcının bir sütunu tekrar boyutlandırabilmesini sağlamak için Değişken Sütun Boyutlandırmasını Desteklemek İçin Bölümlendirici Kullanımı konusunun bahsettiği gibi bir Splitter denetimi belirleyebilirsiniz.

Üç Sütunlu Düzen

3-Sütun görüntüleme

Aşağıdaki kod alanların önceki üç sütunlu düzenini üretti. Alan gruplarını sütunlarda düzenlediğinizde, her bir alanın sütununu içermek için Group öğesini kullanın. İsteğe bağlı olarak, alan gruplarını etiketleyebilirsiniz.

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

Değişken Sütun Boyutlandırmasını Desteklemek İçin Bir Bölümlendirici Kullanmak

Sütunları dinamik olarak yeniden boyutlandırmak üzere formun görüntüleyicisine izin vermek istediğinizde Splitter öğesini kullanın. Aşağıdaki çizimde gösterildiği gibi, bölümlendirici formda noktalı bir çizgi olarak görüntülenir. Splitter öğesinde herhangi bir alt öğe belirtemezsiniz.

Bölümlendiricili 2 Sütun Düzeni

SPLITTER ile 2 sütun düzeni

Splitter ve Column öğelerini içeren Group öğesi, tam olarak üç Column öğeyi aşağıdaki sırada belirtmelidir:

  1. Bölümlendiricinin sol kısmındaki bir Column

  2. bir Column içeren yalnızca Splitter öğesi

  3. Bölümlendiricinin sağ kısmındaki bir Column

Daha fazla bilgi için aşağıdaki örneğe bakın.

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

Başa dön

Form ve Form Öğelerinin Boyutunu Denetleme

Her form düzeninin en az yatay ve dikey boyutunu, düzen için MinimumSize özniteliğini kullanarak belirtebilirsiniz. Ancak, her form için tanımlanmış alan denetimlerinin ve düzenlerin birleşik yatay ve dikey boyutları belirtilen en az boyutlardan büyük olduğunda form birleşik boyutlarına göre yeniden boyutlandırılır. Ayrıca, sekmelerin dikey boyutu, sekmeyi en yüksek dikey düzen içerisinde boyutlandırmak için gereken boyuta uyar. Her sekmedeki son alan denetimi dikey boyutu dolduracak şekilde yeniden boyutlandırılabilir.

Kaydırma çubukları; biçim düzenini görüntüleyen kapsayıcı, biçimin minimum yatay ya da dikey boyutundan daha küçük olduğunda görünür. Bu durumda, çift-kaydırma sorunu ortaya çıkabilir. Çift kaydırma ile, kullanıcıların istedikleri bilgileri bulabilmek için hem formun kendisini hem de alan denetimini kaydırmaları gerekebilir. Çift-kaydırma sorunu önlemek için kendi sekmelerindeki HTML ve Geçmiş alanları gibi kaydırılabilir alan denetimleri yerleştirmek isteyebilirsiniz.

Başa dön

ms194952.collapse_all(tr-tr,VS.110).gifDüzenin Boyutunu Denetleme

Aşağıdaki tabloda açıklanan öznitelikleri belirterek, genel form düzeninin aralık ve boyutunu denetleyebilirsiniz.

Öznitelik

Description

Desen değeri örneği

MinimumSize

İsteğe Bağlı. Biçim dizesi (Width, Height). Bu değer formun kendisi için en az boyutu belirtir. Form düzenini görüntüleyen kapsayıcı bu boyuttan küçük olduğunda, yatay ve dikey kaydırma çubukları belirir. Düzen formundaki alan denetimlerinin birleşik boyutu MinimumSize özniteliği tarafından ayarlanmışlardan büyük olduğunda, öznitelik yok sayılır.

(100,100)

Margin

İsteğe Bağlı. Düzenin dış sınırının çevresindeki boşluğun miktarını (Left, Top, Right, Bottom) piksel cinsinden belirler. Her iki taraftaki alan miktarını değiştirebilirsiniz.

(2,0,2,0)

Padding

İsteğe Bağlı. Biçimin dizesi ((Left, Top, Right, Bottom) düzenin dış sınırı ve iç sınır arasındaki boşluk miktarını, piksel cinsinden belirtir. Her iki taraftaki alan miktarını değiştirebilirsiniz.

(2,0,2,0)

ControlSpacing

İsteğe Bağlı. Form üzerindeki denetimler arasındaki dikey boşluğu belirtir. Tamsayı.

N/A

Başa dön

ms194952.collapse_all(tr-tr,VS.110).gifForm Öğelerinin Boyutunu Denetleme

Her form öğesinin bulunması gereken en küçük genişlik ve yüksekliği belirlemek için Control öğesi MinimumSize özniteliğini kullanın. Yeterli dikey aralığa sahip değilseniz en küçük boyutunu korumak için bir kaydırma çubuğu belirir. Bu öznitelik olmadan, diğer sekmelerdeki kontroller sekmenin boyutunu arttıracak şekilde daha fazla alan almadıkça, kontroller varsayılan değerleri kullanarak çizilir. Denetimi hizalamak, uzatmak ve denetimin çevresindeki kenarlığın boyutunu tanımlamak için Dock, Margin ve Padding gibi öznitelikler kullanabilirsiniz. Daha ayrıntılı bilgi için aşağıdaki konulara bakın:

Başa dön

Farklı Hedefler için Farklı Düzenler Belirtme

Layout öğesi Target özniteliğini kullanarak farklı hedefler için farklı düzenler belirleyebilirsiniz. Visual Studio veya Ekip Gezgini Her Yerde öğelerini hedeflemek için WinForms öğesini belirtin ve Ekip Web Erişimi öğesini hedeflemek için Web öğesini belirtin.

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

Başa dön

Ayrıca bkz.

Görevler

Çalışma Öğesi Form Düzenini Değiştirme

Kavramlar

Çalışma Öğesi Formu Tasarlama ve Özelleştirme

Çalışma Öğesi Alanlarının Görüntülenmesini Denetleme

Ekler Denetimini Ekleme

Bağlantı İlişkilerini Kısıtlamak için Bağlantı Denetimlerini Tanımlama

Diğer Kaynaklar

Çalışma Öğesi Formunda Yardım Metni, İşlem Kılavuzu, Web İçeriği ve Web Sayfalarına Bağlantılar Sağlama