XamDataGridを使ってみた

XamDataGridは、非常に多機能なコンポーネントです。XamDataGridは、http://infragistics.com/DataPresenter名前空間を定義することで使用することが出来ます。通常のXAMLのコレクションを表示する系のコントロールはItemsSourceプロパティにコレクションを設定して使用しますが、XamDataGridはDataSourceプロパティにコレクションを設定することで、データの表示をすることが出来ます。 例として以下のようなPersonクラスのコレクションを持ったMainWindowViewModelクラスをDataContextに持ったWindowにXamDataGridを配置してデータを表示させたコードを示します。

using System;
using System.Collections.Generic;
using System.Linq;

namespace XamDataGridSample01
{
    public class Person
    {
        public string Name { get; set; }
        public int Salary { get; set; }
        public DateTime Birthday { get; set; }
    }

    public class MainWindowViewModel
    {
        public List<Person> People { get; set; }

        public MainWindowViewModel()
        {
            this.People = Enumerable.Range(1, 1000000)
                .Select(x => new Person
                {
                    Name = "okazuki " + x,
                    Birthday = DateTime.Now,
                    Salary = 200000 + x % 50000
                })
                .ToList();
        }
    }
}

XAMLは以下のようになります。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:igDP="http://infragistics.com/DataPresenter" 
    xmlns:local="clr-namespace:XamDataGridSample01"
    x:Class="XamDataGridSample01.MainWindow"
    Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <igDP:XamDataGrid DataSource="{Binding People}"/>
    </Grid>
</Window>

実行すると以下のような表示になります。DateTime型などは自動的にカレンダーで編集が可能なようになっています。

英語圏では、このままでもよさそうですが日本語圏では、列のヘッダーを日本語にするのが一般的です。WPFのDataGridと違い、XamDataGridは、ColumnsプロパティではなくFieldLayoutsプロパティのFieldsプロパティ（コンテンツプロパティなのでFieldLayoutsの直下に記述できます）を使用します。Fieldsプロパティには以下のような****Fieldクラスを指定します。

• CheckBoxField
• ComboBoxField
• CurrencyField
• DateTimeField
• Field
• MaskedTextField
• NumericField
• TemplateField
• TextField
• UnboundField

名前から大体どんな型に使用すればいいフィールドなのか予想がつくようになっています。普通のField型を使用すると、データ型に応じて適切な表示を行ってくれるので、まずField型を使ってみるのがいいと思います。今回の例では、Salaryプロパティは金額なのでCurrencyFieldを使用する以外は通常のField型で十分な表示をしてくれます。Fieldは、Labelプロパティに列ヘッダーのラベルを指定し、Nameプロパティに表示するプロパティ名を指定します。先ほどのサンプルをFieldを使用して書き直したコードを以下に示します。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:igDP="http://infragistics.com/DataPresenter" 
    xmlns:local="clr-namespace:XamDataGridSample01"
    x:Class="XamDataGridSample01.MainWindow"
    Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <igDP:XamDataGrid DataSource="{Binding People}">
            <igDP:XamDataGrid.FieldLayouts>
                <igDP:FieldLayout>
                    <igDP:Field Label="名前" Name="Name"/>
                    <igDP:CurrencyField Label="給料" Name="Salary" />
                    <igDP:Field Label="誕生日" Name="Birthday"/>
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>
        </igDP:XamDataGrid>
    </Grid>
</Window>

実行するとヘッダーが日本語になっていることと、Salaryの列が金額表示になっていることが確認できます。