Kontainer dan templat item

Kontrol ListView dan GridView mengelola bagaimana itemnya disusun (horizontal, vertikal, pembungkusan, dll...) dan bagaimana pengguna berinteraksi dengan item, tetapi bukan bagaimana masing-masing item ditampilkan di layar. Visualisasi item dikelola oleh kontainer item. Saat Anda menambahkan item ke tampilan daftar, item tersebut secara otomatis ditempatkan dalam kontainer. Kontainer item default untuk ListView adalah ListViewItem; untuk GridView, itu adalah GridViewItem.

API Penting: kelas ListView, kelas GridView, kelas ListViewItem, kelas GridViewItem, properti ItemTemplate, properti ItemContainerStyle

Catatan

ListView dan GridView keduanya berasal dari kelas ListViewBase , sehingga mereka memiliki fungsionalitas yang sama, tetapi menampilkan data secara berbeda. Dalam artikel ini, saat kita berbicara tentang tampilan daftar, info berlaku untuk kontrol ListView dan GridView kecuali ditentukan lain. Kami dapat merujuk ke kelas seperti ListView atau ListViewItem, tetapi awalan Daftar dapat diganti dengan Grid untuk kisi yang sesuai yang setara (GridView atau GridViewItem).

Item ListView dan item GridView

Seperti disebutkan di atas, item ListView secara otomatis ditempatkan ke dalam kontainer ListViewItem, dan item GridView ditempatkan ke dalam kontainer GridViewItem. Kontainer item ini adalah kontrol yang memiliki gaya dan interaksi bawaan mereka sendiri, tetapi juga dapat sangat disesuaikan. Namun, sebelum penyesuaian, pastikan untuk memalsukan diri Anda dengan gaya dan panduan yang direkomendasikan untuk ListViewItem dan GridViewItem:

• ListViewItems - Item terutama berfokus pada teks, dan memanjang dalam bentuk. Ikon atau gambar mungkin muncul di sebelah kiri teks.
• GridViewItems - Item biasanya berbentuk persegi, atau setidaknya kurang dari bentuk persegi panjang yang memanjang. Item berfokus pada gambar, dan mungkin teks muncul di sekitar atau dilapisi pada gambar.

Pengantar kustomisasi

Kontrol kontainer (seperti ListViewItem dan GridViewItem) terdiri dari dua bagian penting yang digabungkan untuk membuat visual akhir yang ditampilkan untuk item: templat data dan templat kontrol.

• Templat data - Anda menetapkan DataTemplate ke properti ItemTemplate dari tampilan daftar untuk menentukan bagaimana item data individual ditampilkan.
• Templat kontrol - Templat kontrol menyediakan bagian dari visualisasi item yang bertanggung jawab untuk kerangka kerja, seperti status visual. Anda dapat menggunakan properti ItemContainerStyle untuk mengubah templat kontrol. Biasanya, Anda melakukan ini untuk memodifikasi warna tampilan daftar agar sesuai dengan merek Anda, atau mengubah cara item yang dipilih ditampilkan.

Gambar ini memperlihatkan bagaimana templat kontrol dan templat data digabungkan untuk membuat visual akhir untuk item.

Berikut adalah XAML yang membuat item ini. Kami menjelaskan templat nanti.

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

Penting

Templat data dan templat kontrol digunakan untuk menyesuaikan gaya untuk banyak kontrol selain ListView dan GridView. Ini termasuk kontrol dengan gaya bawaan mereka sendiri, seperti FlipView, dan kontrol yang dibuat khusus, seperti ItemsRepeater. Meskipun contoh di bawah ini khusus untuk ListView/GridView, konsepnya dapat diterapkan ke banyak kontrol lainnya.

Prasyarat

• Kami berasumsi bahwa Anda tahu cara menggunakan kontrol tampilan daftar. Untuk informasi selengkapnya, lihat artikel ListView dan GridView .
• Kami juga berasumsi bahwa Anda memahami gaya dan templat kontrol, termasuk cara menggunakan gaya sebaris atau sebagai sumber daya. Untuk informasi selengkapnya, lihat Kontrol gaya dan Templat kontrol.

Data

