はじめに
開発者にとって、入力インターフェイスのデザインはいつも悩みの種。特に表好きな日本人は、データ入力にも表形式のデザインを好む傾向にあります。表形式の入力インターフェイスは、デザインだけでなく入力処理のプログラミングも煩雑になります。お手軽に使えるグリッドコンポーネントがあれば、開発工数を大幅に減らすことができるのですが…。
今回紹介する、ComponentOne Studio Enterprise 2011J（または、ComponentOne Studio for WPF 2011J）のFlexGrid for WPFに含まれるC1FlexGridは、そんな期待に応えてくれるコンポーネントです。セルの追加やヘッダーの設定など、多くの設定はプロパティで行うことができ、データソースとの連結はもちろん、複数行ヘッダや複数列ヘッダ、固定列と固定行の設定、行や列の並び替えやサイズの自動調整など、多彩な機能を持っています。
今回は、このC1FlexGridコンポーネントを使って、表形式でデータの入力が行え、かつ入力データをCSV形式のテキストファイルに保存できるプロパティを備えたWPFアプリケーションを作成してみました。
対象読者
Visual Basic、Visual C# 2010を使ってプログラムを作ったことのある人
必要な環境
Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。なお、本プログラムはWindows Vista上で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。
動作環境として、あらかじめ.NET Framework 4.0がインストールされている必要があります。動作するOSは、以下を参照ください。
| OS | 32ビット（x86） | 64ビット（x64） |
| Windows XP 日本語版 | ● | ● |
| Windows Vista 日本語版 | ● | ● |
| Windows 7 日本語版 | ● | ● |
| Windows Server 2003 日本語版 | ● | ● |
| Windows Server 2008 日本語版 | ● | ● |
| Windows Server 2008 R2 日本語版 | - | ● |
コンポーネントのインストール
この記事の手順を試すには、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2011J（または、ComponentOne Studio for WPF 2011J）をインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。
製品のトライアル版一覧ページにてダウンロードしたい製品にチェックを入れ、ページ右上部の［申込フォーム］をクリックしてグレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コンポーネントの追加
ComponentOne Studio Enterprise 2011J（または、ComponentOne Studio for WPF 2011J）をインストールしたら、ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、［WPFコンポーネント］でアセンブリ名が「C1.WPF.FlexGrid」の「C1FlexGrid」です。
C1FlexGridコンポーネントについて
C1FlexGridは、連結または非連結データを表形式で表示／入力／編集できるWPF用データグリッドコンポーネントです。データソースと連結せずにコントロール内でデータを管理できるアンバウンドモードや、複数の行列をヘッダにする、行列の固定、行や列の並び替え機能やデータのグループ化とグループ集計、サイズの自動調整など、Windowsフォーム用のFlexGridが備える機能の多くを継承しており、グリッドコントロールに必要とされる基本機能をしっかりとサポートしています。
行や列、ヘッダの文字色や背景色などの外観設定は、XAMLを意識することなく手軽にプロパティで設定でき、任意のセル範囲をマージできるカスタムマージや、セルの編集時と表示時にそれぞれほかのコントロールの機能を利用できるカスタムセルなども備え、柔軟なセルレイアウトと操作性の良いデータ入力インターフェイスを実現します。
C1FlexGridコンポーネントの各部の名称
C1FlexGridコンポーネントは、固定行列（ヘッダ）、セル、垂直／水平スクロールバーで構成されます。配置したばかりのC1FlexGridコンポーネントは、デフォルトではヘッダやセルは一切配置されておらず、それぞれColumns／Rowsプロパティを使用して追加します。
行列ヘッダは、プロパティで設定できるのは1行分だけで、複数行のヘッダを設定する場合はコードからオブジェクトを追加する方法を取ります。通常のデータ用セルは、デフォルトでデータを入力したり表示させる機能を持っています。また、スクロールバーは行列がコンポーネントに収まりきらないと自動的に表示されます。
セルの参照とセル番地について
データを出し入れするセルは、それぞれ行列の番号によって参照します。例えば、1行目1列目のセルは（0,0）といったように、（行番号, 列番号）の番号で表され、行列が増えるたびにその数値が増えていきます。
多彩な機能の数々
C1FlexGridコンポーネントはデータグリッドコンポーネントですが、その機能は大変多彩です。1回では全てを紹介しきれませんので、主な特徴を紹介しておきます。
-
データのグループ化機能
WPFの主要なデータ連結インターフェイスである、ICollectionViewインターフェイスを使用して、C1FlexGridコンポーネントにデータを連結すると、セルに入力されている同じデータをグループ化してまとめることができます。
データのグループ化（ヘルプファイルより抜粋）
-
グループ集計機能
データをグループ化すると、データによってはグループごとに集計したい場合があります。C1FlexGridコンポーネントでは、以下の集計計算を行うことができます。
グループ集計機能機能 説明 Sum グループ内のすべての値の合計を返します Count グループ内のnull以外の数を返します Average グループ内のnull以外のセルの平均値を返します Maximum グループ内の最大値を返します Minimum グループ内の最小値を返します Range グループ内の最大値と最小値の差を返します Std グループ内の値の標本標準偏差を返します（n-1に基づく式を使用） Var グループ内の値の標本分散を返します（n-1に基づく式を使用） StdPop グループ内の値の母標準偏差を返します（nに基づく式を使用） VarPop グループ内の値の母分散を返します（nに基づく式を使用） グループ集計機能のサンプル（ヘルプファイルより抜粋）
-
データのソート
C1FlexGridコンポーネントは、データの並び変え（ソート）機能も持っています。列ヘッダをクリックすると、データは昇順または降順でソートされます。グリッドをソートすると、対応する列に、現在のソート方向を示す三角形が表示されます。また、一般的なソート切り替え動作に加えて、［Ctrl］キーを押しながら列ヘッダをクリックすることでソートを解除できます。これにより、列に適用されているソートは解除されデータは元の順序で表示されます。
-
データのフィルタ処理
ICollectionViewインターフェイスでは、Filterプロパティを使用したデータのフィルタ処理がサポートされているため、この機能を使用してデータをフィルタリングできます。多数のデータの中から、同じキーワードを持つデータを抽出したい場合などは、このフィルタ機能を使うとデータの絞り込みが簡単に行えます。
-
データのアンバウンドモードでの使用
C1FlexGridコンポーネントは、データを非連結モードで使用することもできます。単にグリッドに行と列を追加するだけで、データグリッドとして使用できます。
-
セルのマージ
C1FlexGridコンポーネントは、セルの結合をサポートしています。行列どちらの方向でも隣接するセル同士を結合し1つのセルとして扱うことができます。セル結合は行列ヘッダに対しても行うことができます。
列ヘッダのセルを結合
-
複数行列のヘッダ
C1FlexGridコンポーネントは、行および列ヘッダのセルをサポートするとともに、複数セルのヘッダをサポートしています。たとえば列ヘッダを2行にして、1行に年度を表示しもう1行に四半期を表示する、などという表を作成できます。
複数行列のヘッダ作成例（ヘルプファイルより抜粋）
アプリケーションの作成
では、さっそくアプリケーションを作成しましょう。作成するのは、非連結データの入力インターフェイスを持った簡単な入門用アプリケーションです。
C1FlexGridコンポーネントは、8列10行のセルを持った表形式で、列ヘッダを2行持たせます。また、2行目のヘッダは同じテキストのセルを連結していますが、この処理はコードから行います。ボタンを1つ持ち、このボタンを押すとセルに入力されたデータをテキストファイルに保存します。
GUIのデザイン
今回使用するのは、C1FlexGridコンポーネントとButtonコントロールのみです（C1FlexGridコンポーネントの設定は後述）。
C1FlexGridコンポーネントの設定
まずは、C1FlexGridコンポーネントを配置し、セルを設定します。C1FlexGridコンポーネントはデフォルトではセルが設定されていないので、プロパティを使って設定します。
ツールボックスからC1FlexGridコンポーネントのアイコンをクリックし、ドラッグ＆ドロップします。配置したら、Window、Grid、C1FlexGridを適当なサイズにします。
プロパティウィンドウで「Columns」プロパティを表示し、値欄の［...］ボタンを押します。コレクションエディタが起動するので［追加］ボタンをクリックし、列を追加します。
コレクションエディタの右ペインで「データ」をクリックして展開し、「Header」プロパティに「種類」と入力します。また、「レイアウト」をクリックして展開し、「HeaderHorizontalAlignment」プロパティに「"Center"」と入力します。これで、この列ヘッダに文字列を設定し、水平方向の文字位置をセンターに設定できました。
同じように「Column」オブジェクトを追加し、以下の「Header」「HeaderHorizontalAlignment」プロパティを設定します。
| Headerプロパティ | HeaderHorizontalAlignmentプロパティ |
| "食品名" | "Center" |
| "エネルギー" | "Center" |
| "たんぱく質" | "Center" |
| "脂質" | "Center" |
| "炭水化物" | "Center" |
| "ナトリウム" | "Center" |
| "カルシウム" | "Center" |
コレクションエディタを閉じ、プロパティウィンドウに戻ったら、次は「Rows」プロパティを表示します。そして値欄の［...］ボタンを押すと、行を追加するコレクションエディタが表示されるので、［追加］ボタンを10回クリックして行を10行追加します。
非連結データの場合は、この時点でアプリケーションを実行するとセルにデータを入力できます。C1FlexGridコンポーネントは、それぐらい簡単に表形式の入力インターフェイスを構築できます。
複数列ヘッダの作成
続いて、各成分の単位を設定する列ヘッダを追加します。これは、コードから行います。
まず、バリアント型の変数を用意し、C1FlexGridクラスのColumnHeadersコレクションオブジェクトを格納します。このコレクションオブジェクトクラスのAddメソッドを、引数にRowオブジェクトのコンストラクタを指定して実行すると、新しい列ヘッダ用の行が追加されます。
追加された列ヘッダは2行目になるため、各列ヘッダセルの番地は、左から（1,0）（1,1）という指定になります。これを使って、列名「エネルギー」から順番に栄養素の単位を入力していきます。
Imports C1.WPF.FlexGrid
Imports System.IO
Class MainWindow
Public Sub New()
' この呼び出しはデザイナーで必要です。
InitializeComponent()
' InitializeComponent() 呼び出しの後で初期化を追加します。
'--- C1FlexGridのカスタマイズ ------------------------------------------
'列ヘッダの追加
Dim ch = C1FlexGrid1.ColumnHeaders
ch.Rows.Add(New Row())
ch(1, 2) = "Kcal"
Dim i As Integer
For i = 3 To 5
ch(1, i) = "g"
Next
For i = 6 To 7
ch(1, i) = "mg"
Next
using C1.WPF.FlexGrid;
using System.IO;
namespace WPF_FlexGrid_cs
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
setcell();
}
// --- C1FlexGridのカスタマイズ ------------------------------------------
public void setcell()
{
//列ヘッダの追加
var ch = C1FlexGrid1.ColumnHeaders;
ch.Rows.Add(new Row());
ch[1, 2] = "Kcal";
int i;
for(i=3;i<=5; i++)
{
ch[1, i] = "g";
}
for (i = 6; i <= 7; i++)
{
ch[1, i] = "mg";
}
}
列ヘッダセルのマージ
同じ単位の列ヘッダセルがいくつもあるので、これを1つにまとめます。まず、C1FlexGridクラスのAllowMergingプロパティに「AllowMerging.All」という値を設定します。これで、セルはすべてマージ可能になります。
次に、列ヘッダ2行目を指定して、AllowMergingプロパティを「true」に設定します。これで、同じ値のあるセルはすべて自動的に1つのセルにまとめられます。
'列ヘッダセルのマージ C1FlexGrid1.AllowMerging = AllowMerging.All ch.Rows(1).AllowMerging = True
//列ヘッダセルのマージ C1FlexGrid1.AllowMerging = AllowMerging.All; ch.Rows[1].AllowMerging = true;
セルデータを保存する処理
最後に、セルに入力したデータをテキストファイルに保存する処理を実装します。WindowにButtonコントロールを配置し、このClickイベントハンドラに作成します。
セルデータの参照は、Cellsプロパティを使用します。ここにセル番地を指定し、格納されているデータを取りだします。ファイルへの書き出しは、FileクラスのWriteAllTextメソッドを使用し、「,」を付け加えながら書き出します。ここでは、1行のセルのみ書き出すようにしていますが、forステートメントをネストすれば全行のセルデータを書き出すこともできます。
Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs)
Dim i As Integer
Dim data As String = ""
Try
For i = 0 To 7
data += C1FlexGrid1.Cells(0, i) + ","
File.WriteAllText("data1.txt", data)
Next
MessageBox.Show("データをファイルに保存しました。", "ファイル保存", MessageBoxButton.OK, MessageBoxImage.Information)
Catch ex As FileNotFoundException
MessageBox.Show("ファイル処理に失敗しました", "ファイルエラー", MessageBoxButton.OK, MessageBoxImage.Error)
End Try
End Sub
private void button1_Click(object sender, RoutedEventArgs e)
{
int i;
String data = "";
try
{
for(i=0; i<=7; i++)
{
data += C1FlexGrid1.Cells[0, i] + ",";
File.WriteAllText("data1.txt", data);
}
MessageBox.Show("データをファイルに保存しました。", "ファイル保存", MessageBoxButton.OK, MessageBoxImage.Information);
}
catch(FileNotFoundException ex)
{
MessageBox.Show(ex.Message, "ファイルエラー", MessageBoxButton.OK, MessageBoxImage.Error);
}
}
まとめ
C1FlexGridコンポーネントはとても多機能なコンポーネントで、一度にすべての機能は紹介しきれません。今回は手始めに非連結データを使った表形式のデザインとファイルへの出力処理を扱ったアプリケーションを作成しました。
次回も引き続き、C1FlexGridコンポーネントの優れた機能を紹介していきます。
参考文献
