Delen via

Handleiding: Een stijl maken voor een gesleepte GridView-kolomkop

  • Artikel

In dit voorbeeld ziet u hoe u het uiterlijk van een gesleepte GridViewColumnHeader wijzigt wanneer de gebruiker de positie van een kolom aanpast.

Voorbeeld

Wanneer u een kolomkop naar een andere locatie sleept in een ListView die gebruikmaakt van GridView voor de weergavemodus, wordt de kolom verplaatst naar de nieuwe positie. Terwijl u de kolomkop sleept, wordt er een zwevende kopie van de koptekst weergegeven naast de oorspronkelijke koptekst. Een kolomkop in een GridView wordt vertegenwoordigd door een GridViewColumnHeader-object.

Als u het uiterlijk van zowel de zwevende als de oorspronkelijke kopteksten wilt aanpassen, kunt u Triggers instellen om de GridViewColumnHeaderStylete wijzigen. Deze Triggers worden toegepast wanneer de eigenschapswaarde van de IsPressedtrue is en de eigenschapswaarde van de RoleFloatingis.

Wanneer de gebruiker op de muisknop drukt en deze ingedrukt houdt terwijl de muis op de GridViewColumnHeaderpauzeert, verandert de eigenschapswaarde van de IsPressed in true. Op dezelfde manier, wanneer de gebruiker de sleepbewerking start, verandert de eigenschap Role in Floating.

In het volgende voorbeeld ziet u hoe u Triggers instelt om de Foreground en Background kleuren van de oorspronkelijke en zwevende koppen te wijzigen wanneer de gebruiker een kolom naar een nieuwe positie sleept.

<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>

Zie ook