Sebelum kita melihat lebih dalam cara menampilkan item data dalam tampilan daftar, kita perlu memahami data yang akan ditampilkan. Dalam contoh ini, kami membuat jenis data yang disebut NamedColor. Ini menggabungkan nama warna, nilai warna, dan SolidColorBrush untuk warna, yang diekspos sebagai 3 properti: Name, Color, dan Brush.

Kami kemudian mengisi Daftar dengan NamedColor objek untuk setiap warna bernama di kelas Warna . Daftar diatur sebagai ItemsSource untuk tampilan daftar.

Berikut adalah kode untuk menentukan kelas dan mengisi NamedColors daftar.

C#

using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.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); }
        }
    }
}

Templat data

Anda menentukan templat data untuk memberi tahu tampilan daftar bagaimana item data Anda harus ditampilkan.

Secara default, item data ditampilkan dalam tampilan daftar sebagai representasi string objek data yang terikat. Jika Anda menampilkan data 'NamedColors' dalam tampilan daftar tanpa memberi tahu tampilan daftar bagaimana tampilannya, itu hanya menampilkan apa pun yang dikembalikan metode ToString , seperti ini.

XAML

<ListView x:Name="colorsListView"/>

Anda dapat menampilkan representasi string dari properti tertentu dari item data dengan mengatur DisplayMemberPath ke properti tersebut. Di sini, Anda mengatur DisplayMemberPath ke Name properti NamedColor item.

XAML

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

Tampilan daftar sekarang menampilkan item menurut nama, seperti yang diperlihatkan di sini. Ini lebih berguna, tetapi tidak terlalu menarik dan meninggalkan banyak informasi tersembunyi.

Anda biasanya ingin memperlihatkan presentasi data Anda yang lebih kaya. Untuk menentukan dengan tepat bagaimana item dalam tampilan daftar ditampilkan, Anda membuat DataTemplate. XAML dalam DataTemplate menentukan tata letak dan tampilan kontrol yang digunakan untuk menampilkan item individual. Kontrol dalam tata letak dapat terikat ke properti objek data, atau memiliki konten statis yang ditentukan sebaris. Anda menetapkan DataTemplate ke properti ItemTemplate dari kontrol daftar.

Penting

Anda tidak dapat menggunakan ItemTemplate dan DisplayMemberPath secara bersamaan. Jika kedua properti diatur, pengecualian terjadi.

Di sini, Anda menentukan DataTemplate yang memperlihatkan Persegi panjang dalam warna item, bersama dengan nama warna dan nilai RGB.

Catatan

Saat Anda menggunakan ekstensi markup x:Bind di DataTemplate, Anda harus menentukan DataType (x:DataType) pada DataTemplate.

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>

Berikut tampilan item data saat ditampilkan dengan templat data ini.

Penting

ListViewItems secara default memiliki konten yang diratakan ke kiri, yaitu HorizontalContentAlignmentProperty mereka diatur ke Kiri. Jika Anda memiliki beberapa elemen dalam ListViewItem yang berdekatan secara horizontal, seperti elemen atau elemen yang ditumpuk secara horizontal yang ditempatkan di baris Kisi yang sama, semuanya akan rata kiri dan hanya dipisahkan oleh margin yang ditentukan.

Agar elemen menyebar untuk mengisi seluruh isi ListItem, Anda harus mengatur HorizontalContentAlignmentProperty ke Stretch dengan menggunakan Setter di dalam ListView Anda:

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

Anda mungkin ingin menampilkan data dalam GridView. Berikut adalah templat data lain yang menampilkan data dengan cara yang lebih sesuai untuk tata letak kisi. Kali ini, templat data didefinisikan sebagai sumber daya daripada sebaris dengan XAML untuk GridView.

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}"/>

Saat data ditampilkan dalam kisi menggunakan templat data ini, data terlihat seperti ini.

Pertimbangan performa

Templat data adalah cara utama Anda menentukan tampilan tampilan daftar Anda. Mereka juga dapat berdampak signifikan pada performa jika daftar Anda menampilkan sejumlah besar item.

