バージョン

テンプレート フィールドの構成 (xamDataGrid)

トピックの概要

目的

このトピックでは、カスタム表示のフィールドを作成し、 xamDataPresenter™ コントロールで TemplateField を使用してテンプレートを編集する方法を説明します。

前提条件

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

トピック 目的

このセクションでは、Data Presenter Family のコントロールを構成する主要な要素を定義します。

このトピックでは、 xamDataGrid コントロールをページに追加する方法について説明します。

このトピックでは、 xamDataGrid コントロールで FieldLayout および Field を手動で指定する方法を説明します。

テンプレート フィールドの構成の概要

テンプレート フィールドの構成の概要

テンプレート フィールドは、 xamDataPresenter コントロールで、表示モードおよび編集モード用のカスタム データ テンプレートを指定する機能を提供します。

テンプレート フィールドの構成の概要表

以下の表は、TemplateField コントロールの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。詳細は、表の後に記載されています。

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

フィールドの表示をカスタマイズするには、TemplateFieldDisplayTemplate プロパティを使用します。

カスタム フィールド エディターを提供するには、TemplateFieldEditTemplate プロパティを使用します。

テンプレート フィールドの表示テンプレートの構成

概要

編集モードが選択されていない場合にフィールドの表示をカスタマイズするには、 TemplateFieldDisplayTemplate プロパティを使用します。

基本データへのバインドを容易にするために、TemplateEditorValueBinding マークアップ拡張子を使用します。

プロパティ設定

以下の表は、任意の構成とそれを管理するプロパティ設定のマップを示します。

目的: 使用するプロパティ: 設定値:

カスタム フィールド表示の提供

DataTemplate

以下のスクリーンショットは、以下のコードを使用した結果、フィールドがどのように表示されるかを示しています。

Configuring Template Field 1.png

以下のコードは、「給与」テンプレート フィールドを実装します。

XAML の場合:

<igDP:TemplateField Name="salary" >
    <!-- [ここに表示テンプレートを指定]  -->
    <!-- [ここに編集テンプレートを指定]  -->
</igDP:TemplateField>

以下のコードは、TemplateField の表示テンプレートを実装します。

XAML の場合:

<igDP:TemplateField.DisplayTemplate>
    <DataTemplate>
        <TextBlock Text="{igEditors:TemplateEditorValueBinding}"
                   HorizontalAlignment="Right"/>
    </DataTemplate>
</igDP:TemplateField.DisplayTemplate>

以下のコードは、前述のコードと同じ結果になります。

XAML の場合:

<igDP:TemplateField.DisplayTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding Path=(igEditors:TemplateEditor.Editor).Value, RelativeSource={RelativeSource Self}}"
                   HorizontalAlignment="Right"/>
    </DataTemplate>
</igDP:TemplateField.DisplayTemplate>

テンプレート フィールドの編集テンプレートの構成

概要

カスタム フィールド エディターを使用してテンプレートの内容を指定するには、 TemplateFieldEditTemplate を使用します。

基本データへのバインドを容易にするために、TemplateEditorValueBinding マークアップ拡張子を使用します。

プロパティ設定

以下の表は、任意の構成とそれを管理するプロパティ設定のマップを示します。

目的: 使用するプロパティ: 設定値:

カスタム フィールド エディターの提供

DataTemplate

以下のスクリーンショットは、以下のコードを使用した結果、カスタム エディター フィールドがどのように表示され動作するかを示しています。

Configuring Template Field 2.png

以下のコードは、「給与」テンプレート フィールドを実装します。

XAML の場合:

<igDP:TemplateField Name="salary" >
    <!-- [ここに表示テンプレートを指定]  -->
    <!-- [ここに編集テンプレートを指定]  -->
</igDP:TemplateField>

以下のコードは、TemplateField の編集テンプレートを実装します。

XAML の場合:

<igDP:TemplateField.EditTemplate>
    <DataTemplate>
        <Border BorderBrush="LightGreen" BorderThickness="1">
            <igEditors:XamNumericEditor Value="{igEditors:TemplateEditorValueBinding}"                                                                  SpinButtonDisplayMode="Always"
SpinIncrement="50"/>
        </Border>
    </DataTemplate>
</igDP:TemplateField.EditTemplate>

以下のコードは、前述のコードと同じ結果になります。

XAML の場合:

<igDP:TemplateField.EditTemplate>
    <DataTemplate>
        <Border BorderBrush="LightGreen" BorderThickness="1">
            <igEditors:XamNumericEditor Value="{Binding Path=(igEditors:TemplateEditor.Editor).Value, RelativeSource={RelativeSource Self}, UpdateSourceTrigger=PropertyChanged}"                                                       SpinButtonDisplayMode="Always"                                                                 SpinIncrement="50"/>
        </Border>
    </DataTemplate>
</igDP:TemplateField.EditTemplate>

コード例: テンプレート フィールドの使用

説明

以下のコードは、 xamDataGrid コントロールで TemplateField を使用する完全なコード例です。

コード

以下の名前空間を使用します。

XAML の場合:

xmlns:igDP="http://infragistics.com/DataPresenter"
xmlns:igEditors="http://infragistics.com/Editors"

XAML の場合:

<igDP:XamDataGrid x:Name="DataGrid" BindToSampleData="True" AutoFit="True">
    <igDP:XamDataGrid.FieldLayouts>
        <igDP:FieldLayout>
            <igDP:FieldLayout.Fields>
                <igDP:TextField Name="name"/>
                <igDP:TextField Name="department"/>
                <igDP:TextField Name="email" Visibility="Collapsed" />
                <igDP:TemplateField Name="salary" >
                    <igDP:TemplateField.DisplayTemplate>
                        <DataTemplate>
                            <TextBlock Text="{igEditors:TemplateEditorValueBinding}"
                                       HorizontalAlignment="Right"/>
                        </DataTemplate>
                    </igDP:TemplateField.DisplayTemplate>
                    <igDP:TemplateField.EditTemplate>
                        <DataTemplate>
                            <Border BorderBrush="LightGreen" BorderThickness="1">
                                <igEditors:XamNumericEditor Value="{igEditors:TemplateEditorValueBinding}"                                    SpinButtonDisplayMode="Always" SpinIncrement="50"/>
                            </Border>
                        </DataTemplate>
                    </igDP:TemplateField.EditTemplate>                                             </igDP:TemplateField>
            </igDP:FieldLayout.Fields>
        </igDP:FieldLayout>
    </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

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

このトピックでは、 xamDataPresenter コントロールのさまざまなデータ タイプに対し、特定のエディター フィールドを簡単に構成する方法を説明します。

このトピックでは、 xamDataPresenter コントロールによるフィールドの自動生成と手動生成の違いを説明します。

このトピックでは、 xamDataPresenter コントロールに対する複数の FieldLayouts を作成する方法を説明します。

このトピックでは、画像を表示させるフィールドを追加し、 xamDataPresenter コントロールで CellValuePresenter のテンプレートをオーバーライドする方法を説明します。

このトピックでは、 xamDataPresenter コントロール用にカスタマイズされたフィールドを読み込む方法を説明します。

このトピックでは、 xamDataPresenter コントロール用にカスタマイズされたフィールドを保存する方法を説明します。

このトピックでは、各フィールドの Row、Column、ColumnSpan または RowSpan をカスタマイズして、レコードを一層使いやすくなるようにレイアウトを変更する方法を説明します。

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

このトピックでは、内容のフロー方向を変更する方法について説明します。

このトピックでは、データ プレゼンター フィールド エディターのコントロールを構成する方法を説明します。