方法: ドラッグされた GridView 列ヘッダーのスタイルを作成する

  • [アーティクル]

この例からは、ユーザーが列の位置を変更するとき、ドラッグした GridViewColumnHeader の外観を変更する方法がわかります。

例

その表示モードに GridView が使用される ListView で列ヘッダーを別の場所にドラッグすると、列が新しい位置に移動します。 列ヘッダーをドラッグしている間、元のヘッダー以外に、フロート状態のヘッダーのコピーが表示されます。 GridView の列ヘッダーは GridViewColumnHeader によって表されます。

このフロート状態と元のヘッダーの両方の外観をカスタマイズするには、Triggers を設定して GridViewColumnHeaderStyle を変更します。 これらの Triggers は、IsPressed プロパティ値が true で、Role プロパティ値が Floating のときに適用されます。

マウスが GridViewColumnHeader の上にあるとき、ユーザーがマウス ボタンを押したままにすると、IsPressed プロパティ値が true に変わります。 同様に、ユーザーがドラッグ操作を開始すると、Role プロパティが Floating に変わります。

次の例に、ユーザーが列を新しい位置にドラッグするときに、フロート状態と元のヘッダーの Foreground 色と Background 色を変えるように Triggers を設定する方法を示します。

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

関連項目