Instans setiap elemen XAML dalam templat data dibuat untuk setiap item dalam tampilan daftar. Misalnya, templat kisi dalam contoh sebelumnya memiliki 10 elemen XAML (1 Kisi, 1 Persegi Panjang, 3 Batas, 5 Blok Teks). GridView yang menampilkan 20 item di layar menggunakan templat data ini membuat setidaknya 200 elemen (20*10=200). Mengurangi jumlah elemen dalam templat data dapat sangat mengurangi jumlah total elemen yang dibuat untuk tampilan daftar Anda. Untuk informasi selengkapnya, lihat Pengoptimalan UI ListView dan GridView: Pengurangan jumlah elemen per item.

Pertimbangkan bagian templat data kisi ini. Mari kita lihat beberapa hal yang mengurangi jumlah elemen.

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

• Pertama, tata letak menggunakan satu Kisi. Anda bisa memiliki Kisi kolom tunggal dan menempatkan 3 TextBlocks ini di StackPanel, tetapi dalam templat data yang dibuat berkali-kali, Anda harus mencari cara untuk menghindari penyematan panel tata letak dalam panel tata letak lainnya.
• Kedua, Anda dapat menggunakan kontrol Batas untuk merender latar belakang tanpa benar-benar menempatkan item dalam elemen Batas. Elemen Border hanya dapat memiliki satu elemen turunan, jadi Anda perlu menambahkan panel tata letak tambahan untuk menghosting 3 elemen TextBlock dalam elemen Border di XAML. Dengan tidak membuat anak-anak TextBlocks dari Border, Anda menghilangkan kebutuhan panel untuk menahan TextBlocks.
• Terakhir, Anda dapat menempatkan TextBlocks di dalam StackPanel, dan mengatur properti batas pada StackPanel daripada menggunakan elemen Border eksplisit. Namun, elemen Border adalah kontrol yang lebih ringan daripada StackPanel, sehingga kurang berdampak pada performa ketika dirender berkali-kali lipat.

Menggunakan tata letak yang berbeda untuk item yang berbeda

Templat kontrol

Templat kontrol item berisi visual yang menampilkan status, seperti pilihan, penunjuk, dan fokus. Visual ini dirender baik di atas atau di bawah templat data. Beberapa visual default umum yang digambar oleh templat kontrol ListView diperlihatkan di sini.

• Mengambang – Persegi panjang abu-abu muda yang digambar di bawah templat data.
• Pilihan – Persegi panjang biru muda yang digambar di bawah templat data.
• Fokus keyboard– Visual Fokus Visibilitas Tinggi yang digambar di atas templat item.

Tampilan daftar menggabungkan elemen dari templat data dan templat kontrol untuk membuat visual akhir yang dirender di layar. Di sini, visual status ditampilkan dalam konteks tampilan daftar.

ListViewItemPresenter

Seperti yang kami catat sebelumnya tentang templat data, jumlah elemen XAML yang dibuat untuk setiap item dapat berdampak signifikan pada performa tampilan daftar. Karena templat data dan templat kontrol digabungkan untuk menampilkan setiap item, jumlah elemen aktual yang diperlukan untuk menampilkan item menyertakan elemen di kedua templat.

Kontrol ListView dan GridView dioptimalkan untuk mengurangi jumlah elemen XAML yang dibuat per item. Visual ListViewItem dibuat oleh ListViewItemPresenter, yang merupakan elemen XAML khusus yang menampilkan visual kompleks untuk fokus, pemilihan, dan status visual lainnya, tanpa overhead banyak UIElements.

Catatan

Di aplikasi UWP untuk Windows, ListViewItem dan GridViewItem menggunakan ListViewItemPresenter; GridViewItemPresenter tidak digunakan lagi dan Anda tidak boleh menggunakannya. ListViewItem dan GridViewItem menetapkan nilai properti yang berbeda di ListViewItemPresenter untuk mencapai tampilan default yang berbeda.)

Untuk mengubah tampilan kontainer item, gunakan properti ItemContainerStyle dan berikan Gaya dengan TargetType-nya diatur ke ListViewItem atau GridViewItem.

Dalam contoh ini, Anda menambahkan padding ke ListViewItem untuk membuat beberapa ruang di antara item dalam daftar.

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

Sekarang tampilan daftar terlihat seperti ini dengan spasi di antara item.

