バージョン

フィールドのグループ化 (xamDataPresenter)

フィールドのグループ化 (xamDataGrid)

トピックの概要

目的

このトピックでは、フィールド グループ化機能を使用する方法について説明します。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックは、xamDataGrid コントロールとコントロールが構成されるさまざまな要素を紹介します。

このトピックでは、表示するフィールドを指定し、xamDataPresenter コントロールでこれらのフィールドに関連するプロパティを設定するために、フィールドのレイアウトを定義する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

フィールド グループ化の概要

フィールド グループ化機能は、複数のフィールドを共通フィールド グループにグループ化できます。フィールド グループを他フィールド グループの入れ子にできます。フィールド グループ機能は、水平および垂直のレコード方向がサポートされます。

以下のスクリーンショットは、共通フィールド グループ "IDs" に描画された "Order" および "Customer" フィールド、共通フィールド グループ "Dates" に描画された"Ordered" および "Shipped" フィールドを示します。

xamDataPresenter Field Grouping.png

以下のコード スニペットは、上記フィールド グループ構成の定義の例です。

XAML の場合:

<igDP:XamDataGrid>
  <igDP:XamDataGrid.FieldLayouts>
    <igDP:FieldLayout>
      <igDP:FieldGroup Label="IDs">
        <igDP:Field Name="OrderID" Label="Order" Width="55" />
        <igDP:Field Name="CustomerID" Label="Customer" Width="75" />
      </igDP:FieldGroup>
      <igDP:FieldGroup Label="Dates" AllowCollapsing="True">
        <igDP:Field Name="OrderDate" Label="Ordered" Width="90" />
        <igDP:Field Name="ShippedDate" Label="Shipped" Width="90" />
      </igDP:FieldGroup>
      <igDP:Field Name="Freight" Label="Shipping Cost" Width="100" />
    </igDP:FieldLayout>
  </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>

ユーザーは、フィールド グループ ラベル左側の小さなボタンをクリックしてフィールド グループを縮小して展開できます。プログラムによってトピックの後で説明するコマンドやプロパティを使用してフィールド グループを縮小および展開できます。

フィールド グループ化のアーキテクチャ

FieldLayout は以下を公開します。

  • FieldItems プロパティ - すべてのルート レベル FieldGroup およびルート レベル Field のコレクション。

  • Fields プロパティ- すべてのフラット化 Field コレクション。

2 つのコレクションは内部で両方向に同期されます。

ユーザー インタラクションと操作性

ユーザー インタラクションの概要表

以下の表は、フィールド グループ化機能のユーザー相互作用機能を簡単に説明します。

目的 方法 詳細 構成方法

フィールド グループの展開/縮小

フィールド グループ ラベル内にある展開インジケーターをクリックします。

フィールド グループ展開/縮小状態を切り替えます。

新しい位置にフィールドをドラッグ

フィールド ラベルをクリックしてマウスでドラッグします。

フィールドグループが移動される位置を示す矢印インジケーターが描画されます。

新しい位置にフィールドをドラッグ

フィールド グループ ラベルをクリックしてマウスでドラッグします。

フィールドグループが移動される位置を示す矢印インジケーターが描画されます。

ビューからフィールド グループを削除

フィールド グループをクリックしてマウスでビューの外側へドラッグします。

FieldLayoutSettings.AllowFieldMoving プロパティと FieldSettings.AllowHiding プロパティを True に設定します。これにより、フィールド グループとその入れ子になったフィールドグループおよびフィールドを削除します。
No.png

フィールド グループを固定 (またはフィールド)

フィールド グループ ラベル内にある固定ハンドルをクリックします。

フィールド グループ固定は、フィールド レイアウトのルート レベルのフィールドグループ (またはフィールド) でのみで可能です。
Note
注:

フィールドまたはグループは親フィールド グループ内のみ移動できます。

フィールド グループの縮小の構成

フィールド グループ縮小構成の概要表

以下の表は、フィールド グループ化機能の構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。

構成可能な項目 プロパティ 詳細

フィールド グループ縮小をグローバルで有効にする

FieldLayoutSettings クラスのこのプロパティは、コントロール全体のフィールド グループを展開および拡張する機能を構成します。

各フィールド グループのフィールドグループ縮小を有効にする

FieldGroup クラスのこのプロパティは、コントロール全体のフィールド グループを展開および拡張する機能を構成します。AllowFieldGroupCollapsing プロパティよりも優先されます。

フィールド グループをプログラムによって縮小/展開

