Öğe kapsayıcıları ve şablonları

ListView ve GridView denetimleri, öğelerinin nasıl düzenlendiğini (yatay, dikey, kaydırma vb...) ve bir kullanıcının öğelerle nasıl etkileşim kurdığını yönetir, ancak tek tek öğelerin ekranda nasıl gösterileceğini yönetmez. Öğe görselleştirmesi, öğe kapsayıcıları tarafından yönetilir. Liste görünümüne öğe eklediğinizde, bunlar otomatik olarak bir kapsayıcıya yerleştirilir. ListView için varsayılan öğe kapsayıcısı ListViewItem'dir; GridView için bu GridViewItem'dır.

Önemli API'ler: ListView sınıfı, GridView sınıfı, ListViewItem sınıfı, GridViewItem sınıfı, ItemTemplate özelliği, ItemContainerStyle özelliği

Uyarı

ListView ve GridView'un her ikisi de ListViewBase sınıfından türetilir, böylece aynı işlevlere sahip olur, ancak verileri farklı görüntüler. Bu makalede, liste görünümü hakkında konuştuğumuzda, bilgiler 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 öğeleri ve GridView öğeleri

Yukarıda belirtildiği gibi, ListView öğeleri otomatik olarak ListViewItem kapsayıcısına, GridView öğeleri de GridViewItem kapsayıcısına yerleştirilir. Bu öğe kapsayıcıları kendi yerleşik stil ve etkileşimlerine sahip denetimlerdir, ancak yüksek oranda özelleştirilebilir. Ancak özelleştirmeden önce, ListViewItem ve GridViewItem için önerilen stil ve yönergelere alışın.

• ListViewItems - Öğeler öncelikli olarak metin odaklıdır ve uzun bir şekle sahiptir. Metnin solunda simgeler veya resimler görünebilir.
• GridViewItems - Öğeler genellikle kare şeklindedir veya en azından uzun dikdörtgen şeklinden daha azdır. Öğeler görüntü odaklıdır ve metinler resmin çevresinde görünebilir veya üzerinde yer alabilir.

Özelleştirmeye giriş

Kapsayıcı denetimleri (ListViewItem ve GridViewItem gibi), bir öğe için gösterilen son görselleri oluşturmak için birleştirilen iki önemli bölümden oluşur: veri şablonu ve denetim şablonu.

• Veri şablonu - Tek tek veri öğelerinin nasıl gösterileceğini belirtmek için liste görünümünün ItemTemplate özelliğine bir DataTemplate atarsınız.
• Denetim şablonu - Denetim şablonu, görsel durumlar gibi çerçevenin sorumlu olduğu öğe görselleştirmesinin bir bölümünü sağlar. Denetim şablonunu değiştirmek için ItemContainerStyle özelliğini kullanabilirsiniz. Bunu genellikle liste görünümü renklerini markanızla eşleşecek şekilde değiştirmek veya seçili öğelerin gösterilme şeklini değiştirmek için yaparsınız.

Bu görüntüde, denetim şablonunun ve veri şablonunun bir öğe için son görseli oluşturmak üzere nasıl bir araya getirildiği gösterilir.

Bu öğeyi oluşturan XAML aşağıdadır. Şablonları daha sonra açıklayacağız.

<ListView Width="220" SelectionMode="Multiple">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid Background="Yellow">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="54"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="Assets/placeholder.png" Width="44" Height="44"
                       HorizontalAlignment="Left"/>
                <TextBlock Text="{x:Bind}" Foreground="Black"
                           FontSize="14" Grid.Column="1"
                           VerticalAlignment="Center"
                           Padding="0,0,54,0"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="LightGreen"/>
        </Style>
    </ListView.ItemContainerStyle>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

Önemli

Veri şablonları ve denetim şablonları, ListView ve GridView dışında birçok denetimin stilini özelleştirmek için kullanılır. Bunlar FlipView gibi kendi yerleşik stiline sahip denetimleri ve ItemsRepeater gibi özel olarak oluşturulmuş denetimleri içerir. Aşağıdaki örnek ListView/GridView'a özgü olsa da, kavramlar diğer birçok denetime uygulanabilir.

Önkoşullar

• Liste görünümü denetimini kullanmayı bildiğinizi varsayıyoruz. Daha fazla bilgi için ListView ve GridView makalesine bakın.
• Ayrıca, satır içi veya kaynak olarak stil kullanma dahil olmak üzere denetim stillerini ve şablonlarını anladığınızı varsayıyoruz. Daha fazla bilgi için bkz . Stil denetimleri ve Denetim şablonları.

