Liste görünümü ve ızgara görünümü

Çoğu uygulama, görüntü galerisi veya e-posta iletileri kümesi gibi veri kümelerini işler ve görüntüler. XAML UI çerçevesi, uygulamanızda verileri görüntülemeyi ve işlemeyi kolaylaştıran ListView ve GridView denetimleri sağlar.

Uyarı

ListView ve GridView'un her ikisi de ListViewBase sınıfından türetilir, böylece aynı işlevlere sahip olurlar ancak verileri farklı görüntülerler. Bu makalede, liste görünümü hakkındaki tartışmalar, aksi belirtilmedikçe hem ListView hem de GridView denetimleri için geçerlidir. ListView veya ListViewItem gibi sınıflara başvurabiliriz, ancak Liste ön eki ilgili kılavuz eşdeğeri (GridView veya GridViewItem) için Grid ile değiştirilebilir.

ListView ve GridView denetimleri, koleksiyonlarla çalışırken birçok avantaj sağlar. Her ikisi de kolayca özelleştirilebilirken temel kullanıcı arabirimini, etkileşimi ve kaydırmayı uygulamak ve sağlamak kolaydır. Her ikisi de mevcut dinamik veri kaynaklarına veya XAML'nin kendisinde veya arka planda sağlanan sabit kodlanmış verilere bağlanabilir.

Her iki denetim de çeşitli senaryolarda kullanılmak üzere esnektir, ancak genel olarak tüm öğelerin aynı temel yapıya ve görünüme ve aynı etkileşim davranışına sahip olduğu koleksiyonlarla en iyi şekilde çalışır. Diğer bir ifadeyle, tıklandığında hepsi aynı eylemi gerçekleştirmelidir (örneğin, bir bağlantı açmak veya göz atmak için).

ListView ve GridView karşılaştırması

Liste Görünümü (ListView)

ListView denetimi, verileri tek bir sütunda dikey olarak yığılmış olarak görüntüler. ListView, odak noktası olarak metin içeren öğeler ve yukarıdan aşağıya okunacak koleksiyonlar (örneğin alfabetik olarak sıralanmış) için daha iyi çalışır. ListView için birkaç yaygın kullanım örneği, ileti listeleri ve arama sonuçları içerir. Koleksiyonları birden çok sütunda veya tablo benzeri bir biçimde görüntülemeniz gerekiyorsa ListView kullanmamalısınız . Bunun yerine DataGrid denetimi kullanmayı göz önünde bulundurun.

Kılavuz Görünümü

GridView denetimi, dikey olarak kaydırılabilir satır ve sütunlarda bir öğe koleksiyonu sunar. Veriler bir sütunu doldurana kadar yatay olarak yığılır ve sonra sütundaki bir sonraki satırla devam eder. GridView, odak noktası olarak görüntüleri olan veya öğeleri yan yana okunabilen veya belirli bir sırada sıralanmamış koleksiyonlar için daha iyi çalışır. GridView için yaygın bir kullanım örneği bir fotoğraf veya ürün galerisidir.

Hangi koleksiyon denetimini kullanmalısınız? ItemsRepeater ile Karşılaştırma

Hangisini kullanacağınıza karar vermeden önce bu denetim türleri arasındaki farkları anlamanız önemlidir.

ListView ve GridView

Özellik açısından zengin ListView ve GridView denetimleri çalışır. Özelleştirme gerektirmezler, ancak kolayca özelleştirilebilirler. Her birinin kendi yerleşik kullanıcı arabirimi ve UX'si vardır ve neredeyse her tür koleksiyonu olduğu gibi görüntüleyecek şekilde tasarlanmıştır.

Öğeler Tekrarlayıcısı

ItemsRepeater denetimi koleksiyonları görüntülemek için de kullanılır, ancak özel kullanıcı arabirimi gereksinimlerinize uygun özel denetim oluşturmak için bir yapı taşı olarak tasarlanmıştır. ListView ve GridView ile aynı yerleşik özelliklere ve işlevlere sahip olmadığından gerekli özellikleri veya etkileşimleri uygulamanız gerekir. ListView veya GridView kullanarak oluşturamadığınız yüksek oranda özelleştirilmiş bir kullanıcı arabiriminiz varsa veya veri kaynağınız her öğe için farklı davranış gerektiriyorsa ItemsRepeater kullanın.

