Aracılığıyla paylaş

Koleksiyonlar ve listeler

Hem koleksiyonlar hem de listeler birlikte görüntülenen birden çok ilgili veri öğesinin gösterimine başvurur. Koleksiyonlar, farklı koleksiyon denetimleriyle (koleksiyon görünümleri olarak da adlandırılır) birden çok şekilde temsil edilebilir. Koleksiyon denetimleri kişi listesi, tarih listesi, resim koleksiyonu gibi koleksiyon tabanlı içerikle etkileşimleri görüntüler ve etkinleştirir.

Önemli API'ler: ItemsView, ListView sınıfı, GridView sınıfı, FlipView sınıfı, TreeView sınıfı, ItemsRepeater sınıfı

Bu makalede ele alınan denetimler şunlardır:

Yönetim Birincil kullanım
ItemsView esnek düzen sistemi kullanarak koleksiyonları görüntülemek için
ListView yoğun metin içeren içerik koleksiyonlarını görüntülemek için
GridView görüntü ağırlıklı içerik koleksiyonlarını görüntülemek için
Çevirme Görünümü bir kerede tam olarak bir öğenin odakta olmasını gerektiren yoğun görüntü içerik koleksiyonlarını görüntülemek için
Ağaç Görünümü metin ağırlıklı içerik koleksiyonlarını belirli bir hiyerarşide görüntülemek için
ItemsRepeater özel koleksiyon denetimleri oluşturmak için özelleştirilebilir yapı taşı olarak

Her denetim için tasarım yönergeleri, özellikler ve örnekler aşağıda verilmiştir.

Bu denetimlerin her biri (ItemsRepeater dışında) yerleşik stil ve etkileşim sağlar. Ancak koleksiyon görünümünüzün ve içindeki öğelerin görsel görünümünü daha da özelleştirmek için DataTemplate kullanılır. Veri şablonları ve koleksiyon görünümünün görünümünü özelleştirme hakkında ayrıntılı bilgileri Öğe kapsayıcıları ve şablonlar sayfasında bulabilirsiniz.

Bu denetimlerin her biri (ItemsRepeater dışında) tek veya birden çok öğenin seçilmesine izin vermek için yerleşik davranışa da sahiptir. Daha fazla bilgi edinmek için bkz . Seçim modlarına genel bakış .

Bu makalede ele alınmayan senaryolardan biri, koleksiyonları bir tabloda veya birden çok sütunda görüntülemektir. Bir koleksiyonu bu biçimde görüntülemek istiyorsanız Windows Topluluk Araç Seti'ndekiDataGrid denetimini kullanmayı göz önünde bulundurun.

Örnekler

WinUI 2 Galerisi
WinUI Galerisi

WinUI 2 Galeri uygulaması yüklüyse ListView, GridView, FlipView, TreeView ve ItemsRepeater'ı çalışırken görebilirsiniz.

Öğeler görünümü

Çalışma zamanında değiştirilebilen çeşitli esnek düzenlerde metin veya görüntü açısından ağır veri öğelerini görüntülemek için öğeler görünümünü kullanabilirsiniz.

Doğru kontrol bu mu?

Öğeler görünümünü kullanarak:

  • Birincil olarak metin tabanlı öğelerden oluşan ve tüm öğelerin aynı görsel ve etkileşim davranışına sahip olması gereken bir koleksiyon görüntüleyin.
  • Her öğenin odak noktasının bir görüntü olduğu ve her öğenin aynı görsel ve etkileşim davranışına sahip olması gereken bir içerik koleksiyonu görüntüleyin.
  • İçerik kitaplıklarını görüntüleme.
  • Aşağıdaki yaygın kullanım örnekleri de dahil olmak üzere çeşitli kullanım örneklerini barındırın:
    • Kişi listesi oluşturun.
    • Storefront türü kullanıcı arabirimi (örn. göz atma uygulamaları, şarkılar, ürünler)
    • Etkileşimli fotoğraf kitaplıkları

Örnekler

Burada, tekdüzen kılavuz düzeninde bir fotoğraf koleksiyonunu gösteren öğeler görünümü yer alır.

Her öğenin aynı boyutta olduğu tekdüzen kılavuz düzeninde gösterilen fotoğraf koleksiyonu.

Bu, yığın düzeninde gösterilen koleksiyonla aynıdır. Burada odak, fotoğraf yerine metin üzerindedir.

Her fotoğrafın altında birkaç satır metin bulunan dikey bir listede gösterilen küçük fotoğraf koleksiyonu.