Veriler

Liste görünümünde veri öğelerinin nasıl gösterileceğine daha ayrıntılı bir şekilde bakmadan önce gösterilecek verileri anlamamız gerekir. Bu örnekte adlı NamedColorbir veri türü oluşturacağız. Renk için renk adını, renk değerini ve SolidColorBrush'ı birleştirir. Bu renk, 3 özellik olarak gösterilir: Name, Colorve Brush.

Ardından Bir Liste'yiNamedColor sınıfındaki her adlandırılmış renk için bir nesneyle doldururuz. Liste, liste görünümü için ItemsSource olarak ayarlanır.

Sınıfı tanımlamak ve listeyi doldurmak için kod aşağıdadır NamedColors .

C#

using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using Windows.UI;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

namespace ColorsListApp
{
    public sealed partial class MainPage : Page
    {
        // The list of colors won't change after it's populated, so we use List<T>. 
        // If the data can change, we should use an ObservableCollection<T> intead.
        List<NamedColor> NamedColors = new List<NamedColor>();

        public MainPage()
        {
            this.InitializeComponent();

            // Use reflection to get all the properties of the Colors class.
            IEnumerable<PropertyInfo> propertyInfos = typeof(Colors).GetRuntimeProperties();

            // For each property, create a NamedColor with the property name (color name),
            // and property value (color value). Add it the NamedColors list.
            for (int i = 0; i < propertyInfos.Count(); i++)
            {
                NamedColors.Add(new NamedColor(propertyInfos.ElementAt(i).Name,
                                    (Color)propertyInfos.ElementAt(i).GetValue(null)));
            }

            colorsListView.ItemsSource = NamedColors;
        }
    }

    class NamedColor
    {
        public NamedColor(string colorName, Color colorValue)
        {
            Name = colorName;
            Color = colorValue;
        }

        public string Name { get; set; }

        public Color Color { get; set; }

        public SolidColorBrush Brush
        {
            get { return new SolidColorBrush(Color); }
        }
    }
}

Veri şablonu

Liste görünümüne veri öğenizin nasıl gösterileceğini bildirmek için bir veri şablonu belirtirsiniz.

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. 'NamedColors' verilerini, liste görünümüne nasıl görüneceğini söylemeden bir liste görünümünde gösterirseniz, toString yönteminin döndürdüğü her şeyi gösterir.

XAML

<ListView x:Name="colorsListView"/>

DisplayMemberPath değerini bu özelliğe ayarlayarak veri öğesinin belirli bir özelliğinin dize gösterimini gösterebilirsiniz. Burada, Name öğesinin NamedColor özelliğine DisplayMemberPath'i ayarlarsınız.

XAML

<ListView x:Name="colorsListView" DisplayMemberPath="Name" />

Liste görünümü artık burada gösterildiği gibi öğeleri ada göre görüntüler. Daha kullanışlıdır, ancak çok ilginç değildir ve çok fazla bilgiyi gizli bırakır.

Genellikle verilerinizin daha zengin bir sunumunun gösterilmesini istersiniz. Liste 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'ı liste denetiminin ItemTemplate özelliğine atarsınız.

Önemli

ItemTemplate ve DisplayMemberPath'i aynı anda kullanamazsınız. Her iki özellik de ayarlanırsa bir özel durum oluşur.

Burada, renk adı ve RGB değerleriyle birlikte öğenin renginde bir Dikdörtgen gösteren bir DataTemplate tanımlarsınız.

Uyarı

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

XAML

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:NamedColor">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="54"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Rectangle Width="44" Height="44" Fill="{x:Bind Brush}" Grid.RowSpan="2"/>
                <TextBlock Text="{x:Bind Name}" Grid.Column="1" Grid.ColumnSpan="4"/>
                <TextBlock Text="{x:Bind Color.R}" Grid.Column="1" Grid.Row="1" Foreground="Red"/>
                <TextBlock Text="{x:Bind Color.G}" Grid.Column="2" Grid.Row="1" Foreground="Green"/>
                <TextBlock Text="{x:Bind Color.B}" Grid.Column="3" Grid.Row="1" Foreground="Blue"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Veri öğeleri bu veri şablonuyla görüntülendiğinde şöyle görünür.

Önemli

