Bagikan melalui

Cara: Menata Baris dalam ListView yang Mengimplementasikan GridView

  • Artikel

Contoh ini memperlihatkan cara menata baris dalam ListView kontrol yang menggunakan GridView View mode.

Contoh

Anda dapat membuat gaya baris dalam ListView kontrol dengan mengatur ItemContainerStyle pada ListView kontrol. Atur gaya untuk itemnya yang direpresentasikan sebagai ListViewItem objek. Mereferensikan ItemContainerStyle ControlTemplate objek yang digunakan untuk menampilkan konten baris.

Sampel lengkap, tempat contoh berikut diekstrak, menampilkan kumpulan informasi lagu yang disimpan dalam database XML. Setiap lagu dalam database memiliki bidang peringkat dan nilai bidang ini menentukan cara menampilkan baris informasi lagu.

Contoh berikut menunjukkan cara menentukan ItemContainerStyle ListViewItem objek yang mewakili lagu dalam koleksi lagu. Objek ItemContainerStyle referensi ControlTemplate yang menentukan cara menampilkan baris informasi lagu.

 <ListView.ItemContainerStyle>
  <Style TargetType="{x:Type ListViewItem}"  >
    <Setter Property="Template"
          Value="{StaticResource Default}"/>
    <Style.Triggers>
      <DataTrigger Binding="{Binding XPath=@Rating}" Value="5">
              <Setter Property="Template" 
              Value="{StaticResource StronglyRecommended}"/>
      </DataTrigger>
      <DataTrigger Binding="{Binding XPath=@Rating}" Value="4">
        <Setter Property="Template" 
              Value="{StaticResource Recommended}"/>
      </DataTrigger>
    </Style.Triggers>
  </Style>
</ListView.ItemContainerStyle>

Contoh berikut menunjukkan ControlTemplate yang menambahkan string "Strongly Recommended" teks ke baris. Templat ini dirujuk dalam ItemContainerStyle dan ditampilkan ketika peringkat lagu memiliki nilai 5 (lima). ControlTemplate menyertakan GridViewRowPresenter objek yang menjabarkan konten baris dalam kolom seperti yang ditentukan oleh GridView mode tampilan.

<ControlTemplate x:Key="StronglyRecommended" 
                 TargetType='{x:Type ListViewItem}'>
  <StackPanel Background="Beige">
    <GridViewRowPresenter Content="{TemplateBinding Content}"
       Columns="{TemplateBinding GridView.ColumnCollection}"/>
    <TextBlock Background="LightBlue" Text="Strongly Recommended" />
  </StackPanel>
</ControlTemplate>

Contoh berikut mendefinisikan GridView.

<ListView.View>
  <GridView ColumnHeaderContainerStyle="{StaticResource MyHeaderStyle}">
    <GridViewColumn Header="Name" 
                    DisplayMemberBinding="{Binding XPath=@Name}" 
                    Width="100"/>
    <GridViewColumn Header="Time" 
                    DisplayMemberBinding="{Binding XPath=@Time}" 
                    Width="80"/>
    <GridViewColumn Header="Artist"  
                    DisplayMemberBinding="{Binding XPath=@Artist}" 
                    Width="80" />
    <GridViewColumn Header="Disk" 
                    DisplayMemberBinding="{Binding XPath=@Disk}"  
                    Width="100"/>
  </GridView>
</ListView.View>

Lihat juga