Bagikan melalui

TampilanDaftar (ListView)

ListView Kontrol menyediakan infrastruktur untuk menampilkan sekumpulan item data menggunakan tata letak atau tampilan yang berbeda. Misalnya, Anda mungkin ingin menampilkan item data dalam tabel dan juga mengurutkan kolomnya.

ListView berasal dari ListBox. Biasanya, itemnya adalah anggota pengumpulan data dan direpresentasikan sebagai ListViewItem objek. A ListViewItem adalah ContentControl dan hanya dapat berisi satu elemen turunan. Namun, elemen turunan tersebut dapat menjadi elemen visual apa pun.

Cuplikan layar memperlihatkan ListView dengan output GridView yang menampilkan informasi file.

Nota

Jenis yang dirujuk dalam artikel ini tersedia di bagian Referensi kode .

Tabel berikut ini mencantumkan tugas umum untuk bekerja dengan kontrol ListView:

Judul Description
Mengurutkan Kolom Tampilan Kisi Saat Header Diklik Pelajari cara mengurutkan kolom GridView saat header diklik.
Membuat Mode Tampilan Kustom untuk ListView Pelajari cara membuat mode tampilan kustom untuk ListView.
Menggunakan Templat untuk Menata Tampilan Daftar yang Menggunakan GridView Pelajari cara menggunakan templat untuk menata ListView yang menggunakan GridView.
Membuat Gaya untuk Header Kolom Tampilan Kisi yang Diseret Pelajari cara membuat gaya untuk header kolom GridView yang di-drag.
Tampilkan Konten Tampilan Daftar dengan Menggunakan GridView Pelajari cara menampilkan konten ListView menggunakan GridView.
Gunakan Pemicu untuk Menata Item Terpilih dalam Tampilan Daftar Pelajari cara menggunakan pemicu untuk menata item yang dipilih dalam ListView.
Membuat ListViewItems dengan Kotak Centang Pelajari cara membuat ListViewItems dengan Kotak Centang.
Menampilkan Data dengan Menggunakan GridViewRowPresenter Pelajari cara menampilkan data menggunakan GridViewRowPresenter.
Mengelompokkan Item dalam ListView yang Mengimplementasikan GridView Pelajari cara mengelompokkan item dalam ListView yang mengimplementasikan GridView.
Menata Baris dalam ListView yang Mengimplementasikan GridView Pelajari cara menata baris dalam ListView yang mengimplementasikan GridView.
Mengubah Perataan Horizontal Kolom dalam Tampilan Daftar Pelajari cara mengubah perataan horizontal kolom dalam ListView.
Menangani Event MouseDoubleClick untuk Setiap Item dalam ListView Pelajari cara menangani peristiwa MouseDoubleClick untuk setiap item dalam ListView.

Gaya dan templat

Anda dapat memodifikasi default ControlTemplate untuk memberi kontrol tampilan yang unik. Untuk informasi selengkapnya, lihat Apa itu gaya dan templat? dan Cara membuat templat untuk kontrol.

Properti konten

Kontrol ListView menggunakan Items properti sebagai properti kontennya. Properti ini memungkinkan Anda menentukan item yang ditampilkan dalam kontrol.

Bagian

ListView Kontrol tidak menentukan bagian templat bernama apa pun.

Saat Anda membuat ControlTemplate untuk ListView, templat Anda mungkin berisi ItemsPresenter dalam ScrollViewer. ItemsPresenter menampilkan setiap item di ListView; ScrollViewer memungkinkan pengguliran dalam kontrol. ItemsPresenter Jika bukan anak langsung dari ScrollViewer, Anda harus memberikan ItemsPresenter nama, ItemsPresenter.

Keadaan visual

Tabel berikut mencantumkan status visual untuk ListView kontrol.

Nama VisualState Nama VisualStateGroup Description
Sah StatusValidasi Kontrol valid dan tidak memiliki kesalahan validasi.
FokusTidakValid StatusValidasi Kontrol memiliki kesalahan validasi dan memiliki fokus keyboard.
Tidak valid dan Tidak Difokuskan StatusValidasi Kontrol memiliki kesalahan validasi tetapi tidak memiliki fokus keyboard.