Yönergeler ve API belgelerini okuyarak ItemsRepeater hakkında daha fazla bilgi edinin.

Liste görünümü veya ızgara görünümü oluştur

• Önemli API'ler: ListView sınıfı, GridView sınıfı, ItemsSource özelliği, Items özelliği

WinUI 3 Galeri uygulamasını açın ve ListView veya GridView'un nasıl çalıştığını görün.

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

ListView ve GridView her ikisi de ItemsControl türleridir, bu nedenle herhangi bir türde öğe koleksiyonu içerebilirler. Bir ListView veya GridView denetiminin ekranda herhangi bir şeyi görüntüleyebilmesi için Items koleksiyonunda önce öğeler olması gerekir. Görünümü doldurmak için öğeleri doğrudan koleksiyona ekleyebilir veya ItemsSource özelliğini bir veri kaynağına ayarlayabilirsiniz.

Dikkat

Listeyi doldurmak için Items veya ItemsSource özelliğini kullanabilirsiniz, ancak ikisini aynı anda kullanamazsınız. ItemsSource özelliğini ayarlayıp XAML'de bir öğe eklerseniz, eklenen öğe yoksayılır. ItemsSource özelliğini ayarlar ve koddaki Items koleksiyonuna bir öğe eklerseniz, bir hata oluşur.

Bu makaledeki örneklerin çoğu, kolaylık sağlamak için Items koleksiyonunu doğrudan doldurur. Ancak, bir listedeki öğelerin dinamik bir kaynaktan gelmesi daha yaygındır; örneğin, çevrimiçi veritabanındaki kitapların listesi. Bu amaç için ItemsSource özelliğini kullanırsınız.

ListView veya GridView denetimine öğe ekleme

Aynı sonucu vermek için XAML veya kod kullanarak ListView veya GridView Öğeleri koleksiyonuna öğe ekleyebilirsiniz. Değişmeyen ve kolayca tanımlanabilen az sayıda öğeniz varsa veya öğeleri çalışma zamanında kodda oluşturuyorsanız normalde XAML aracılığıyla öğe ekleyebilirsiniz.

Yöntem 1: Items koleksiyonuna öğe ekleme

• 1. Seçenek: XAML aracılığıyla öğe ekleme

  <!-- No corresponding C# code is needed for this example. -->
  
  <ListView x:Name="Fruits">
  <x:String>Apricot</x:String>
  <x:String>Banana</x:String>
  <x:String>Cherry</x:String>
  <x:String>Orange</x:String>
  <x:String>Strawberry</x:String>
  </ListView>
  

• 2. Seçenek: Kod aracılığıyla öğe ekleme

  <StackPanel Name="FruitsPanel"></StackPanel>
  

  // Create a new ListView and add content.
  ListView Fruits = new ListView();
  Fruits.Items.Add("Apricot");
  Fruits.Items.Add("Banana");
  Fruits.Items.Add("Cherry");
  Fruits.Items.Add("Orange");
  Fruits.Items.Add("Strawberry");
  
  // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file).
  FruitsPanel.Children.Add(Fruits);
  

Bu seçeneklerin her ikisi de burada gösterildiği gibi aynı liste görünümünü oluşturur:

Yöntem 2: ItemsSource özelliğini ayarlayarak öğe ekleme

Normalde veritabanı veya internet gibi bir kaynaktan verileri görüntülemek için ListView veya GridView kullanırsınız. Bir veri kaynağından ListView veya GridView denetimini doldurmak için ItemsSource özelliğini bir veri öğeleri koleksiyonuna ayarlarsınız. Aşağıdaki örneklerde gösterildiği gibi ListView veya GridView özel sınıf nesnelerini barındıracaksa bu yöntem daha iyi çalışır.

