Edit

How to: Create a Style for a Dragged GridView Column Header

  • Article

This example shows how to change the appearance of a dragged GridViewColumnHeader when the user changes the position of a column.

Example

When you drag a column header to another location in a ListView that uses GridView for its view mode, the column moves to the new position. While you are dragging the column header, a floating copy of the header appears in addition to the original header. A column header in a GridView is represented by a GridViewColumnHeader object.

To customize the appearance of both the floating and original headers, you can set Triggers to modify the GridViewColumnHeader Style. These Triggers are applied when the IsPressed property value is true and the Role property value is Floating.

When the user presses the mouse button and holds it down while the mouse pauses on the GridViewColumnHeader, the IsPressed property value changes to true. Likewise, when the user begins the drag operation, the Role property changes to Floating.

The following example shows how to set Triggers to change the Foreground and Background colors of the original and floating headers when the user drags a column to a new position.

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

See also