ListViewItem'lerin varsayılan olarak içeriği sola hizalanır; yani HorizontalContentAlignmentProperty değeri Sol olarak ayarlanır. Bir ListViewItem içinde yatay olarak yığılmış öğeler veya aynı Kılavuz satırına yerleştirilen öğeler gibi yatay olarak bitişik birden çok öğeniz varsa, bunların tümü sola hizalanır ve yalnızca tanımlı kenar boşluklarıyla ayrılır.

Öğelerin ListItem'in tüm gövdesini dolduracak şekilde yayılması için, ListView içinde bir Ayarlayıcı kullanarak HorizontalContentAlignmentProperty değerini Esnetme olarak ayarlamanız gerekir:

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.ItemContainerStyle>

GridView'da verileri göstermek isteyebilirsiniz. Burada, verileri kılavuz düzenine daha uygun bir şekilde görüntüleyen başka bir veri şablonu yer alır. Bu sefer, veri şablonu, GridView için XAML ile satır içi yerine bir kaynak olarak tanımlanır.

XAML

<Page.Resources>
    <DataTemplate x:Key="namedColorItemGridTemplate" x:DataType="local:NamedColor">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="96"/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
    
            <Rectangle Width="96" Height="96" Fill="{x:Bind Brush}" Grid.ColumnSpan="3" />
            <!-- Name -->
            <Border Background="#AAFFFFFF" Grid.ColumnSpan="3" Height="40" VerticalAlignment="Top">
                <TextBlock Text="{x:Bind Name}" TextWrapping="Wrap" Margin="4,0,0,0"/>
            </Border>
            <!-- RGB -->
            <Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
            <TextBlock Text="{x:Bind Color.R}" Foreground="Red"
                   Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.G}" Foreground="Green"
                   Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
                   Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>
            <!-- HEX -->
            <Border Background="Gray" Grid.Row="2" Grid.ColumnSpan="3">
                <TextBlock Text="{x:Bind Color}" Foreground="White" Margin="4,0,0,0"/>
            </Border>
        </Grid>
    </DataTemplate>
</Page.Resources>

...

<GridView x:Name="colorsGridView" 
          ItemTemplate="{StaticResource namedColorItemGridTemplate}"/>

Veriler bu veri şablonu kullanılarak bir ızgarada gösterildiğinde şöyle bir görünüm alır.

Performansla ilgili dikkat edilmesi gerekenler

Veri şablonları, liste görünümünüzün görünümünü tanımlamanın birincil yoludur. Listeniz çok fazla sayıda öğe görüntülüyorsa performans üzerinde önemli bir etkiye de sahip olabilirler.

Liste görünümündeki her öğe için bir veri şablonundaki her XAML öğesinin bir örneği oluşturulur. Örneğin, önceki örnekteki kılavuz şablonunda 10 XAML öğesi (1 Kılavuz, 1 Dikdörtgen, 3 Kenarlık, 5 Metin Bloğu) vardır. Bu veri şablonunu kullanarak ekranda 20 öğe gösteren GridView en az 200 öğe (20*10=200) oluşturur. Veri şablonundaki öğe sayısını azaltmak, liste görünümünüz için oluşturulan toplam öğe sayısını büyük ölçüde azaltabilir. Daha fazla bilgi için bkz. ListView ve GridView kullanıcı arabirimi iyileştirmesi: Öğe başına öğe sayısını azaltma.

Kılavuz veri şablonunun bu bölümünü göz önünde bulundurun. Şimdi öğe sayısını azaltan birkaç şeye göz atalım.

XAML

<!-- RGB -->
<Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
<TextBlock Text="{x:Bind Color.R}" Foreground="Red"
           Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.G}" Foreground="Green"
           Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
           Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>

• İlk olarak, düzende tek bir Izgara kullanılır. Tek sütunlu bir Grid'e sahip olabilir ve bu 3 TextBlock'u bir StackPanel'e yerleştirebilirsiniz, ancak birçok kez oluşturulan bir veri şablonunda, düzen panellerini diğer düzen panellerine eklemekten kaçınmanın yollarını aramalısınız.
• İkincisi, Kenarlık öğesi içine gerçekten öğe yerleştirmeden bir arka plan oluşturmak için Kenarlık denetimini kullanabilirsiniz. Border öğesi yalnızca bir alt öğeye sahip olabileceğinden, XAML'deki Border öğesinde 3 TextBlock öğesini barındırmak için ek bir düzen paneli eklemeniz gerekir. TextBlocks'ı Kenarlık'ın alt öğeleri yapmadığınızda, TextBlocks'ı tutmak için bir panel gereksinimini ortadan kaldırırsınız.
• Son olarak, TextBlocks'ı bir StackPanel içine yerleştirebilir ve kenarlık özelliklerini açık bir Border öğesi kullanmak yerine StackPanel üzerinde ayarlayabilirsiniz. Ancak Border öğesi StackPanel'den daha basit bir denetimdir, bu nedenle birçok kez işlendiğinde performans üzerinde daha az etkiye sahiptir.