• Seçenek 1: Kodda ItemsSource ayarlama

  Burada ListView ItemsSource özelliği kodda doğrudan bir koleksiyonun örneğine ayarlanır.

  <StackPanel x:Name="ContactPanel"></StackPanel>
  

  // Class definition should be provided within the namespace being used, outside of any other classes.
  
  this.InitializeComponent();
  
  // Instead of adding hard coded items to an ObservableCollection as shown here,
  //the data could be pulled asynchronously from a database or the internet.
  ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();
  
  // You create Contact objects by providing a first name, last name, and company for the Contact constructor.
  // They are then added to the ObservableCollection Contacts.
  Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
  Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
  Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
  
  // Create a new ListView (or GridView) for the UI, and add content by setting ItemsSource
  ListView ContactsLV = new ListView();
  ContactsLV.ItemsSource = Contacts;
  
  // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file)
  ContactPanel.Children.Add(ContactsLV);
  

• Seçenek 2: XAML'de ItemsSource Ayarlama

  ItemsSource özelliğini XAML'deki bir koleksiyona da bağlayabilirsiniz. Burada ItemsSource, sayfanın _contacts adlı özel veri koleksiyonunu açıklayan Kişiler adlı bir halka açık özelliğe bağlıdır.

  <ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>
  

  // Provide a class definition within the namespace being used, outside of any other classes.
  // These two declarations belong outside the main page class.
  private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();
  
  public ObservableCollection<Contact> Contacts
  {
      get { return this._contacts; }
  }
  
  // Define this method within your main page class.
  protected override void OnNavigatedTo(NavigationEventArgs e)
  {
      base.OnNavigatedTo(e);
  
      // Instead of hard coded items, the data could be pulled
      // asynchronously from a database or the internet.
      Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
      Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
      Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
  }
  

Bu seçeneklerin her ikisi de aşağıdaki ekran görüntüsünde gösterildiği gibi aynı liste görünümünü oluşturur. (Bu alıştırma için bir veri şablonu tanımlanmadığından, liste görünümü her öğenin dize gösterimini gösterir.)

Önemli

Tanımlı veri şablonu olmadan, özel sınıf nesneleri liste görünümünde yalnızca tanımlı bir ToString yöntemine sahip olmaları durumunda dize değerleriyle birlikte görünür.

Sonraki bölümde, ListView veya GridView şablonunda basit ve özel sınıf öğelerinin düzgün bir şekilde nasıl görsel olarak temsili hakkında daha ayrıntılı bilgi edinilmiştir.

Veri bağlama hakkında daha fazla bilgi için bkz. Veri bağlamaya genel bakış.

Uyarı

Liste görünümünüzde gruplandırılmış verileri göstermeniz gerekiyorsa, bir CollectionViewSource sınıfına bağlamanız gerekir. CollectionViewSource, XAML'de koleksiyon sınıfı için ara sunucu işlevi görür ve gruplandırma desteğini etkinleştirir. Daha fazla bilgi için bkz. CollectionViewSource.

Veri şablonuyla görünümü özelleştirme

ListView veya GridView denetiminde veri şablonu kullanarak, öğelerin ve verilerin nasıl görselleştirilebileceğini tanımlayabilirsiniz. Varsayılan olarak, bir veri öğesi bağlı olduğu veri nesnesinin dize gösterimi olarak liste görünümünde görüntülenir. DisplayMemberPath değerini bu özelliğe ayarlayarak veri öğesinin belirli bir özelliğinin dize gösterimini gösterebilirsiniz.

Ancak normalde verilerinizin daha zengin bir sunumunun gösterilmesini isteyebilirsiniz. Liste görünümünde veya kılavuz görünümündeki öğelerin nasıl görüntüleneceğini belirtmek için bir DataTemplate sınıfı oluşturursunuz. DataTemplate'daki 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 satır içinde tanımlanan statik içeriğe sahip olabilirler.

Önemli

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

Basit bir ListView veri şablonu

