Compartilhar via

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

  • Artigo

Este exemplo mostra como alterar a aparência de um 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ê estiver arrastando 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 a GridView é representado por um GridViewColumnHeader objeto.

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

Quando o usuário pressiona o botão do mouse e o mantém pressionado GridViewColumnHeaderenquanto o mouse pausa no , o valor da IsPressed propriedade muda para true. Da mesma forma, quando o usuário inicia a operação de arrastar, a Role propriedade muda para Floating.

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

Confira também