Dalam gaya default ListViewItem, properti ListViewItemPresenter ContentMargin memiliki TemplateBinding ke properti ListViewItem Padding (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>). Ketika kita mengatur properti Padding, nilai tersebut benar-benar diteruskan ke properti ListViewItemPresenter ContentMargin.

Untuk mengubah properti ListViewItemPresenter lain yang tidak terikat templat ke properti ListViewItems, Anda perlu mengganti ListViewItem dengan ListViewItemPresenter baru yang dapat Anda ubah propertinya.

Catatan

Gaya default ListViewItem dan GridViewItem mengatur banyak properti di ListViewItemPresenter. Anda harus selalu memulai dengan salinan gaya default dan hanya memodifikasi properti yang Anda butuhkan juga. Jika tidak, visual mungkin tidak akan muncul seperti yang Anda harapkan karena beberapa properti tidak akan diatur dengan benar.

Untuk membuat salinan templat default di Visual Studio

1. Buka panel Kerangka Dokumen (Lihat > Kerangka Dokumen Windows > Lainnya).
2. Pilih elemen daftar atau kisi untuk diubah. Dalam contoh ini, Anda memodifikasi colorsGridView elemen .
3. Klik kanan dan pilih Edit Templat > Tambahan Edit Kontainer Item yang Dihasilkan (ItemKontainerStyle) > Edit Salinan.
4. Dalam dialog Buat Sumber Daya Gaya, masukkan nama untuk gaya tersebut. Dalam contoh ini, Anda menggunakan colorsGridViewItemStyle.

Salinan gaya default ditambahkan ke aplikasi Anda sebagai sumber daya, dan properti GridView.ItemContainerStyle diatur ke sumber daya tersebut, seperti yang ditunjukkan dalam XAML ini.

<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}"/>

Sekarang Anda dapat mengubah properti di ListViewItemPresenter untuk mengontrol kotak centang pilihan, posisi item, dan warna kuas untuk status visual.

Visual pemilihan Sebaris dan Overlay

ListView dan GridView menunjukkan item yang dipilih dengan cara yang berbeda tergantung pada kontrol dan SelectionMode. Untuk informasi selengkapnya tentang pilihan tampilan daftar, lihat ListView dan GridView.

Saat SelectionMode diatur ke Beberapa, kotak centang pilihan ditampilkan sebagai bagian dari templat kontrol item. Anda bisa menggunakan properti SelectionCheckMarkVisualEnabled untuk menonaktifkan kotak centang pilihan dalam mode Beberapa pilihan. Namun, properti ini diabaikan dalam mode pilihan lain, sehingga Anda tidak dapat mengaktifkan kotak centang dalam mode Pilihan diperluas atau Tunggal.

Anda dapat mengatur properti CheckMode untuk menentukan apakah kotak centang diperlihatkan menggunakan gaya sebaris atau gaya overlay.

• Sebaris: Gaya ini memperlihatkan kotak centang di sebelah kiri konten, dan mewarnai latar belakang kontainer item untuk menunjukkan pilihan. Ini adalah gaya default untuk ListView.
• Overlay: Gaya ini memperlihatkan kotak centang di atas konten, dan hanya mewarnai batas kontainer item untuk menunjukkan pilihan. Ini adalah gaya default untuk GridView.

Tabel ini memperlihatkan visual default yang digunakan untuk menunjukkan pilihan.

SelectionMode:	Tunggal/Diperluas	Beberapa
Sebaris
Overlay

Catatan

Dalam contoh ini dan berikut, item data string sederhana ditampilkan tanpa templat data untuk menekankan visual yang disediakan oleh templat kontrol.

Ada juga beberapa properti kuas untuk mengubah warna kotak centang. Kita akan melihat ini selanjutnya bersama dengan properti kuas lainnya.

Kuas

Banyak properti menentukan kuas yang digunakan untuk status visual yang berbeda. Anda mungkin ingin memodifikasinya agar sesuai dengan warna merek Anda.

Tabel ini memperlihatkan status visual Umum dan Pilihan untuk ListViewItem, dan kuas yang digunakan untuk merender visual untuk setiap status. Gambar menunjukkan efek kuas pada gaya visual pemilihan sebaris dan overlay.