Bu örnekte veri öğesi basit bir dizedir. Dizenin soluna resim eklemek ve dizeyi teal olarak görüntülemek için ListView tanımı içinde DataTemplate satır içi öğesini tanımlarsınız. Bu, yöntem 1 altında 1 seçeneğini kullanarak daha önce oluşturduğunuz ListView denetimiyle aynıdır.

<!--No corresponding code is needed for this example.-->
<ListView x:Name="FruitsList">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/placeholder.png" Width="32" Height="32"
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14"
                                Grid.Column="1" VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <x:String>Apricot</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
                <x:String>Orange</x:String>
                <x:String>Strawberry</x:String>
            </ListView>

Basit bir ListView veri şablonu uyguladığınızda veri öğeleri şu şekilde görüntülenir:

Özel sınıf nesneleri için ListView veri şablonu

Aşağıdaki örnekte veri öğesi bir Contact nesnesidir. Kişi görüntüsünü Kişi adı ve şirketin soluna eklemek için, ListView tanımı içinde Satır içi DataTemplate'ı tanımlarsınız. Bu ListView veri şablonu, daha önce gösterildiği gibi 2. seçenekte yöntem 2 altında oluşturulmuştur.

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
                    Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                <TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0"
                    Style="{ThemeResource BaseTextBlockStyle}"/>
                <TextBlock  Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6"
                    Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Özel sınıf nesneleri için ListView veri şablonu uyguladığınızda veri öğeleri şu şekilde görüntülenir:

ListView'unuzun görünümünü tanımlamanın birincil yolu veri şablonlarıdır. Listenizde çok sayıda öğe varsa performansı da önemli ölçüde etkileyebilir.

Veri şablonunuzu yukarıdaki kodda gösterildiği gibi ListView veya GridView tanımı içinde satır içi olarak veya Kaynaklar bölümünde ayrı olarak tanımlayabilirsiniz. Bunu ListView veya GridView tanımının dışında tanımlarsanız, veri şablonuna bir x:Key özniteliği vermeniz ve bu anahtarı kullanarak ListView veya GridView'un ItemTemplate özelliğine atamanız gerekir.

Listenizdeki veya kılavuzunuzdaki öğelerin görünümünü tanımlamak için veri şablonlarını ve öğe kapsayıcılarını kullanma hakkında daha fazla bilgi ve örnek için bkz . Öğe kapsayıcıları ve şablonları.

Öğelerin düzenini değiştirme

Bir ListView veya GridView denetimine öğe eklediğinizde, öğe kapsayıcısında her öğeyi otomatik olarak 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 ItemsPanel özelliğine bağlıdır.

• ListView varsayılan olarak, dikey bir liste oluşturan ItemsStackPanel kullanır:

  

• GridView, öğeleri yatay olarak ekleyen, dikey olarak sarıp kaydıran ItemsWrapGrid kullanır.

  

Öğeler panelindeki özellikleri ayarlayarak öğelerin düzenini değiştirebilir veya varsayılan paneli başka bir panelle değiştirebilirsiniz.

Uyarı

ItemsPanel'i değiştirirseniz, sanallaştırmayı devre dışı bırakmayın . Hem ItemsStackPanel hem de ItemsWrapGrid sanallaştırmayı desteklediğinden bu sınıfların kullanımı güvenlidir. Başka bir panel kullanıyorsanız, sanallaştırmayı devre dışı bırakabilir ve liste görünümünün performansını yavaşlatabilirsiniz. Daha fazla bilgi için Performans altındaki liste görünümü makalelerine bakın.

Bu örnekte, ItemsStackPanel'in Orientation özelliğini değiştirerek bir ListView denetiminin öğe kapsayıcılarını yatay bir listede nasıl yerleştirdiği gösterilir.

Liste görünümü varsayılan olarak dikey olarak kaydırdığından, liste görünümünün iç ScrollViewer'ını yatay kaydırmak için bazı özellikleri de ayarlamanız gerekir.

• ScrollViewer.HorizontalScrollMode Etkin veya Otomatikolarak değiştirin.
• ScrollViewer.HorizontalScrollBarVisibility öğesiniOtomatik olarak değiştirin.
• ScrollViewer.VerticalScrollMode değeriniDevre Dışı olarak değiştirin.
• ScrollViewer.VerticalScrollBarVisibility öğesiniGizli olarak değiştirin.