Farklı öğeler için farklı düzenler kullanma

Denetim şablonu

Öğenin denetim şablonu, seçim, işaretçi üzerine gelme ve odaklanma gibi durumları görüntüleyen görselleri içerir. Bu görseller veri şablonunun üstünde veya altında işlenir. ListView denetim şablonu tarafından çizilen yaygın varsayılan görsellerden bazıları burada gösterilmiştir.

• Hover: Veri şablonunun altına çizilmiş açık gri bir dikdörtgen.
• Seçim: Veri şablonunun altına çizilmiş açık mavi bir dikdörtgen.
• Klavye odağı– Öğe şablonunun üzerine çizilmiş Yüksek Görünürlük Odağı Görseli .

Liste görünümü, ekranda işlenen son görselleri oluşturmak için veri şablonu ve denetim şablonundaki öğeleri birleştirir. Burada, durum görselleri liste görünümü bağlamında gösterilir.

ListViewItemPresenter

Daha önce veri şablonlarıyla ilgili olarak belirttiğimiz gibi, her öğe için oluşturulan XAML öğelerinin sayısı liste görünümünün performansı üzerinde önemli bir etkiye sahip olabilir. Veri şablonu ve denetim şablonu her öğeyi görüntülemek için birleştirildiğinden, bir öğeyi görüntülemek için gereken öğelerin gerçek sayısı her iki şablondaki öğeleri de içerir.

ListView ve GridView denetimleri, öğe başına oluşturulan XAML öğelerinin sayısını azaltmak için iyileştirilmiştir. ListViewItem görselleri, çok sayıda UIElement yükü olmadan odak, seçim ve diğer görsel durumlarına yönelik karmaşık görselleri görüntüleyen özel bir XAML öğesi olan ListViewItemPresenter tarafından oluşturulur.

Uyarı

WinUI uygulamalarında hem ListViewItem hem de GridViewItemListViewItemPresenter kullanır; GridViewItemPresenter kullanım dışıdır ve kullanmamalısınız. ListViewItem ve GridViewItem, farklı varsayılan görünümler elde etmek için ListViewItemPresenter'da farklı özellik değerleri ayarlar.)

Öğe kapsayıcısının görünümünü değiştirmek için ItemContainerStyle özelliğini kullanın ve TargetType değerinin ListViewItem veya GridViewItem olarak ayarlandığı bir Stil sağlayın.

Bu örnekte, listedeki öğeler arasında biraz boşluk oluşturmak için ListViewItem'a doldurma eklersiniz.

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <!-- DataTemplate XAML shown in previous ListView example -->
    </ListView.ItemTemplate>

    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0,4"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Artık liste görünümü, öğeler arasındaki boşlukla şuna benzer.

ListViewItem varsayılan stilinde ListViewItemPresenter ContentMargin özelliği, ListViewItem Padding özelliğine ( ) bir <ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/> özelliğine sahiptir. Padding özelliğini ayarladığınızda, bu değer gerçekten ListViewItemPresenter ContentMargin özelliğine geçiriliyor.

ListViewItems özelliklerine bağlı şablon olmayan diğer ListViewItemPresenter özelliklerini değiştirmek için, ListViewItem'ı üzerinde özellikleri değiştirebileceğiniz yeni bir ListViewItemPresenter ile yeniden düşünmeniz gerekir.

Uyarı

ListViewItem ve GridViewItem varsayılan stilleri ListViewItemPresenter'da birçok özellik ayarlar. Her zaman varsayılan stilin bir kopyasıyla başlamalı ve yalnızca ihtiyacınız olan özellikleri değiştirmelisiniz. Aksi takdirde, bazı özellikler doğru ayarlanmayacağı için görseller büyük olasılıkla beklediğiniz gibi gösterilmez.

Visual Studio'da varsayılan şablonun kopyasını oluşturmak için

