Öğeler görünümü

Bir albümdeki fotoğraflar veya ürün kataloğundaki öğeler gibi veri öğeleri koleksiyonunu görüntülemek için öğeler görünümünü kullanın.

Öğeler görünümü, liste görünümü ve kılavuz görünümü denetimlerine benzer ve bu denetimleri kullanacağınız çoğu durumda bunu kullanabilirsiniz. Öğeler görünümünün avantajlarından biri, öğe seçimini korurken düzeni anında değiştirebilmesidir.

Öğeler görünümü denetimi ItemsRepeater, ScrollView, ItemContainer ve ItemCollectionTransitionProvider bileşenleri kullanılarak oluşturulur, bu nedenle özel Düzen veya ItemCollectionTransitionProvider uygulamalarını ekleme özelliği sunar. Öğe görünümünün iç ScrollView denetimi, öğelerin kaydırılmasına ve yakınlaştırılmasına olanak tanır. Ayrıca, programlı kaydırmalar sırasında animasyonu denetleme özelliği gibi liste görünümü ve kılavuz görünümü tarafından kullanılan ScrollViewer denetiminde kullanılamayan özellikler de sunar.

Liste görünümü ve kılavuz görünümü denetimleri gibi öğeler görünümü de kullanıcı arabirimini ve veri sanallaştırmayı kullanabilir; klavye, fare, kalem ve dokunmatik girişi tutamacı; ve yerleşik erişilebilirlik desteğine sahiptir.

Doğru kontrol bu mu?

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

• Tüm öğelerin aynı görsel ve etkileşim davranışına sahip olması gereken bir koleksiyon görüntüleyin.
• Liste, kılavuz ve özel düzenler arasında geçiş yapma özelliğine sahip bir içerik koleksiyonu 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:
  • Storefront türü kullanıcı arabirimi (örn. göz atma uygulamaları, şarkılar, ürünler)
  • Etkileşimli fotoğraf kitaplıkları
  • Kişi listesi

Öğe görünümü oluşturma

• Önemli API'ler: ItemsView sınıfı, ItemsSource özelliği, ItemTemplate özelliği, LinedFlowLayout, StackLayout, UniformGridLayout

WinUI 3 Galeri uygulamasını açın ve ItemsView'ı çalışır durumda görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

ItemsView herhangi bir türde öğe koleksiyonunu gösterebilir. Görünümü doldurmak için ItemsSource özelliğini bir veri kaynağı olarak ayarlayın.

Uyarı

Diğer koleksiyon denetimlerinden farklı olarak ( ItemsControl'den türetilenler), ItemsView'da veri öğelerini doğrudan ekleyebileceğiniz bir Items özelliği yoktur.

Öğe kaynağını ayarlama

Genellikle veritabanı veya İnternet gibi bir kaynaktan verileri görüntülemek için öğeler görünümünü kullanırsınız. Bir veri kaynağından öğe görünümünü doldurmak için ItemsSource özelliğini bir veri öğeleri koleksiyonu olarak ayarlarsınız.

Kodda ItemsSource ayarlama

Burada, ItemsSource kodda doğrudan bir koleksiyonun örneğine ayarlanır.

 // Data source.
 List<String> itemsList = new List<string>();
 itemsList.Add("Item 1");
 itemsList.Add("Item 2");

 // Create a new ItemsView and set the data source.
 ItemsView itemsView1 = new ItemsView();
 itemsView1.ItemsSource = itemsList;

 // Add the ItemsView to a parent container in the visual tree.
 rootGrid.Children.Add(itemsView1);

XAML'de ItemsSource Bağlama

ItemsSource özelliğini XAML'deki bir koleksiyona da bağlayabilirsiniz. Daha fazla bilgi için bkz. XAML ile veri bağlama.

Önemli

DataTemplate içinde x:Bind işaretleme uzantısını kullandığınızda, veri şablonunda veri türünü (x:DataType) belirtmeniz gerekir.

Burada ItemsSource, özel veri nesneleri koleksiyonuna (türünde Photo) bağlıdır.

<ItemsView ItemsSource="{x:Bind Photos}">

</ItemsView>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        Photos = new ObservableCollection<Photo>();
        PopulatePhotos();
    }

    public ObservableCollection<Photo> Photos
    {
        get; private set;
    }


    private void PopulatePhotos()
    {
        // Populate the Photos collection. 
    }
}