Tabel berikut mencantumkan status untuk ListViewItem kontrol.

Nama VisualState Nama VisualStateGroup Description
Biasa CommonStates Keadaan default.
Disabled CommonStates Kontrol dinonaktifkan.
MouseOver CommonStates Penunjuk mouse berada di atas pengendali.
Terfokus FocusStates Kontrol memiliki fokus keyboard.
Tidak fokus FocusStates Kontrol tidak memiliki fokus keyboard.
Dipilih SelectionStates Item saat ini dipilih.
Tidak dipilih SelectionStates Item tidak dipilih.
DipilihTidak fokus SelectionStates Objek dipilih tetapi tidak memiliki fokus keyboard.
Sah StatusValidasi Kontrol valid dan tidak memiliki kesalahan validasi.
FokusTidakValid StatusValidasi Kontrol memiliki kesalahan validasi dan memiliki fokus keyboard.
Tidak valid dan Tidak Difokuskan StatusValidasi Kontrol memiliki kesalahan validasi tetapi tidak memiliki fokus keyboard.

Mode Tampilan

Untuk menentukan mode tampilan untuk konten ListView kontrol, atur View properti . Satu mode tampilan yang disediakan Windows Presentation Foundation (WPF) adalah GridView, yang menampilkan kumpulan item data dalam tabel yang memiliki kolom yang dapat disesuaikan.

Contoh berikut menunjukkan cara menentukan GridView untuk ListView kontrol yang menampilkan informasi karyawan.


<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource}}">

    <ListView.View>

        <GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Employee Information">

            <GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>

            <GridViewColumn DisplayMemberBinding="{Binding Path=LastName}" Width="100">
                <GridViewColumnHeader>Last Name
                    <GridViewColumnHeader.ContextMenu>
                        <ContextMenu MenuItem.Click="LastNameCM_Click" Name="LastNameCM">
                            <MenuItem Header="Ascending" />
                            <MenuItem Header="Descending" />
                        </ContextMenu>
                    </GridViewColumnHeader.ContextMenu>
                </GridViewColumnHeader>
            </GridViewColumn>

            <GridViewColumn DisplayMemberBinding="{Binding Path=EmployeeNumber}" Header="Employee No." Width="100"/>
        </GridView>

    </ListView.View>
</ListView>

Anda dapat membuat mode tampilan kustom dengan menentukan kelas yang mewarisi dari ViewBase kelas. Kelas ini ViewBase menyediakan infrastruktur yang Anda butuhkan untuk membuat tampilan kustom. Untuk informasi selengkapnya tentang cara membuat tampilan kustom, lihat Membuat Mode Tampilan Kustom untuk ListView.

Mode tampilan yang dapat dibagikan

Dua ListView kontrol tidak dapat berbagi mode tampilan yang sama secara bersamaan. Jika Anda mencoba menggunakan mode tampilan yang sama dengan lebih dari satu ListView kontrol, pengecualian terjadi. Untuk menentukan mode tampilan yang dapat digunakan secara bersamaan oleh lebih dari satu ListView, gunakan templat atau gaya.

Pengikatan data

Items dan ItemsSource Gunakan properti untuk menentukan item untuk kontrol ListView. Contoh berikut mengatur properti ItemsSource ke kumpulan data bernama EmployeeInfoDataSource.

<ListView ItemsSource="{Binding Source={StaticResource EmployeeInfoDataSource}}">

Dalam GridView, objek GridViewColumn terikat ke bidang data tertentu. Contoh berikut mengikat GridViewColumn objek ke bidang data dengan menentukan Binding untuk DisplayMemberBinding properti .

GridViewColumn gvc1 = new GridViewColumn();
gvc1.DisplayMemberBinding = new Binding("FirstName");
gvc1.Header = "FirstName";
gvc1.Width = 100;

Dim gvc1 As New GridViewColumn()
gvc1.DisplayMemberBinding = New Binding("FirstName")
gvc1.Header = "FirstName"
gvc1.Width = 100

<GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>