Konu Description
Öğeler görünümü Uygulamanızda öğeler görünümünü kullanmanın temellerini öğrenin.
Öğe kapsayıcıları ve şablonları Listede veya kılavuzda görüntülediğiniz öğeler, uygulamanızın genel görünümünde önemli bir rol oynayabilir. Denetim şablonlarını ve veri şablonlarını değiştirerek koleksiyon öğelerinizin görünümünü özelleştirerek uygulamanızın harika görünmesini sağlayın.

Liste görünümü

Liste görünümleri, genellikle tek sütunlu, dikey olarak yığılmış bir düzende metin ağırlıklı öğeleri gösterir. Öğeleri kategorilere ayırmanıza ve grup üst bilgileri atamanıza, öğeleri sürükleyip bırakmanıza, içeriği seçmenize ve öğeleri yeniden sıralamanıza olanak sağlar.

Doğru kontrol bu mu?

Liste görünümünü kullanarak:

  • Birincil olarak metin tabanlı öğelerden oluşan ve tüm öğelerin aynı görsel ve etkileşim davranışına sahip olması gereken bir koleksiyon görüntüleyin.
  • Tek veya kategorilere ayrılmış bir içerik koleksiyonunu temsil eder.
  • Aşağıdaki yaygın kullanım örnekleri de dahil olmak üzere çeşitli kullanım örneklerini barındırın:
    • İletilerin veya ileti günlüğünün listesini oluşturun.
    • Kişi listesi oluşturun.
    • Liste /ayrıntılar deseninde liste bölmesini oluşturun. Liste/ayrıntılar deseni genellikle e-posta uygulamalarında kullanılır. Bu düzende bir bölmede seçilebilir öğeler listesi bulunurken, diğer bölmede (ayrıntılar) seçili öğenin ayrıntılı bir görünümü bulunur.

Uyarı

Kaydırılabilir bir görünümde (ScrollViewer veya ListView gibi) uiElement için işaretçi olaylarını işlemeniz gerekiyorsa , UIElement.CancelDirectmanipulation çağrısı yaparak görünümdeki öğe üzerinde işleme olayları desteğini açıkça devre dışı bırakmanız gerekir. Görünümde işleme olaylarını yeniden etkinleştirmek için UIElement.TryStartDirectManipulation öğesini çağırın.

Örnekler

Burada, kişi listesini gösteren ve veri öğelerini alfabetik olarak gruplandıran basit bir liste görünümü yer alır. Grup üst bilgileri (bu örnekteki alfabenin her harfi) "yapışkan" kalacak şekilde de özelleştirilebilir. Bu başlıklar kaydırılırken her zaman ListView'un en üstünde görünür.

Gruplandırılmış veri içeren liste görünümü

Bu, en yeni iletilerin en altta göründüğü bir ileti günlüğünü görüntülemek için ters çevrilmiş bir ListView'dır. Ters listview ile, yerleşik bir animasyon ile ekranın alt kısmında öğeler görünür.

Ters Liste görünümü

Konu Description
Liste görünümü ve kılavuz görünümü Uygulamanızda liste görünümü veya kılavuz görünümü kullanmanın temellerini öğrenin.
Öğe kapsayıcıları ve şablonları Liste veya kılavuz görünümünde görüntülediğiniz öğeler, uygulamanızın genel görünümünde önemli bir rol oynayabilir. Denetim şablonlarını ve veri şablonlarını değiştirerek koleksiyon öğelerinizin görünümünü özelleştirerek uygulamanızın harika görünmesini sağlayın.
Liste görünümü için öğe şablonları Yaygın uygulama türlerinin görünümünü elde etmek için listview için bu örnek öğe şablonlarını kullanın.
Ters listeler Ters çevrilmiş listelerin alt kısmına sohbet uygulamasındaki gibi yeni öğeler eklenir. Uygulamanızda ters bir liste kullanmak için bu makalenin yönergelerini izleyin.
Yenilemek için çekme Çekme-yenileme mekanizması, kullanıcının daha fazla veri almak için dokunma kullanarak veri listesini aşağı çekmesine olanak tanır. Liste görünümünüzde çekme-yenileme uygulamak için bu makaleyi kullanın.
İç İçe Kullanıcı Arabirimi İç içe kullanıcı arabirimi, bir kullanıcının da eylem gerçekleştirebileceği bir kapsayıcının içine alınmış eyleme dönüştürülebilir denetimleri kullanıma sunan bir kullanıcı arabirimidir (UI). Örneğin, düğme içeren liste görünümü öğeniz olabilir ve kullanıcı liste öğesini seçebilir veya içinde iç içe yerleştirilmiş düğmeye basabilir. Kullanıcılarınız için en iyi iç içe kullanıcı arabirimi deneyimini sağlamak için bu en iyi yöntemleri izleyin.