public class Photo
{
    public BitmapImage PhotoBitmapImage { get; set; }
    public string Title { get; set; }
    public int Likes { get; set; }
}

Öğelerin görünümünü belirtme

Varsayılan olarak, öğeler görünümünde bir veri öğesi bağlı olduğu veri nesnesinin dize gösterimi olarak görüntülenir. Genellikle verilerinizin daha zengin bir sunumunun gösterilmesini istersiniz. Öğeler görünümündeki öğelerin tam olarak nasıl görüntüleneceğini belirtmek için bir DataTemplate oluşturursunuz. DataTemplate içindeki XAML, tek bir öğeyi görüntülemek için kullanılan denetimlerin düzenini ve görünümünü tanımlar. Düzendeki denetimler bir veri nesnesinin özelliklerine bağlanabilir veya statik içerik satır içinde tanımlanmış olabilir. DataTemplate, ItemsView denetiminin ItemTemplate özelliğine atanır.

Önemli

DataTemplate'ın kök öğesi bir ItemContainer olmalıdır; aksi takdirde, bir özel durum oluşturulur. ItemContainer, ItemsView tarafından öğe koleksiyonundaki tek bir öğenin seçim durumlarını ve diğer görselleştirmelerini göstermek için kullanılan bağımsız bir ilkel denetimdir.

Bu örnekte DataTemplate Page.Resources içinde tanımlanmıştır. Resmi göstermek için bir Görüntü denetimi ve alınan resim başlığını ve beğeni sayısını içeren bir katman içerir.

 <Page.Resources>
     <DataTemplate x:Key="PhotoItemTemplate" x:DataType="local:Photo">
         <ItemContainer AutomationProperties.Name="{x:Bind Title}">
             <Grid>
                 <Image Source="{x:Bind PhotoBitmapImage, Mode=OneWay}" 
                        Stretch="UniformToFill" MinWidth="70"
                        HorizontalAlignment="Center" VerticalAlignment="Center"/>
                 <StackPanel Orientation="Vertical" Height="40" Opacity=".75"
                             VerticalAlignment="Bottom" Padding="5,1,5,1" 
                             Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">
                     <TextBlock Text="{x:Bind Title}" 
                                Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="{x:Bind Likes}"
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                         <TextBlock Text=" Likes"
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                     </StackPanel>
                 </StackPanel>
             </Grid>
         </ItemContainer>
     </DataTemplate>
 </Page.Resources>

 <Grid x:Name="rootGrid">
     <ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400" 
                ItemTemplate="{StaticResource PhotoItemTemplate}">
     </ItemsView>
 </Grid>

Veri şablonu tarafından tanımlanan öğe düzeni şöyle görünür.

Öğelerin düzenini değiştirme

ItemsView denetimine öğe eklediğinizde, her öğeyi otomatik olarak bir ItemContainer'a sarmalar ve sonra tüm öğe kapsayıcılarını yerleştirir. Bu öğe kapsayıcılarının nasıl yerleştirildiğinde denetimin Layout özelliğine bağlıdır.

Geçerli düzendeki özellikleri ayarlayarak öğelerin düzenini değiştirebilir veya geçerli düzeni tamamen farklı bir düzenle değiştirebilirsiniz. Daha sonra açıklanan düzenlerden birini kullanabilir veya Layout sınıfından özel bir düzen türetebilirsiniz.

StackLayout

