xamDataGrid ではテンプレート列機能を提供しており、任意のユーザーコントロールをセルに表示することができますのでカスタマイズの幅が広がります。例えば行のデータを分かりやすく表示する画像の埋め込みや、入力以外の操作を行うユーザーコントロールの配置などが挙げられます。今回はテンプレート列で①「表示テキストのカスタマイズ」、②「画像の表示」、③「レコード操作コマンドを実行するボタン」を作成してみます。
xamDataGrid では CellValuePresenter というエレメントでセルの値を表示しています。CellValuePresenter の Template プロパティに対して新たに ControlTemplate を定義することでセルの見た目を変更することができます。
①「表示テキストのカスタマイズ」
テンプレートは Style を用いて実装していきます。CellValuePresenter をターゲットとする Style を用意します。ControlTemplate 内に TextBlock を定義し、TextDecorations プロパティの値を “Underline” とすることでセルのテキストに下線を引きます。
CellValuePresenter の DataContext は DataRecord とリンクしていますので、データソース（今回の例では ObservableCollection<Item>）の各アイテムの値が参照されています。DataRecord の DataItem プロパティより表示したい列を指定します。ここでは DataItem.ID とバインドしています。
UnderlineCellStyle
<Style x:Key="UnderlineCellStyle" TargetType="igWPF:CellValuePresenter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igWPF:CellValuePresenter">
<TextBlock Text="{Binding Path=DataItem.ID}"
TextDecorations="Underline"
VerticalAlignment="Center"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
列の FieldSettings.CellValuePresenterStyle から UnderlineCellStyle を参照します。（後続の②、③のスタイルも同様の方法で列から参照します。）
<igWPF:XamDataGrid Name="xamDataGrid1"
...
>
<igWPF:XamDataGrid.FieldLayouts>
<igWPF:FieldLayout>
<igWPF:Field Name="ID">
<igWPF:Field.Settings>
<igWPF:FieldSettings
CellValuePresenterStyle="{StaticResource UnderlineCellStyle}" />
</igWPF:Field.Settings>
</igWPF:Field>
...
②「画像の表示」
Image コントロールを定義し、Source プロパティにデータソースの Photo プロパティの値を割り当てます。ここでは DataItem.Photo とバインドしています。
<Style x:Key="ImageCellStyle" TargetType="igWPF:CellValuePresenter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igWPF:CellValuePresenter">
<Image Source="{Binding Path=DataItem.Photo}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
③「行操作コマンドを実行するボタンの埋め込み」
Button コントロールを定義し、イベントハンドラの登録やその他プロパティの設定を行います。
<Style x:Key="DeleteButtonStyle" TargetType="igWPF:CellValuePresenter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="igWPF:CellValuePresenter">
<Button Content="削除" Click="Button_Click"
Template="{StaticResource Template1}"
HorizontalContentAlignment="Center"
Background="White" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
続いて③のテンプレート内のボタンで登録したイベントハンドラに、クリックレコード（ActiveRecord）を削除するコマンドを呼び出すよう実装を行います。
C#
private void Button_Click(object sender, RoutedEventArgs e)
{
// クリック行を選択状態にし、ExecuteCommand で行を削除。
this.xamDataGrid1.SelectedItems.Records.Clear();
this.xamDataGrid1.SelectedItems.Records.Add(this.xamDataGrid1.ActiveRecord);
this.xamDataGrid1.ExecuteCommand(DataPresenterCommands.DeleteSelectedDataRecords);
}
VB
Private Sub Button_Click(sender As Object, e As RoutedEventArgs) ' クリック行を選択状態にし、ExecuteCommand で行を削除。 Me.xamDataGrid1.SelectedItems.Records.Clear() Me.xamDataGrid1.SelectedItems.Records.Add(Me.xamDataGrid1.ActiveRecord) Me.xamDataGrid1.ExecuteCommand(DataPresenterCommands.DeleteSelectedDataRecords) End Sub
実装結果
ID 列には下線のついたセル値、写真列にはイメージ、コマンド列には削除ボタンがそれぞれ表示されました。
削除ボタンをクリックすると、レコード削除確認ダイアログが表示されます。「はい」をクリックするとレコードが削除されます。
ID 列、写真列は Field（バインド列）、コマンド列は UnboundField（非バインド列）を用いて定義しています。Field のセルはデフォルトの動作としてデータソースに対応する値を TextBlock に表示します。このため CellValuePresenterStyle を切り替えることでデータの表現を簡単に変更することができます。UnboundField ではデータソースにひも付きがありませんが、こちらも CellValuePresenterStyle 経由で独自のユーザーコントロールを割り当てることができますので、今回の削除ボタンのようにデータソースに保持する必要のないデータを表現する際に有用です。
サンプルはこちらから
xamDataGrid_ImageButtonField_CS.zip
xamDataGrid_ImageButtonField_VB.zip
オンラインヘルプ
関連記事
xamDataGrid と xamDataChart で簡易 BI アプリケーションを作る
弊社製品は機能制限なしのトライアル版もご用意しています。ダウンロードはこちらから。
Infragistics 製品トライアル版ダウンロード 