Önemli

Aşağıdaki örnekler liste görünümü genişliği kısıtlanmamış olarak gösterilir, bu nedenle yatay kaydırma çubukları görüntülenmez. Bu kodu çalıştırırsanız, ListView için kaydırma çubuklarını görüntülemek üzere Width="180" ayarlayabilirsiniz.

<ListView Height="60"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

Liste şu şekilde görüntülenir:

Sonraki örnekte, ListView öğeleri ItemsStackPanel yerine ItemsWrapGrid kullanarak dikey sarmalama listesinde sıralar.

Önemli

Denetimi kapsayıcıları sarmaya zorlamak için liste görünümünün yüksekliğini kısıtlamanız gerekir.

<ListView Height="100"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

Liste şu şekilde görüntülenir:

Gruplandırılmış verileri liste görünümünüzde gösterirseniz ItemsPanel, öğelerin nasıl düzenleneceğini değil, öğe gruplarının nasıl düzenleneceğini belirler. Örneğin, gruplandırılmış verileri göstermek için daha önce gösterilen yatay ItemsStackPanel'i kullanırsanız, gruplar yatay olarak düzenlenir, ancak her gruptaki öğeler burada gösterildiği gibi dikey olarak yığılır:

.

Öğe seçimi ve etkileşim

Kullanıcıların liste 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. IsItemClickEnabled özelliğini ayarlayarak kullanıcıların öğeyi seçmek yerine bir eylemi çağırmak için bir öğeye (örneğin, bir düğme) tıklamasını sağlayabilirsiniz.

Uyarı

Hem ListView hem de GridView, SelectionMode özellikleri için ListViewSelectionMode numaralandırmasını kullanır. IsItemClickEnabled varsayılan olarak False olarak ayarlandığından, yalnızca tıklama modunu etkinleştirmek için ayarlamanız gerekir.

Bu tablo, kullanıcının liste 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="None" IsItemClickEnabled="Yanlış"	Yok	Yok
Tek seçim	SelectionMode="Tek" IsItemClickEnabled="Yanlış"	SeçimDeğişti	SeçiliÖğe SelectedIndex (Seçilmiş Dizin)
Birden çok seçim	SeçimModu="Çoklu" IsItemClickEnabled="Yanlış"	SeçimDeğişti	Seçili Öğeler
Genişletilmiş seçim	SelectionMode="Genişletilmiş" IsItemClickEnabled="Yanlış"	SeçimDeğişti	Seçili Öğeler
Tık	SelectionMode="None" IsItemClickEnabled="Doğru"	Öğeye Tıklamak	Yok

Uyarı

SelectionMode ayarı Tek, Birden Çok veya Genişletilmiş iken bir ItemClick olayını tetiklemek için IsItemClickEnabled'ı etkinleştirebilirsiniz. Bunu yaparsanız, önce ItemClick olayı oluşturulur ve ardından SelectionChanged olayı oluşturulur. Bazı durumlarda (örneğin, ItemClick olay işleyicisinde başka bir sayfaya giderseniz), SelectionChanged olayı tetikilmez ve öğe seçilmez.

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

<ListView x:Name="myListView" SelectionMode="Multiple"/>

<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/>

myListView.SelectionMode = ListViewSelectionMode.Multiple;

myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;

Read-only

Öğe seçimini devre dışı bırakmak için SelectionMode özelliğini ListViewSelectionMode.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.

Tek seçim

Bu tabloda SelectionMode Tek olarak ayarlandığında klavye, 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 Tek olarak ayarlandığında, seçili veri öğesini SelectedItem özelliğinden alabilirsiniz. SelectedIndex özelliğini kullanarak seçili öğenin koleksiyonundaki dizini alabilirsiniz. Seçili öğe yoksa SelectedItem null, SelectedIndex ise -1 olur.