Izgara görünümü

Kılavuz görünümleri, görüntü tabanlı içerik koleksiyonlarını düzenlemek ve göz atmak için uygundur. Kılavuz görünümü düzeni dikey olarak kaydırılıyor ve yatay olarak kaydırılıyor. Öğeler, soldan sağa ve ardından yukarıdan aşağıya okuma sırasına göre sarmalanmış düzendedir.

Doğru kontrol bu mu?

Kılavuz görünümünü kullanarak:

  • Her öğenin odak noktasının bir görüntü olduğu ve her öğenin aynı görsel ve etkileşim davranışına sahip olması gereken bir içerik koleksiyonu görüntüleyin.
  • İçerik kitaplıklarını görüntüleme.
  • Anlamsal yakınlaştırmayla ilişkili iki içerik görünümünü biçimlendirin.
  • Aşağıdaki yaygın kullanım örnekleri de dahil olmak üzere çeşitli kullanım örneklerini barındırın:
    • Storefront türü kullanıcı arabirimi (örn. göz atma uygulamaları, şarkılar, ürünler)
    • Etkileşimli fotoğraf kitaplıkları

Uyarı

Kaydırılabilir bir görünümde (ScrollViewer veya ListView gibi) uiElement için işaretçi olaylarını işlemeniz gerekiyorsa , UIElement.CancelDirectmanipulation() çağrısı yaparak görünümdeki öğe üzerinde işleme olayları desteğini açıkça devre dışı bırakmanız gerekir. Görünümde işleme olaylarını yeniden etkinleştirmek için UIElement.TryStartDirectManipulation() öğesini çağırın.

Örnekler

Bu örnekte, uygulamalara göz atma için tipik bir kılavuz görünümü düzeni gösterilmektedir. Kılavuz görünümü öğelerinin meta verileri genellikle birkaç metin satırı ve bir öğe derecelendirmesi ile sınırlıdır.

Kılavuz görünümü düzeni örneği

Kılavuz görünümü, genellikle resim ve video gibi medyaları sunmak için kullanılan içerik kitaplığı için ideal bir çözümdür. İçerik kitaplığında kullanıcılar eylem çağırmak için bir öğeye dokunabilmeyi bekler.

İçerik kitaplığı örneği

Konu Description
Liste görünümü ve kılavuz görünümü Uygulamanızda liste görünümü veya kılavuz görünümü kullanmanın temellerini öğrenin.
Öğe kapsayıcıları ve şablonları Liste veya kılavuz görünümünde görüntülediğiniz öğeler, uygulamanızın genel görünümünde önemli bir rol oynayabilir. Denetim şablonlarını ve veri şablonlarını değiştirerek koleksiyon öğelerinizin görünümünü özelleştirerek uygulamanızın harika görünmesini sağlayın.
Kılavuz görünümü için öğe şablonları Yaygın uygulama türlerinin görünümünü elde etmek için listview için bu örnek öğe şablonlarını kullanın.
İç İçe Kullanıcı Arabirimi İç içe kullanıcı arabirimi, bir kullanıcının da eylem gerçekleştirebileceği bir kapsayıcının içine alınmış eyleme dönüştürülebilir denetimleri kullanıma sunan bir kullanıcı arabirimidir (UI). Örneğin, düğme içeren liste görünümü öğeniz olabilir ve kullanıcı liste öğesini seçebilir veya içinde iç içe yerleştirilmiş düğmeye basabilir. Kullanıcılarınız için en iyi iç içe kullanıcı arabirimi deneyimini sağlamak için bu en iyi yöntemleri izleyin.

Görünümü çevir

Çevirme görünümleri, görüntü tabanlı içerik koleksiyonlarına göz atmak için uygundur; özellikle de istenen deneyim aynı anda yalnızca bir görüntünün görünür olmasıdır. Çevirme görünümü, kullanıcının koleksiyon öğeleri (dikey veya yatay) arasında hareket etmesine veya "çevirmesine" olanak tanır ve kullanıcı etkileşimi sonrasında her öğe birer birer görünür.

Doğru kontrol bu mu?

Aşağıdakiler için çevirme görünümü kullanın:

  • Küçükten ortaya (25 öğeden az) bir koleksiyon görüntüleyin; burada koleksiyon çok az meta veri içeren görüntülerden oluşur.
  • Öğeleri birer birer görüntüleyin ve son kullanıcının öğeleri kendi hızıyla çevirmesine izin verin.
  • Aşağıdaki yaygın kullanım örnekleri de dahil olmak üzere çeşitli kullanım örneklerini barındırın:
    • Fotoğraf galerileri
    • Ürün galerileri veya vitrinler

