Compartilhar via


Como: Create a Style for a Dragged GridView Column Header

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 você arrasta um cabeçalho de coluna para outro local na ListView que usa GridView como seu modo de exibição, a coluna é movida para a nova posição. Enquanto você estiver arrastando o cabeçalho, uma cópia flutuante do cabeçalho aparecerá, além do cabeçalho original. Um cabeçalho de coluna em uma GridView é representado por um objeto GridViewColumnHeader.

Para personalizar a aparência dos dois cabeçalhos (flutuante e original), você pode definir Triggers para modificar o Style do GridViewColumnHeader. Estes Triggers são aplicados quando o valor da propriedade IsPressed for true e o valor da propriedade Role for Floating.

Quando o usuário pressionar o botão do mouse e o mantiver pressionado enquanto o mouse faz uma pausa sobre o GridViewColumnHeader, o valor da propriedade IsPressed muda para true. Da mesma forma, quando o usuário começa a operação de arrastar, a propriedade Role muda para Floating.

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

For the complete sample, see Exibição em Lista com Personalizar flutuante exemplo de cabeçalho.

Consulte também

Conceitos

Visão geral de ListView

GridView Overview

Referência

GridViewColumnHeader

GridViewColumnHeaderRole

ListView

GridView

Outros recursos

ListView How-to Topics

Exemplos de Exibição em Lista