Bagikan melalui

Gambaran Umum ListView

  • Artikel

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

Catatan

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

Apa itu ListView?

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 anak. Namun, elemen turunan tersebut dapat menjadi elemen visual apa pun.

Menentukan Mode Tampilan untuk ListView

Untuk menentukan mode tampilan untuk konten ListView kontrol, Anda mengatur 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>

Ilustrasi berikut menunjukkan bagaimana data muncul untuk contoh sebelumnya.

Screenshot that shows a ListView with GridView output.

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.

Mengikat Data ke ListView

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

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

GridViewDalam , GridViewColumn objek 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, yang DataTemplate diidentifikasi dengan set ResourceKeyBinding 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}"/>

Menata ListView yang Mengimplementasikan GridView

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 mengatur Margin properti 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 HorizontalContentAlignment properti dan VerticalContentAlignment untuk ListView konten yang GridViewditampilkan oleh . Untuk menentukan perataan konten dalam kolom GridView, tentukan CellTemplate.

Berbagi Mode Tampilan yang Sama

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.

Membuat Mode Tampilan Kustom

Tampilan yang disesuaikan seperti GridView berasal dari ViewBase kelas abstrak, yang menyediakan alat untuk menampilkan item data yang diwakili sebagai ListViewItem objek.

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>

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

    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

Baca juga