Örnekler

Aşağıdaki iki örnekte sırasıyla yatay ve dikey olarak çevrilen bir FlipView gösterilmektedir.

Yatay çevirme görünümü

Dikey Çevir görünümü

Konu Description
Çevirme görünümü Uygulamanızda bir çevirme görünümü kullanmanın temellerini ve bir çevirme görünümü içindeki öğelerinizin görünümünü özelleştirmeyi öğrenin.

Ağaç görünümü

Ağaç görünümleri, gösterilmesi gereken önemli bir hiyerarşiye sahip metin tabanlı koleksiyonları görüntülemek için uygundur. Ağaç görünümü öğeleri daraltılabilir/genişletilebilir, görsel hiyerarşide gösterilir, simgelerle desteklenebilir ve ağaç görünümleri arasında sürüklenip bırakılabilir. Ağaç görünümleri N düzeyinde iç içe yerleştirmeye olanak sağlar.

Doğru kontrol bu mu?

Ağaç görünümünü kullanarak:

  • Bağlamı ve anlamı bir hiyerarşiye veya belirli bir kuruluş zincirine bağımlı olan iç içe öğeler koleksiyonunu görüntüleyin.
  • Aşağıdaki yaygın kullanım örnekleri de dahil olmak üzere çeşitli kullanım örneklerini barındırın:
    • Dosya tarayıcısı
    • Şirket kuruluş şeması

Örnekler

Burada, bir dosya gezginini temsil eden ve simgelerle desteklenen birçok farklı iç içe öğe görüntüleyen bir ağaç görünümü örneği verilmiştir.

Simgeli ağaç görünümü

Konu Description
Ağaç görünümü Ağaç görünümünde öğelerinizin görünümünü ve etkileşim davranışını özelleştirmenin yanı sıra uygulamanızda ağaç görünümünü kullanmanın temellerini öğrenin.

Öğeler Tekrarlayıcısı

ItemsRepeater, herhangi bir özellik tanımlamadan bir sayfaya yerleştirildiğinde kullanıma açık stil veya etkileşim sağlamadığından, bu sayfada gösterilen koleksiyon denetimlerinin geri kalanından farklıdır. ItemsRepeater, geliştirici olarak kendi özel koleksiyon denetiminizi oluşturmak için kullanabileceğiniz bir yapı taşıdır; özellikle de bu makaledeki diğer denetimler kullanılarak elde edilemeyen bir yapı taşıdır. ItemsRepeater, tam gereksinimlerinize uyacak şekilde uyarlanabilen veri odaklı ve yüksek performanslı bir paneldir.

İpucu

ItemsView denetimi ItemsRepeater'ın üzerine kuruludur ve kendi özel koleksiyon denetiminizi oluşturmanıza gerek kalmadan ItemsRepeater'ın birçok avantajını sağlar.

Doğru kontrol bu mu?

Şu durumlarda ItemsRepeater kullanın:

  • Mevcut koleksiyon denetimleri kullanılarak oluşturulamayan belirli bir kullanıcı arabirimine ve kullanıcı deneyimine sahipsiniz.
  • Öğeleriniz için mevcut bir veri kaynağınız (İnternet'ten çekilen veriler, bir veritabanı veya arka planınızdaki önceden var olan bir koleksiyon gibi) var.

Örnekler

Aşağıdaki üç örnek, aynı veri kaynağına (bir sayı koleksiyonu) bağlı olan tüm ItemsRepeater denetimleridir. Sayı koleksiyonu üç şekilde temsil edilir ve aşağıda ItemsRepeaters'ın her biri farklı bir özel Düzen ve farklı bir özel ItemTemplate kullanılarak gösterilir.

Yatay çubuklu ItemsRepeater Dikey çubuklu ItemsRepeater Döngüsel gösterimli ItemsRepeater

Konu Description
ItemsRepeater Uygulamanızda bir ItemsRepeater kullanmanın temellerini ve koleksiyon görünümünüz için gerekli tüm etkileşimi ve görsel bileşenleri nasıl uygulayacağınızı öğrenin.

Genelleştirme ve yerelleştirme denetim listesi

  • Sarmalama: Liste etiketi için iki satıra izin verin.
  • Yatay genişletme: Alanların metin genişletmeye uygun olduğundan ve kaydırılabilir olduğundan emin olun.
  • Dikey aralık: Latin olmayan betiklerin düzgün görüntülendiğinden emin olmak için dikey aralık için Latin olmayan karakterler kullanın.

Örnek kodunu alma

Tasarım ve UX Yönergeleri

API başvurusu

  • Last updated on