Items koleksiyonunda olmayan bir öğeyi SelectedItem olarak ayarlamaya çalışırsanız, işlem yoksayılır ve SelectedItem null olur. Ancak, SelectedIndex'i listedeki öğelerin aralığının dışında bir dizine ayarlamaya çalışırsanız, System.ArgumentException özel durumu oluşur.

Birden çok seçim

Bu tabloda SelectionMode birden çok olarak ayarlandığında klavye, 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.

Genişletilmiş seçim

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

Değiştirici tuş	Etkileşim
Hiç kimse	Davranış, Tek seçim ile 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 Birden Çok veya Genişletilmiş olarak ayarlandığında, SelectedItems özelliğinden seçili veri öğelerini alabilirsiniz.

SelectedIndex, SelectedItem ve SelectedItems özellikleri eşitlenir. Örneğin, SelectedIndex değerini -1 olarak ayarlarsanız, SelectedItem null ve SelectedItems boş olarak ayarlanır. SelectedItem değerini null olarak ayarlarsanız, SelectedIndex -1 olarak ayarlanır ve SelectedItems boş olur.

Çoklu seçim modunda SelectedItem ilk seçilen öğeyi, Selectedindex ise ilk seçilen öğenin dizinini içerir.

Seçim değişikliklerine yanıt verme

Liste görünümündeki seçim değişikliklerine yanıt vermek için SelectionChanged olayını işleyin. Olay işleyici kodunda, SelectionChangedEventArgs.AddedItems özelliğinden seçili öğelerin listesini alabilirsiniz. SelectionChangedEventArgs.RemovedItems özelliğinden seçimi kaldırılmış tüm öğeleri alabilirsiniz. AddedItems ve RemovedItems koleksiyonları, kullanıcılar Shift tuşunu basılı tutarak bir öğe aralığı seçmediği sürece en fazla bir öğe içerir.

Aşağıdaki örnek, SelectionChanged olayının nasıl işleneceğini ve çeşitli öğe koleksiyonlarına nasıl erişileceğini örneklemektedir.

<StackPanel HorizontalAlignment="Right">
    <ListView x:Name="listView1" SelectionMode="Multiple"
              SelectionChanged="ListView1_SelectionChanged">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
    <TextBlock x:Name="selectedItem"/>
    <TextBlock x:Name="selectedIndex"/>
    <TextBlock x:Name="selectedItemCount"/>
    <TextBlock x:Name="addedItems"/>
    <TextBlock x:Name="removedItems"/>
</StackPanel>

private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (listView1.SelectedItem != null)
    {
        selectedItem.Text =
            "Selected item: " + listView1.SelectedItem.ToString();
    }
    else
    {
        selectedItem.Text =
            "Selected item: null";
    }
    selectedIndex.Text =
        "Selected index: " + listView1.SelectedIndex.ToString();
    selectedItemCount.Text =
        "Items selected: " + listView1.SelectedItems.Count.ToString();
    addedItems.Text =
        "Added: " + e.AddedItems.Count.ToString();
    removedItems.Text =
        "Removed: " + e.RemovedItems.Count.ToString();
}

Tıklama modu

Liste görünümünü değiştirerek kullanıcıların düğmeleri ve diğer öğeleri seçmek yerine tıklamasını sağlayabilirsiniz. Örneğin, uygulamanız kullanıcılar liste veya kılavuzdaki bir öğeye tıkladığında yeni bir sayfa açarsa bu yararlı olur.

Bu davranışı etkinleştirmek için:

• SelectionMode değerini None olarak ayarlayın.
• IsItemClickEnabled değerini True olarak ayarlayın.
• Kullanıcılar bir öğeye tıkladığında, bir şey yapmak için ItemClick olayını işleyin.

Burada tıklanabilir öğelerin yer aldığı bir liste görünümü yer alır. ItemClick olay işleyicisindeki kod uygulamada yeni bir sayfa açar.

<ListView SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ListView1_ItemClick">
    <x:String>Page 1</x:String>
    <x:String>Page 2</x:String>
    <x:String>Page 3</x:String>
    <x:String>Page 4</x:String>
    <x:String>Page 5</x:String>