Varsayılan olarak, ItemsView burada varsayılan özellik ayarları ve basit bir görüntü şablonuyla gösterilen dikey bir liste oluşturan bir StackLayout kullanır.

Bu XAML, StackLayout içindeki öğeler arasındaki aralığı 5px olarak ayarlar.

<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400" 
           ItemTemplate="{StaticResource PhotoItemTemplate}">
    <ItemsView.Layout>
        <StackLayout Spacing="5"/>
    </ItemsView.Layout>
</ItemsView>

StackLayout, denetlenecek özellikler sağlar:

• düzenin dikey mi yoksa yatay mı (Yönlendirme) olup olmadığı
• öğe aralığı (Aralık)

Düzeni ItemTemplate ile birlikte kullanarak koleksiyonunuza gereksinimlerinize uygun çeşitli görünümler verebilirsiniz. Örneğin , WinUI Galerisi örneği StackLayout ile kullanılan ItemTemplate öğesini bu şekilde görünecek şekilde değiştirir.

LinedFlowLayout

LinedFlowLayout öğeleri soldan sağa, ardından üstten aşağıya doğru sıralı olarak kaydırma düzeninde konumlandırılır. Öğelerin sabit yüksekliğe ancak değişken genişliğe sahip olduğu bir öğe koleksiyonunu görüntülemek için bu düzeni kullanın. Bunu görüntü tabanlı koleksiyonlar için öneririz. Bu düzende ayrıca koleksiyonda öğeler eklendiğinde veya kaldırıldığında ve görünüm yeniden boyutlandırıldığında oynatılan yerleşik animasyonlar bulunur.

Aşağıda, çizgili akış düzeninde bir fotoğraf koleksiyonunu gösteren öğeler görünümü yer alır.

<ItemsView Width="500" Height="400" HorizontalAlignment="Left"
           ItemTemplate="{StaticResource LinedFlowLayoutItemTemplate}">
    <ItemsView.Layout>
        <LinedFlowLayout ItemsStretch="Fill" 
                         LineHeight="160" 
                         LineSpacing="5"
                         MinItemSpacing="5"/>
    </ItemsView.Layout>
</ItemsView>

LinedFlowLayout, denetlenecek özellikler sağlar:

• öğelerin boyutu ve aralığı (LineHeight, LineSpacing, MinItemSpacing)
• öğelerin yerleşimi (ItemsJustification, ItemsStretch)

UniformGridLayout

UniformGridLayout öğeleri kaydırma düzeninde soldan sağa veya yukarıdan aşağıya sıralı olarak (Yönlendirmeye bağlı olarak) konumlandırılır. Her öğe aynı boyuttadır.

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

<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400"
           ItemTemplate="{StaticResource PhotoItemTemplate}">
    <ItemsView.Layout>
        <UniformGridLayout MaximumRowsOrColumns="3" 
                           MinRowSpacing="5" 
                           MinColumnSpacing="5"/>
    </ItemsView.Layout>
</ItemsView>

UniformGridLayout, denetlenecek özellikler sağlar:

• düzenin satır veya sütun tabanlı olup olmadığı (Yönlendirme)
• satır veya sütun sayısı (MaximumRowsOrColumns)
• öğelerin boyutu ve aralığı (MinItemHeight, MinItemWidth, MinColumnSpacing, MinRowSpacing)
• öğelerin yerleşimi (ItemsJustification, ItemsStretch)

İpucu

Bu özelliklerin etkisini gerçek zamanlı olarak görmek için WinUI 3 Galeri uygulamasındaki etkileşimli tanıtımı kullanın.

Öğe seçimi ve etkileşim

Kullanıcıların öğeler görünümüyle etkileşim kurmasına izin vermek için çeşitli yollar arasından seçim yapabilirsiniz. Varsayılan olarak, kullanıcılar tek bir öğe seçebilir. Çoklu seçimi etkinleştirmek veya seçimi devre dışı bırakmak için SelectionMode özelliğini değiştirebilirsiniz. IsItemInvokedEnabled özelliğini, kullanıcıların öğeyi seçmek yerine eylem çağırmak için bir öğeye tıklaması için ayarlayabilirsiniz.

