Bagikan melalui

Cara: Membuat Gaya untuk Header Kolom GridView yang Diseret

  • Artikel

Contoh ini memperlihatkan cara mengubah tampilan yang diseret GridViewColumnHeader saat pengguna mengubah posisi kolom.

Contoh

Saat Anda menyeret header kolom ke lokasi lain dalam ListView yang menggunakan GridView untuk mode tampilannya, kolom berpindah ke posisi baru. Saat Anda menyeret header kolom, salinan header mengambang muncul selain header asli. Header kolom dalam GridView diwakili oleh GridViewColumnHeader objek.

Untuk menyesuaikan tampilan header mengambang dan asli, Anda dapat mengatur Triggers untuk memodifikasi GridViewColumnHeaderStyle. Ini Triggers diterapkan ketika IsPressed nilai properti adalah true dan Role nilai properti adalah Floating.

Ketika pengguna menekan tombol mouse dan menahannya saat mouse menjeda pada GridViewColumnHeader, IsPressed nilai properti berubah menjadi true. Demikian juga, ketika pengguna memulai operasi seret, Role properti berubah menjadi Floating.

Contoh berikut menunjukkan cara mengatur Triggers untuk mengubah Foreground warna dan Background header asli dan mengambang saat pengguna menyeret kolom ke posisi baru.

<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">

<ControlTemplate.Triggers>

<Trigger Property="IsPressed"
         Value="true">
  <Setter TargetName="HighlightBorder"
          Property="Visibility"
          Value="Hidden"/>
  <Setter TargetName="PART_HeaderGripper"
          Property="Visibility"
          Value="Hidden"/>
  <Setter Property="Background"
          Value="SkyBlue"/>
  <Setter Property="Foreground"
          Value="Yellow"/>
</Trigger>

<Trigger Property="Role"
         Value="Floating">
  <Setter TargetName="PART_HeaderGripper"
          Property="Visibility"
          Value="Collapsed"/>
  <Setter Property="Background"
          Value="Yellow"/>
  <Setter Property="Foreground"
          Value="SkyBlue"/>
</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

Baca juga