Partilhar via

Como criar um estilo para o cabeçalho de coluna arrastada do GridView

  • Artigo

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

Exemplo

Quando se arrasta um cabeçalho de coluna para outra localização num ListView que utiliza GridView para o seu modo de visualização, a coluna é movida para a nova posição. Enquanto você arrasta o cabeçalho da coluna, uma cópia flutuante do cabeçalho aparece além do cabeçalho original. Um cabeçalho de coluna em um GridView é representado por um objeto GridViewColumnHeader.

Para personalizar a aparência dos cabeçalhos flutuantes e originais, você pode definir Triggers para modificar o GridViewColumnHeaderStyle. Esses Triggers são aplicados 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 mantém pressionado enquanto o mouse pausa na GridViewColumnHeader, o valor da propriedade IsPressed muda para true. Da mesma forma, quando o usuário inicia a operação de arrastar, a propriedade Role muda para Floating.

O exemplo a seguir mostra como definir Triggers para alterar as cores Foreground e Background dos 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>

Ver também