1. Belge Ana Hattı bölmesini açın (Diğer Windows Belge Ana Hatlarını > Görüntüle>).
2. Değiştireceğiniz liste veya kılavuz öğesini seçin. Bu örnekte, colorsGridView öğesini değiştirirsiniz.
3. Sağ tıklayın ve Ek Şablonları Düzenle > Oluşturulan Öğe Kapsayıcısını Düzenle (ItemContainerStyle) > Bir Kopyasını Düzenle seçeneğini seçin.
4. Stil Kaynağı Oluştur iletişim kutusunda, stil için bir ad girin. Bu örnekte, kullanırsınız colorsGridViewItemStyle.

Varsayılan stilin bir kopyası uygulamanıza kaynak olarak eklenir ve bu XAML'de gösterildiği gibi GridView.ItemContainerStyle özelliği bu kaynağa ayarlanır.

<Style x:Key="colorsGridViewItemStyle" TargetType="GridViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Margin" Value="0,0,4,4"/>
    <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
    <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <ListViewItemPresenter 
                    CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                    ContentMargin="{TemplateBinding Padding}" 
                    CheckMode="Overlay" 
                    ContentTransitions="{TemplateBinding ContentTransitions}" 
                    CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}" 
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                    FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" 
                    FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                    PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" 
                    ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" 
                    SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" 
                    SelectionCheckMarkVisualEnabled="True" 
                    SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" 
                    SelectedBackground="{ThemeResource SystemControlHighlightAccentBrush}" 
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

...

<GridView x:Name="colorsGridView" ItemContainerStyle="{StaticResource colorsGridViewItemStyle}"/>

Artık ListViewItemPresenter'daki özellikleri değiştirerek görsel durumların seçim onay kutusunu, öğe konumlandırmasını ve fırça renklerini denetleyebilirsiniz.

Satır içi ve Katman seçim görselleri

ListView ve GridView, seçili öğeleri denetime ve SelectionMode'a bağlı olarak farklı şekillerde gösterir. Liste görünümü seçimi hakkında daha fazla bilgi için bkz. ListView ve GridView.

SelectionModeBirden Çok olarak ayarlandığında, öğenin denetim şablonunun bir parçası olarak bir seçim onay kutusu gösterilir. Birden çok seçim modunda seçim onay kutusunu kapatmak için SelectionCheckMarkVisualEnabled özelliğini kullanabilirsiniz. Ancak, bu özellik diğer seçim modlarında yoksayılır, bu nedenle Genişletilmiş veya Tek seçim modunda onay kutusunu açamazsınız.

Onay kutusunun satır içi stili veya katman stili kullanılarak gösterilip gösterilmeyeceğini belirtmek için CheckMode özelliğini ayarlayabilirsiniz.

• Satır İçi: Bu stil, içeriğin solundaki onay kutusunu gösterir ve seçimi belirtmek için öğe kapsayıcısının arka planını renklendirir. Bu, ListView için varsayılan stildir.
• Kaplama: Bu stil, içeriğin üzerinde onay kutusunu gösterir ve seçim belirtmek için yalnızca öğe kapsayıcısının kenarını renklendirir. Bu, GridView için varsayılan stildir.

Bu tabloda, seçimi belirtmek için kullanılan varsayılan görseller gösterilir.

Seçim Modu	Tek/Genişletilmiş	Multiple
Satır içi
Kaplama

Uyarı

Bu ve aşağıdaki örneklerde, basit dize veri öğeleri, denetim şablonu tarafından sağlanan görselleri vurgulayan veri şablonları olmadan gösterilir.

Onay kutusunun renklerini değiştirmek için çeşitli fırça özellikleri de vardır. Şimdi bunları diğer fırça özellikleriyle birlikte inceleyeceğiz.

Fırçalar

Özelliklerin çoğu farklı görsel durumlar için kullanılan fırçaları belirtir. Bunları markanızın rengiyle eşleşecek şekilde değiştirmek isteyebilirsiniz.

Bu tabloda ListViewItem için Ortak ve Seçim görsel durumları ve her durum için görselleri işlemek için kullanılan fırçalar gösterilir. Görüntüler, fırçaların hem iç içe hem de üst üste bindirme seçim görsel stilleri üzerindeki etkilerini gösterir.

Uyarı

