Bagikan melalui

Cara: Menggunakan Templat untuk Menata Tampilan Daftar yang Menggunakan GridView

  • Artikel

Contoh ini menunjukkan cara menggunakan DataTemplate objek dan Style untuk menentukan tampilan ListView kontrol yang menggunakan GridView mode tampilan.

Contoh

Contoh berikut menunjukkan Style objek dan DataTemplate yang mengkustomisasi tampilan header kolom untuk GridViewColumn.

<Style x:Key="myHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
  <Setter Property="Background" Value="LightBlue"/>
</Style>

<DataTemplate x:Key="myHeaderTemplate">
  <DockPanel>
    <CheckBox/>
    <TextBlock FontSize="16" Foreground="DarkBlue">
      <TextBlock.Text>
        <Binding/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>

Contoh berikut menunjukkan cara menggunakan objek dan DataTemplate ini Style untuk mengatur HeaderContainerStyle properti dan HeaderTemplate dari GridViewColumn. Properti DisplayMemberBinding menentukan konten sel kolom.

<GridViewColumn Header="Month" Width="80"
      HeaderContainerStyle="{StaticResource myHeaderStyle}"
      HeaderTemplate="{StaticResource myHeaderTemplate}"
      DisplayMemberBinding="{Binding Path=Month}"/>

HeaderContainerStyle dan HeaderTemplate hanya dua dari beberapa properti yang bisa Anda gunakan untuk menyesuaikan tampilan header kolom untuk GridView kontrol. Untuk informasi selengkapnya, lihat Gambaran Umum Gaya dan Templat Header Kolom GridView.

Contoh berikut menunjukkan cara menentukan DataTemplate yang mengkustomisasi tampilan sel dalam GridViewColumn.

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

Contoh berikut menunjukkan cara menggunakan ini DataTemplate untuk menentukan konten GridViewColumn sel. Templat ini digunakan alih-alih DisplayMemberBinding properti yang ditampilkan dalam contoh sebelumnya GridViewColumn .

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

Baca juga