Catatan

Dalam tabel ini, nilai warna yang dimodifikasi untuk kuas diberi hardcode warna bernama dan warna dipilih untuk membuatnya lebih jelas di mana mereka diterapkan dalam templat. Ini bukan warna default untuk status visual. Jika Anda memodifikasi warna default di aplikasi, Anda harus menggunakan sumber daya kuas untuk memodifikasi nilai warna seperti yang dilakukan di templat default.

Nama Status/Sikat	Gaya sebaris	Gaya overlay
Normal Kotak CentangBrush="Merah"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" Kotak CentangBrush="Merah"
Ditekan PressedBackground="LightCyan" PointerOverForeground="DarkOrange" Kotak CentangBrush="Merah"
Dipilih SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Hijau" CheckBoxBrush="Red" (hanya sebaris)
PointerOverSelected SelectedPointerOverBackground="Lavender" SelectedForeground="Navy" SelectedBackground="Khaki" (hanya overlay) CheckBrush="Hijau" CheckBoxBrush="Red" (hanya sebaris)
DitekanPilih SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (hanya overlay) CheckBrush="Hijau" CheckBoxBrush="Red" (hanya sebaris)
Terfokus FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" Kotak CentangBrush="Merah"

ListViewItemPresenter memiliki properti kuas lain untuk tempat penampung data dan menyeret status. Jika Anda menggunakan pemuatan inkremental atau menyeret dan meletakkan dalam tampilan daftar Anda, Anda harus mempertimbangkan apakah Anda juga perlu memodifikasi properti kuas tambahan ini. Lihat kelas ListViewItemPresenter untuk daftar lengkap properti yang dapat Anda ubah.

Templat item XAML yang diperluas

Jika Anda perlu membuat lebih banyak modifikasi daripada yang diizinkan oleh properti ListViewItemPresenter - jika Anda perlu mengubah posisi kotak centang, misalnya - Anda dapat menggunakan templat ListViewItemExpanded atau GridViewItemExpanded . Templat ini disertakan dengan gaya default dalam generic.xaml. Mereka mengikuti pola XAML standar untuk membangun semua visual dari masing-masing UIElements.

Seperti disebutkan sebelumnya, jumlah UIElements dalam templat item berdampak signifikan pada performa tampilan daftar Anda. Mengganti ListViewItemPresenter dengan templat XAML yang diperluas sangat meningkatkan jumlah elemen, dan tidak disarankan saat tampilan daftar Anda akan menampilkan sejumlah besar item atau saat performa menjadi perhatian.

Catatan

ListViewItemPresenter hanya didukung saat ItemPanel tampilan daftar adalah ItemWrapGrid atau ItemsStackPanel. Jika Anda mengubah ItemsPanel untuk menggunakan VariableSizedWrapGrid, WrapGrid, atau StackPanel, maka templat item secara otomatis dialihkan ke templat XAML yang diperluas. Untuk informasi selengkapnya, lihat Pengoptimalan UI ListView dan GridView.

Untuk menyesuaikan templat XAML yang diperluas, Anda perlu membuat salinannya di aplikasi Anda, dan mengatur properti ItemContainerStyle ke salinan Anda.

Untuk menyalin templat yang diperluas

1. Atur properti ItemContainerStyle seperti yang diperlihatkan di sini untuk ListView atau GridView Anda.

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

2. Di panel Properti Visual Studio, perluas bagian Lain-lain dan temukan properti ItemContainerStyle. (Pastikan ListView atau GridView dipilih.)

3. Klik penanda properti untuk properti ItemContainerStyle. (Ini adalah kotak kecil di samping Kotak Teks. Warnanya hijau untuk menunjukkan bahwa warnanya diatur ke StaticResource.) Menu properti terbuka.

4. Di menu properti, klik Konversi ke Sumber Daya Baru.

   

5. Dalam dialog Buat Sumber Daya Gaya, masukkan nama untuk sumber daya dan klik OK.

Salinan templat yang diperluas dari generic.xaml dibuat di aplikasi Anda, yang dapat Anda ubah sesuai kebutuhan.

Artikel terkait

• Daftar
• ListView dan GridView