</ListView>

private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
    switch (e.ClickedItem.ToString())
    {
        case "Page 1":
            this.Frame.Navigate(typeof(Page1));
            break;

        case "Page 2":
            this.Frame.Navigate(typeof(Page2));
            break;

        case "Page 3":
            this.Frame.Navigate(typeof(Page3));
            break;

        case "Page 4":
            this.Frame.Navigate(typeof(Page4));
            break;

        case "Page 5":
            this.Frame.Navigate(typeof(Page5));
            break;

        default:
            break;
    }
}

Program aracılığıyla bir öğe aralığı seçin

Bazen bir ListView öğesi seçimini program aracılığıyla işlemeniz 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. Her bir öğe değişikliği SelectionChanged olayına yol açar ve dizin değerleriyle çalışmak yerine öğeler üzerinde doğrudan çalıştığınızda öğe sanallaştırmadan çıkarılır.

Seçimi değiştirmek için SelectAll, SelectRange ve DeselectRange yöntemlerini kullanmak SelectedItems özelliğini kullanmaktan daha verimlidir. Bu yöntemler, öğe dizini aralıklarını kullanarak öğeleri seçer (veya seçimini kaldırır). Yalnızca dizin kullanıldığından, sanallaştırılmış öğeler sanallaştırılmış olarak kalır. Belirtilen aralıktaki tüm öğeler, özgün seçim durumlarına bakılmaksızın seçilir (veya seçimi kaldırılır). SelectionChanged olayı, bu yöntemlere yapılan her çağrı için yalnızca bir kez gerçekleşir.

Önemli

Bu yöntemleri yalnızca SelectionMode özelliği Birden Çok veya Genişletilmiş olarak ayarlandığında çağırmalısınız. Seçim Modu Tek veya Hiçbiri olarak ayarlandığında SelectRange'i çağırırsanız, bir istisna oluşturulur.

Dizin aralıklarını kullanarak öğeleri seçtiğinizde, listedeki tüm seçili aralıkları almak için SelectedRanges özelliğini kullanın.

ItemsSource özelliği IItemsRangeInfo uygularsa ve seçimi değiştirmek için bu yöntemleri kullanırsanız, AddedItems ve RemovedItems özellikleri SelectionChangedEventArgs içinde ayarlanmamıştır. Bu özelliklerin ayarlanması, öğe nesnesinin sanallaştırmasını kaldırmayı gerektirir. Bunun yerine öğeleri almak için SelectedRanges özelliğini kullanın.

SelectAll yöntemini çağırarak koleksiyondaki tüm öğeleri seçebilirsiniz. Ancak, tüm öğelerin seçimini kaldırmak için karşılık gelen bir yöntem yoktur. DeselectRange çağrısı yaparak ve FirstIndex değeri 0 ve Uzunluk değeri koleksiyondaki öğe sayısına eşit olan bir ItemIndexRange geçirerek tüm öğelerin seçimini kaldırabilirsiniz. Bu, tüm öğeleri seçme seçeneğiyle birlikte aşağıdaki örnekte gösterilmiştir.

<StackPanel Width="160">
    <Button Content="Select all" Click="SelectAllButton_Click"/>
    <Button Content="Deselect all" Click="DeselectAllButton_Click"/>
    <ListView x:Name="listView1" SelectionMode="Multiple">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
</StackPanel>

private void SelectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.SelectAll();
    }
}

private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
    }
}

Seçili öğelerin görünümünü değiştirme hakkında bilgi için bkz.Öğe kapsayıcıları ve şablonları .

Sürükle ve Bırak

ListView ve GridView denetimleri, öğeleri kendi denetimlerinde ve kendileri ile diğer ListView ve GridView denetimleri arasında sürükleyip bırakmayı destekler. Sürükle ve bırak işlevini uygulama hakkında daha fazla bilgi için bkz . Sürükle ve bırak.

İlgili makaleler

• Listeleri
• Öğe kapsayıcıları ve şablonları
• Sürükle ve bırak