Bu tablo, kullanıcının öğeler görünümüyle etkileşim kurma yollarını ve etkileşime nasıl yanıt verebileceğinizi gösterir.

Bu etkileşimi etkinleştirmek için:	Şu ayarları kullanın:	Bu olayı ele al:	Seçili öğeyi almak için bu özelliği kullanın:
Etkileşim yok	SelectionMode="Yok" IsItemInvokedEnabled="False"	Yok	Yok
Tek seçim	SelectionMode="Tek" IsItemInvokedEnabled="False"	SeçimDeğişti	SeçiliÖğe
Birden çok seçim	SeçimModu="Çoklu" IsItemInvokedEnabled="False"	SeçimDeğişti	Seçili Öğeler
Genişletilmiş seçim	SelectionMode="Genişletilmiş" IsItemInvokedEnabled="False"	SeçimDeğişti	Seçili Öğeler
Tık	SeçimModu="None" IsItemInvokedEnabled="True"	ItemInvoked	Yok

Uyarı

SelectionMode da , Singleveya Multipleolarak ayarlanırken, Bir ItemInvoked olayı tetiklemek için IsItemInvokedEnabled'ı Extendedetkinleştirebilirsiniz. Bunu yaparsanız, önce ItemInvoked olayı oluşturulur ve ardından SelectionChanged olayı oluşturulur. Bazı durumlarda (örneğin, ItemInvoked olay işleyicisinde başka bir sayfaya giderseniz), SelectionChanged olayı tetiklenmez ve öğe seçilmez.

Bu özellikleri burada gösterildiği gibi XAML'de veya kodda ayarlayabilirsiniz:

<ItemsView x:Name="myItemsView" SelectionMode="None" IsItemInvokedEnabled="True"/>

myItemsView.SelectionMode = ItemsViewSelectionMode.None;
myItemsView.IsItemInvokedEnabled = true;

Read-only

Öğe seçimini devre dışı bırakmak için SelectionMode özelliğini ItemsViewSelectionMode.None olarak ayarlayabilirsiniz. Bu, denetimi salt okunur moda geçirir, böylece verileri görüntülemek için kullanılır, ancak bunlarla etkileşimde kullanılmaz. Başka bir ifadeyle, öğe seçimi devre dışı bırakılır, ancak denetimin kendisi devre dışı değildir.

Uyarı

Öğeler program aracılığıyla seçilebilir ve seçimi kaldırılabilir, ancak kullanıcı etkileşimi aracılığıyla seçilebilir.

Tek seçim

Bu tabloda SelectionMode olarak ayarlandığında Singleklavye, fare ve dokunma etkileşimleri açıklanmaktadır.

Değiştirici tuş	Etkileşim
Hiç kimse	Kullanıcılar boşluk çubuğunu, fare tıklamalarını veya dokunmalarını kullanarak tek bir öğe seçebilir.
Ctrl	Kullanıcılar, boşluk çubuğunu, fare tıklamalarını veya dokunmalarını kullanarak tek bir öğenin seçimini kaldırabilir. Kullanıcılar ok tuşlarını kullanarak odağı seçimden bağımsız olarak taşıyabilir.

SelectionMode olarak ayarlandığında Single, seçili veri öğesini SelectedItem özelliğinden alabilirsiniz. Seçili öğe yoksa SelectedItem olur null.

Items koleksiyonunda yer almayan bir öğeyi SelectedItem olarak ayarlamaya çalışırsanız, işlem yoksayılır ve SelectedItem olur null.

Seçimin varsayılan seçim göstergesi Single şöyle görünür.

Birden çok seçim