Bu tabloda, fırçalar için değiştirilen renk değerleri renkler olarak sabit olarak kodlanır ve renkler şablonda uygulandığı yeri daha belirgin hale getirmek için seçilir. Bunlar görsel durumlarının varsayılan renkleri değildir. Uygulamanızda varsayılan renkleri değiştirirseniz, varsayılan şablonda olduğu gibi renk değerlerini değiştirmek için fırça kaynaklarını kullanmanız gerekir.

Durum/Fırça adı	Satır içi stil	Katman stili
Normal CheckBoxBrush="Red"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Kırmızı"
Basılı PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Kırmızı"
Seçilmiş SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Yeşil" CheckBoxBrush="Kırmızı" (yalnızca satır içi)
PointerOverSelected SelectedPointerOverBackground="Lavender" SelectedForeground="Navy" SelectedBackground="Khaki" (yalnızca katman) CheckBrush="Yeşil" CheckBoxBrush="Kırmızı" (yalnızca satır içi)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (yalnızca katman) CheckBrush="Yeşil" CheckBoxBrush="Kırmızı" (yalnızca satır içi)
Odaklanmış FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Kırmızı"

ListViewItemPresenter, veri yer tutucuları ve sürükleme durumları için başka fırça özelliklerine sahiptir. Liste görünümünüzde artımlı yükleme veya sürükleyip bırakma kullanıyorsanız, bu ek fırça özelliklerini de değiştirmeniz gerekip gerekmediğini düşünmeniz gerekir. Değiştirebileceğiniz özelliklerin tam listesi için ListViewItemPresenter sınıfına bakın.

Genişletilmiş XAML öğesi şablonları

ListViewItemPresenter özellikleri tarafından izin verilenden daha fazla değişiklik yapmanız gerekiyorsa , örneğin onay kutusunun konumunu değiştirmeniz gerekiyorsa, ListViewItemExpanded veya GridViewItemExpanded şablonlarını kullanabilirsiniz. Bu şablonlar generic.xaml dosyasındaki varsayılan stiller ile birlikte sunulur. Tek tek UIElement'lerden tüm görselleri derlemeye yönelik standart XAML desenini izler.

Daha önce belirtildiği gibi, bir öğe şablonundaki UIElement sayısı liste görünümünüzün performansı üzerinde önemli bir etkiye sahiptir. ListViewItemPresenter'ın genişletilmiş XAML şablonlarıyla değiştirilmesi öğe sayısını büyük ölçüde artırır ve liste görünümünüz çok fazla sayıda öğe gösterdiğinde veya performans sorun olduğunda önerilmez.

Uyarı

ListViewItemPresenter yalnızca liste görünümünün ItemsPanel öğesi bir ItemsWrapGrid veya ItemsStackPanel olduğunda desteklenir. ItemsPanel'i VariableSizedWrapGrid, WrapGrid veya StackPanel kullanacak şekilde değiştirirseniz, öğe şablonu otomatik olarak genişletilmiş XAML şablonuna geçirilir. Daha fazla bilgi için bkz. ListView ve GridView kullanıcı arabirimi iyileştirme.

Genişletilmiş bir XAML şablonunu özelleştirmek için, bunun bir kopyasını uygulamanızda oluşturmanız ve ItemContainerStyle özelliğini kopyanıza ayarlamanız gerekir.

Genişletilmiş şablonu kopyalamak için

1. ListView veya GridView için burada gösterildiği gibi ItemContainerStyle özelliğini ayarlayın.

   <ListView ItemContainerStyle="{StaticResource ListViewItemExpanded}"/>
   <GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"/>
   

2. Visual Studio Özellikleri bölmesinde Çeşitli bölümünü genişletin ve ItemContainerStyle özelliğini bulun. (ListView veya GridView'un seçili olduğundan emin olun.)

3. ItemContainerStyle özelliğinin özellik işaretçisine tıklayın. (TextBox'ın yanındaki küçük kutu. StaticResource olarak ayarlandığını göstermek için yeşil renktedir.) Özellik menüsü açılır.

4. Özellik menüsünde Yeni Kaynağa Dönüştür'e tıklayın.

   

5. Stil Kaynağı Oluştur iletişim kutusunda kaynak için bir ad girin ve Tamam'a tıklayın.

Uygulamanızda generic.xaml dosyasından genişletilmiş şablonun bir kopyası oluşturulur ve bunu gerektiği gibi değiştirebilirsiniz.

İlgili makaleler

• Listeleri
• ListView ve GridView