Compartir a través de

Cómo: Crear un estilo para un encabezado de columna de GridView arrastrado

  • Artículo

En este ejemplo se muestra cómo cambiar la apariencia de un elemento arrastrado GridViewColumnHeader cuando el usuario cambia la posición de una columna.

Ejemplo

Al arrastrar un encabezado de columna a otra ubicación en un ListView que usa GridView para su modo de vista, la columna se mueve a la nueva posición. Mientras arrastra el encabezado de columna, aparece una copia flotante del encabezado además del encabezado original. Un encabezado de columna de GridView se representa mediante un objeto GridViewColumnHeader.

Para personalizar la apariencia de los encabezados flotantes y originales, puede establecer Triggers para modificar el objeto GridViewColumnHeaderStyle. Se aplican estos Triggers cuando el valor de la propiedad IsPressed es true y el valor de la propiedad Role es Floating.

Cuando el usuario presiona el botón del mouse y lo mantiene presionado mientras el mouse se detiene en GridViewColumnHeader, el valor de la propiedad IsPressed cambia a true. Del mismo modo, cuando el usuario inicia la operación de arrastre, la propiedad Role cambia a Floating.

En el ejemplo siguiente se muestra cómo establecer Triggers para cambiar los colores Foreground y Background de los encabezados originales y flotantes cuando el usuario arrastra una columna a una nueva posición.

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

Vea también