Quantcast
Channel: かずきのBlog@hatena
Viewing all articles
Browse latest Browse all 1387

XamDataGridを使ってみた

$
0
0

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
{
    publicclass Person
    {
        publicstring Name { get; set; }
        publicint Salary { get; set; }
        public DateTime Birthday { get; set; }
    }

    publicclass 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は以下のようになります。

<Windowxmlns="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を使用して書き直したコードを以下に示します。

<Windowxmlns="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


Viewing all articles
Browse latest Browse all 1387

Trending Articles