Compartilhar via

Como criar um estilo para um cabeçalho de coluna GridView arrastado

Este exemplo mostra como mudar a aparência de um elemento arrastado GridViewColumnHeader quando o usuário altera a posição de uma coluna.

Exemplo

Quando você arrasta um cabeçalho de coluna para outro local em um ListView que usa GridView para seu modo de exibição, a coluna se move para a nova posição. Enquanto você arrasta o cabeçalho da coluna, uma cópia flutuante do cabeçalho é exibida além do cabeçalho original. Um cabeçalho de coluna em um GridView é representado por um GridViewColumnHeader objeto.

Para personalizar a aparência dos cabeçalhos flutuantes e originais, você pode definir Triggers para modificar o GridViewColumnHeaderStyle. Elas Triggers são aplicadas quando o valor da propriedade IsPressed é true e o valor da propriedade Role é Floating.

Quando o usuário pressiona o botão do mouse e o segura enquanto o mouse pausa sobre o GridViewColumnHeader, o valor da propriedade IsPressed é alterado para true. Da mesma forma, quando o usuário inicia a operação de arrastar, a Role propriedade é alterada para Floating.

O exemplo a seguir mostra como definir Triggers para alterar as Foreground cores dos Background cabeçalhos originais e flutuantes quando o usuário arrasta uma coluna para uma nova posição.

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

Consulte também

  • Last updated on