概要

以下のセクションは、フィールドグループをプログラミングによって縮小および展開する方法をコード例で示します。

コマンドを使用したフィールド グループ表示の切り替え

以下のコード スニペットは、コマンドを使用してフィールド グループ ("FieldGroup1") の展開/縮小を切り替える方法について説明します。

XAML の場合:

<Button Content="Toggle the field group"
    Command="{x:Static igDP:DataPresenterCommands.ToggleFieldGroupIsCollapsed}"
    CommandParameter="{Binding ElementName=FieldGroup1}"
    CommandTarget="{Binding ElementName=xamDataGrid1}" />

プロパティを使用してフィールド グループの表示を設定

以下のコード例は、 IsCollapsed プロパティを使用してフィールド グループ ("FieldGroup1") を展開または縮小する設定する方法を示します。

XAML の場合:

…
<igDP:FieldGroup x:Name="FieldGroup1">
…

C# の場合:

this.fieldGroup1.IsCollapsed = true;

フィールド グループ イベントの処理

概要

このセクションでは、フィールド グループ機能と関連するイベントについて説明します。

イベント

以下の表は、動作とそれを管理するイベントのマッピングを示します。

目的: このイベントの使用: イベント引数:

フィールド グループが縮小されたときに通知

フィールド グループの縮小

フィールド グループが展開されたときに通知

展開フィールド グループ

フィールド グループのスタイル設定

概要

フィールド グループのスタイル設定:

  • 暗黙にスタイルをを作成し FieldGroupLabelPresenter 型をターゲットにします。すべてのフィールドグループに影響します。

  • FieldLayoutSettings FieldGroupLabelPresenterStyle プロパティにスタイルを設定します。データ プレゼンターのすべてのフィールド グループに影響します。

  • FieldGroup の LabelPresenterStyle プロパティにスタイルを設定します。フィールド グループに影響します。

暗黙的なスタイルの例

以下のコード スニペットは、すべてのフィールド グループにスタイルを適用する方法を示します。

XAML の場合:

<Page
  …
  xmlns:igDP="http://infragistics.com/DataPresenter"
  …>
…
<Page.Resources>
  <ResourceDictionary>
    <Style TargetType="{x:Type igDP:FieldGroupLabelPresenter}">
      <Setter Property="Background" Value="Orange" />
    </Style>
  </ResourceDictionary>
</Page.Resources>
…
<igDP:XamDataGrid>
…
  <igDP:XamDataGrid.FieldLayouts>
    <igDP:FieldLayout>
      <igDP:FieldGroup>
      …
      </igDP:FieldGroup>
      <igDP:FieldGroup>
      …
      </igDP:FieldGroup>
    </igDP:FieldGroup>
  <igDP:XamDataGrid.FieldLayouts>
…
</igDP:XamDataGrid>
…
</Page>

明示的なスタイルの例

以下のコード スニペットは、特定のフィールド グループにスタイルを適用する方法を示します。

XAML の場合:

<Page
  …
  xmlns:igDP="http://infragistics.com/DataPresenter"
  …>
…
<Page.Resources>
  <ResourceDictionary>
    <Style x:Key="BGRed" TargetType="{x:Type igDP:FieldGroupLabelPresenter}">
      <Setter Property="Background" Value="Red" />
    </Style>
  </ResourceDictionary>
</Page.Resources>
…
<igDP:XamDataGrid>
…
  <igDP:XamDataGrid.FieldLayouts>
    <igDP:FieldLayout>
      <igDP:FieldGroup LabelPresenterStyle="{StaticResource ResourceKey=BGRed">
      …
      </igDP:FieldGroup>
      <igDP:FieldGroup>
      …
      </igDP:FieldGroup>
    </igDP:FieldGroup>
  <igDP:XamDataGrid.FieldLayouts>
…
</igDP:XamDataGrid>
…
</Page>

この例ではスタイルは最初のフィールド グループのみに影響します。

関連コンテンツ

このトピックに関連する追加情報については、以下のトピックを参照してください。

トピック 目的

このトピックでは、レコードの方向を変更する方法について説明します。

このトピックは、フィールド サイズ機能の概要を提供します。

このトピックは、固定フィールド機能の概要を提供します。

このトピックは、フィールド位置、サイズ、並べ替え、グループ化などのユーザーのカスタマイズを保存する方法を説明します。

このトピックは、フィールド位置、サイズ、並べ替え、グループ化などのユーザーのカスタマイズを読み込む方法を説明します。