Bu tabloda SelectionMode olarak ayarlandığında Multipleklavye, fare ve dokunma etkileşimleri açıklanmaktadır.

Değiştirici tuş	Etkileşim
Hiç kimse	Kullanıcılar, odaklanmış öğeyi seçmek için boşluk çubuğunu, fare tıklamalarını veya dokunmalarını kullanarak birden çok öğe seçebilir. Kullanıcılar ok tuşlarını kullanarak odağı seçimlerinden bağımsız olarak taşıyabilir.
Vardiya	Kullanıcılar seçimdeki ilk öğeye tıklayarak veya dokunarak ve ardından seçimdeki son öğeye tıklayarak veya dokunarak birden çok bitişik öğe seçebilir. Kullanıcılar ok tuşlarını kullanarak Shift tuşunu seçtiklerinde seçilen öğeden başlayarak bitişik öğeleri seçebilir.

Seçimin varsayılan seçim göstergesi Multiple şöyle görünür.

Genişletilmiş seçim

Bu tabloda SelectionMode olarak ayarlandığında Extendedklavye, fare ve dokunma etkileşimleri açıklanmaktadır.

Değiştirici tuş	Etkileşim
Hiç kimse	Davranış, seçimle Single aynıdır.
Ctrl	Kullanıcılar, odaklanmış öğeyi seçmek için boşluk çubuğunu, fare tıklamalarını veya dokunmalarını kullanarak birden çok öğe seçebilir. Kullanıcılar ok tuşlarını kullanarak odağı seçimden bağımsız olarak taşıyabilir.
Vardiya	Kullanıcılar seçimdeki ilk öğeye tıklayarak veya dokunarak ve ardından seçimdeki son öğeye tıklayarak veya dokunarak birden çok bitişik öğe seçebilir. Kullanıcılar ok tuşlarını kullanarak Shift tuşunu seçtiklerinde seçilen öğeden başlayarak bitişik öğeleri seçebilir.

SelectionMode veya Multipleolarak ayarlandığındaExtended, seçili veri öğelerini SelectedItems özelliğinden alabilirsiniz.

SelectedItem ve SelectedItems özellikleri eşitlenir. Örneğin, SelectedItem değerini olarak nullayarlarsanız SelectedItems boş olur. Çoklu seçim modunda SelectedItem ilk seçilen öğeyi içerir.

Seçimin varsayılan seçim göstergesi Extended , seçimle Single aynıdır ve şuna benzer.

Öğe seçimini program aracılığıyla yönetme

Uyarı

Bu seçim yöntemleri SelectionMode özelliğini yoksayar ve SelectionMode veya Singleolduğunda None bile bir etkiye sahiptir.

Bazen ItemsView öğe seçimini program aracılığıyla değiştirmeniz gerekebilir. Örneğin, kullanıcıların listedeki tüm öğeleri seçmesine izin vermek için Tümünü seç düğmesini görüntüleyebilirsiniz. Bu durumda, SelectedItems koleksiyonuna öğeleri tek tek eklemek ve koleksiyonundan öğe kaldırmak genellikle çok verimli değildir. Seçimi değiştirmek için Select, SelectAll, Deselect ve InvertSelection yöntemlerini kullanmak SelectedItems özelliğini kullanmaktan daha verimlidir.

İpucu

SelectAll yöntemini çağırarak koleksiyondaki tüm öğeleri seçebilirsiniz. Tüm öğelerin seçimini kaldırmak için karşılık gelen bir yöntem yoktur. Ancak, SelectAll'ı ve ardından InvertSelection'ı çağırarak tüm öğelerin seçimini kaldırabilirsiniz.

Örnek kodunu alma

• WinUI Galerisi örneği - Tüm XAML denetimlerini etkileşimli biçimde görün.

İlgili makaleler

• liste için Yönergeleri
• ItemsView sınıfı
• StackLayout
• UniformGridLayout
• LinedFlowLayout