Anda juga dapat menentukan Binding sebagai bagian DataTemplate dari definisi yang Anda gunakan untuk menata sel dalam kolom. Dalam contoh berikut, DataTemplate diidentifikasi dengan ResourceKey yang mengatur Binding untuk GridViewColumn. Perhatikan bahwa contoh ini tidak menentukan DisplayMemberBinding karena melakukannya lebih diutamakan daripada CellTemplate.

<DataTemplate x:Key="myCellTemplateMonth">
  <DockPanel>
    <TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
      <TextBlock.Text>
        <Binding Path="Month"/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

<GridViewColumn Header="Month" Width="80"
      CellTemplate="{StaticResource myCellTemplateMonth}"/>

Kontrol Styling ListView

Kontrol ListView berisi ListViewItem objek, yang mewakili item data yang ditampilkan. Anda bisa menggunakan properti berikut untuk menentukan konten dan gaya item data:

Untuk menghindari masalah perataan antara sel dalam GridView, jangan gunakan ItemContainerStyle untuk mengatur properti atau menambahkan konten yang memengaruhi lebar item dalam ListView. Misalnya, masalah perataan dapat terjadi saat Anda menyetel properti Margin di ItemContainerStyle. Untuk menentukan properti atau menentukan konten yang memengaruhi lebar item dalam GridView, gunakan properti GridView kelas dan kelas terkaitnya, seperti GridViewColumn. Untuk informasi selengkapnya tentang cara menggunakan GridView dan kelas pendukungnya, lihat Gambaran Umum GridView.

Jika Anda menentukan ItemContainerStyle untuk ListView kontrol dan juga menentukan ItemTemplate, Anda harus menyertakan ContentPresenter dalam gaya agar ItemTemplate berfungsi dengan benar.

Jangan gunakan properti HorizontalContentAlignment dan VerticalContentAlignment untuk konten ListView yang ditampilkan oleh GridView. Untuk menentukan perataan konten dalam kolom GridView, tentukan CellTemplate.

Referensi kode

Objek berikut dirujuk dalam artikel ini:

  • EmployeeInfoDataSource pengumpulan data. Jika Anda menggunakan Visual Basic .NET, Window elemen dinyatakan sedikit berbeda dari apa yang Anda lihat dalam kode contoh:

    <Window x:Class="SDKSample.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="OnLoad"
        xmlns:ds="clr-namespace:SDKSample">

    <Window.Resources>
        <ObjectDataProvider x:Key="EmployeeInfoDataSource" ObjectType="{x:Type ds:myEmployees}" />
    </Window.Resources>

  • kelas EmployeeInfo, yang digunakan sebagai jenis untuk kumpulan data EmployeeInfoDataSource.

    public class EmployeeInfo
{
    private string _firstName;
    private string _lastName;
    private string _employeeNumber;

    public string FirstName
    {
        get {return _firstName;}
        set {_firstName = value;}
    }

    public string LastName
    {
        get {return _lastName;}
        set {_lastName = value;}
    }

    public string EmployeeNumber
    {
        get {return _employeeNumber;}
        set {_employeeNumber = value;}
    }

    public EmployeeInfo(string firstname, string lastname, string empnumber)
    {
        _firstName = firstname;
        _lastName = lastname;
        _employeeNumber = empnumber;
    }
}

    Public Class EmployeeInfo
    Private _firstName As String
    Private _lastName As String
    Private _employeeNumber As String

    Public Property FirstName() As String
        Get
            Return _firstName
        End Get
        Set(ByVal value As String)
            _firstName = value
        End Set
    End Property

    Public Property LastName() As String
        Get
            Return _lastName
        End Get
        Set(ByVal value As String)
            _lastName = value
        End Set
    End Property

    Public Property EmployeeNumber() As String
        Get
            Return _employeeNumber
        End Get
        Set(ByVal value As String)
            _employeeNumber = value
        End Set
    End Property

    Public Sub New(ByVal firstname As String, ByVal lastname As String, ByVal empnumber As String)
        _firstName = firstname
        _lastName = lastname
        _employeeNumber = empnumber
    End Sub
End Class

Lihat juga

  • Last updated on