かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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型などは自動的にカレンダーで編集が可能なようになっています。

f:id:okazuki:20150421220922p:plain

英語圏では、このままでもよさそうですが日本語圏では、列のヘッダーを日本語にするのが一般的です。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の列が金額表示になっていることが確認できます。

f:id:okazuki:20150421221101p:plain