はじめに
日本では、限られたスペースに効率的に情報を入力する優れた紙帳票の文化があります。業務システムのユーザーインタフェースにも、使い慣れた紙帳票のレイアウトを求めるユーザーの声は少なくありません。
しかし、.NET Framework標準コンポーネント「GridView」では、Excelのようなシンプルなグリッド機能しか提供しないため、伝票明細のように1レコードを複数行で表したり、列の見出しが入り組んだりする複雑なレイアウトを実現するには、相当なカスタマイズの手間と工数がかかります。
MultiRow for Windows Formsは、セルを好きなように自由に組み込んでグリッドを作成できるとてもユニークなコンポーネントです。このコンポーネントを使えば、入力画面のレイアウトで「セルの結合」などは不要です。基本的なセルのほかにも、ボタン型やDateTimePicker型、NumericUpDown型、ComboBox型などいろいろなタイプのセルを収録しています。
今回は、このMultiRow for Windows Forms 5.0Jを使って、売り上げデータを入力するアプリケーションを作ってみました。
対象読者
Visual Basic/Visual C# 2005／2008を使ってプログラムを作ったことのある人。
必要な環境
Visual Basic 2005/2008、Visual C# 2005/2008、Visual Studio 2005/2008でプログラムが作れる環境。なお、Visual StudioのExpress Editonでは、MultiRowのデザイナは使用できません。
本プログラムはWindows Vista（SP2）上で動作するVisual Studio 2008を使用して作成し、動作確認を行っています。
プログラム実行時の注意事項
MultiRow for Windows Forms 5.0Jを使って作成したアプリケーションを配布する場合、MultiRow for Windows Forms 5.0Jのアセンブリファイルを添付する必要があります。これは、Common Language RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。
本記事のサンプルアプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。
- 「GrapeCity.Framework.MultiRow.v20.dll」（GrapeCity共通フレームワーク）
- 「.\ja\GrapeCity.Framework.MultiRow.v20.resources.dll」（日本語リソース）
- 「GrapeCity.Win.MultiRow.v50.dll」（グリッドコンポーネント）
- 「.\ja\GrapeCity.Win.MultiRow.v50.resources.dll」（日本語リソース）
これらのファイルを、プログラムを実行するフォルダへ、フォルダ構成を変えずに格納します。.NET Framework 2.0から追加されたクラスやメンバを使用しているので、バージョン2.0以降の.NET Frameworkがインストールされていることが必須条件です。
本稿のサンプルソースは、9月30日発売予定のMultiRow for Windows Forms 6.0Jでも利用可能です。新機能が搭載され、表現力もさらにアップしたバージョン6.0の詳細は、下記を参照ください。
コンポーネントのインストール
はじめてMultiRow for Windows Forms 5.0Jを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にMultiRow for Windows Forms 5.0Jをインストールする必要があります。
インストーラは、グレープシティのWebページからダウンロードできます。製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてくるので、ここからダウンロードします。ファイルはZIP形式で圧縮されており、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールの追加
MultiRow for Windows Forms 5.0Jをインストールしたら、ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、「.NET Frameworkコントロール」のアセンブリ名が「GrapeCity.Win.MultiRow」で始まるコンポーネント「GcMultiRow」です。
なお、既に同じ「GrapeCity.Win.MultiRow」名前空間のコンポーネントにチェックが付いていますが、これらのコントロールはMultiRowコンポーネントのデザイナで使用するコントロールなので、チェックは外さないでください。
GUIのデザイン
フォームのデザインは、図のようにデータ入力画面以外は標準コントロールを使用します。肝心の入力部分は、GcMultiRowコンポーネントを使用しています。このコンポーネントのデザイン方法については、次の項目で紹介します。
MultiRowコンポーネントについて
MultiRow for Windows Formsは、Excelシートのようなセルが行／列で構成されるグリッド系コントロールとは異なり、1レコード複数行表示や段組み型の入力インターフェースを作成できる、ユニークなグリッドコントロールです。
Visual Studioで、Windowsフォームにツールボックスからコントロールを貼り付けるのとまったく同じ感覚で、表のヘッダセルや繰り返し表示部分のセルを配置できます。また、グリッドにはボタンやコンボボックス、日付ピッカーなど、入力を支援する便利なセルも配置できるので、アプリケーションの操作性がぐっと向上します。
グリッドの作成は、Visual Studioのフォームデザイナと連動した専用のグリッドデザイナを使用して行います。イメージ的には、Microsoft Accessのレポート作成画面のような感じですが、よりデザインしやすい設計になっています。このデザイナには、GcMultiRowコンポーネント専用のコントロールを配置したツールボックスが表示され、ドラッグ＆ドロップするだけで簡単にレイアウトできます。
各コントロールは、それぞれ設定されているプロパティを操作することで、動作や形状を変化させることができます。
デザイナは「設計時」画面でデザインし、その結果を「実行時」画面で確認できます。この画面では、実際にデータを入力して仕上がりを確認できます。
また、「印刷プレビュー」画面では、実際に印刷される状態を確認することもできます。
テンプレートとデータソース
GcMultiRowコンポーネントには、テンプレートと呼ばれるグリッドコントロールの雛形が用意されています。また、グリッドコントロールには、データベースのデータをデータソースとして連結させることができます。そのため、データソースがあれば、新規にグリッドをデザインする際、実行時に割り当てられたテンプレートとデータソースを基に表画面を作成できます。データソースが連結されていないときは、グリッドコントロールの行数が使用されるので、自分でテンプレートを作成します。
テンプレートには、グリッドコントロールの基となるヘッダー、フッターおよびセルを自由に配置できます。行に配置されたセルは、グリッドの設定に合わせて繰り返し表示されます。
テンプレート上のすべての要素はインデックスを持ち、実行時の操作に利用できます。各セルへの参照には、セルの行列番号をインデックス番号として使用します。セルに入力された値を取得したい場合は、このインデックス番号を使用します。
グリッドの構成
GcMultiRowコンポーネントは、大きく分けると2つのセクションに分かれます。
1つは、「columnHeaderSection」で、グリッドのヘッダー部分にあたります。このセクションは繰り返し表示されません。ヘッダー表示に使用されるため、データ入力用コントロールを配置しても入力機能は使えません。あくまでも表示のみのエリアだと思ってください。
もう1つは、「row」と呼ばれるセクションで、ここにセルなどの入力コントロールを配置します。このセクションは、1セット作成すると自動的に繰り返し表示されるようになります。
これら2つのエリアは、ドラッグして自由にサイズを変えることができます。
使用できるセルのタイプ
rowには、いろいろなタイプのセルを組み込んで使うことができます。
- 基本セル（Cell）
- ヘッダー型セル（HeaderCell）
- 列ヘッダー型セル（ColumnHeaderCell）
- 行ヘッダー型セル（RowHeaderCell）
- 文字列型セル（TextBoxCell）
- ボタン型セル（ButtonCell）
- チェックボックス型セル（CheckBoxCell）
- コンボボックス型セル（ComboBoxCell）
- マスク型セル（MaskedTextBoxCell）
- 日付型セル（DateTimePickerCell）
- 数値型セル（NumericUpDownCell）
- ラベル型セル（LabelCell）
- リンクラベル型セル（LinkLabelCell）
- イメージ型セル（ImageCell）
- プログレスバー型セル（ProgressBarCell）
- リッチテキスト型セル（RichTextBoxCell）
- ラジオグループ型セル（RadioGroupCell）
- ユーザー定義セル
GcMultiRowコンポーネントのデザイン
では、実際に入力画面を作成してみましょう。今回は、「通販ショップの売り上げ情報を入力する画面」というシチュエーションで、アプリケーションを作成してみました。
テンプレートの配置とデザイン
既に標準コントロールを配置しているフォームに、ツールボックスからGcMultiRowコンポーネントをドラッグ＆ドロップし、サイズをフォームに合わせます。
次に、Visual Studioのメニューから、［プロジェクト］-［新しい項目の追加］を選びます。
ダイアログボックスにある［MultiRow 5.0 テンプレート］をクリックし、［追加］ボタンを押します。
自動的にデザイナ画面が表示され、プロジェクトに「Template1.cs」というファイルが追加されます。これがテンプレートです。今回は、連結するデータソースがないので、空白のグリッドを持ったテンプレートが挿入されています。
デザイナが表示されると、ツールボックスも「コモンセル」というGcMultiRowコンポーネント専用コントロールが表示されたものに変わります。Visual Studioにデザイナ専用のツールバーが表示され、主にコントロールの書式設定を行うことができます。
ヘッダーの作成
では、列見出しとなるヘッダーを作成してみましょう。使用するコントロールは「columnHeaderCell」で、「columnHeaderSection」に配置します。
- 通常のコントロールと同様、ツールボックスから「columnHeaderSection」にドラッグ＆ドロップし、サイズを調節します。
columnHeaderCellを「columnHeaderSection」にドラッグ＆ドロップし、サイズを調節する
- 見出しの文字は、プロパティウィンドウにある「Value」プロパティに設定します。
見出しの文字は「Value」プロパティに設定する
- 同様の方法で、7つのcolumnHeaderCellを並べます。「実行時」タブをクリックして、仕上がりを確認します。
「実行時」画面で仕上がりを確認する
「row」セクションのコントロールの配置
「設計時」タブをクリックして、今度は「row」セクションを作成します。
ここには、rowHeaderCell、textBoxCell、dateTimePickerCell、numericUpDownCellを配置します。一行には必ず一列しか並べられないという規則はなく、フォームへのコントロールの配置と同じように自由にレイアウトできるようになっています。
ヘッダーのデザインと同じスタイルになるように各コントロールを配置したら、「row」セクションの高さをコントロールまで縮小し、「実行時」タブをクリックして、仕上がりを確認します。
2行のセルが表示され、実際に値を入力して仕上がりを確認できます。
rowHeaderCellコントロールの機能
rowHeaderCellコントロールは、行の選択やインジケータの表示を行うコントロールです。データの入力は受けつけません。
このコントロールを行のヘッダに配置すると、セルにデータを入力した時点で次の入力行が自動的に現れます。また、rowHeaderCellコントロールはヘッダー型セルの機能に加えて、次の機能も使用できます。
- 行インジケータの表示／非表示
- 行のエラーの表示／非表示
- 行番号の表示
- 行選択の明示
行インジケータは、ShowIndicatorプロパティをTrueにすると表示され、その時々のセルの状態によって、次のようにインジケータが変わります。
| インジケータ | 説明 |
|---|---|
| 矢印インジケータ | RowHeaderCellを含む行が現在の行の場合、RowHeaderCellに矢印インジケータが表示されます。 |
| ペンインジケータ | ShowEditingIconがTrueで、いずれかのセルがUI操作によって編集されている場合、CurrentRowのRowHeaderCellにペンインジケータが表示されます。 |
| 星インジケータ | RowHeaderCellを含む行が、自動的に追加された新しい行の場合、RowHeaderCellに星インジケータが表示されます。 |
| 矢印および星インジケータ | RowHeaderCellを含む行が、自動的に追加された新しい行で、なおかつ現在の行でもある場合、RowHeaderCellに矢印および星インジケータが表示されます。 |
また、ValueFormatプロパティは、rowHeaderCellコントロールのキャプションの生成に使用されるStringを取得、または設定するプロパティです。次の値が使用できます。ここでは、1、2、3...と行番号が表示されるように「%1%」を設定しています。
| 書式 | 表示結果 |
|---|---|
| "%A%"または"%a%" | 連続したアルファベットが大文字または小文字で表示されます（%b%と指定すると、bから始まり、以下c、d、eと続きます）。 |
| "%n%" | 連続した数字が表示されます（%1%と指定すると、1から始まり、以下2、3、4と続きます）。 |
| "" | キャプションなし。 |
| "A" | 指定した静的文字列がキャプションとして表示されます（"A"と指定すると、すべてのキャプションが"A"になります）。 |
| "%A% and %B%" | 指定した静的および動的文字列がキャプションとして表示されます。"%A%"と"%B%"は動的に変更され、"and"はそのまま表示されます（"A and B"と指定すると、"A and B"から始まり、以下"B and C"、"C and D"、"D and E"と続きます）。 |
| "%Zz%" | 文字列が2文字の場合は、指定した書式に従って大文字小文字が決定されます。2文字を超える場合は書式の1文字目が適用されます（"aa"は"Aa"、"aaa"は"AAa"、"aaaa"は"AAAa"と表示されます）。 |
| "%zZ%" | 文字列が2文字の場合は、指定した書式に従って大文字小文字が決定されます。2文字を超える場合は書式の1文字目が適用されます（"aa"は"aA"、"aaa"は"aaA"、"aaaa"は"aaaA"と表示されます）。 |
| "%A{n}%" | 指定した文字で始まる連続したアルファベットが、{n}で指定した数ずつ増えながら表示されます。{n}はステップ数を示します（"%A{2}%"と指定すると、"A"から始まり、以下"C"、"E"、"G"と続きます）。 |
| "%A{-n}%" | 上記とほぼ同じですが、指定した文字から、{n}で指定した数ずつ減りながら表示される点が異なります。"A"より前の文字にはemダッシュが付きます（"%B{-1}%"と指定すると、"B"から始まり、以下"A"、"-A"、"-B"と続きます）。 |
| "%1991{n}%" | 数字が表示されます。{n}は、直前に指定された数字の増分を示します（"%1991{2}%"と指定すると、"1991"から始まり、以下"1993"、"1995"、"1997"と続きます）。 |
| "%1991{-n}%" | 数字が表示されます。{-n}は、直前に指定された数字の減分を示します（"%1991{-2}%"と指定すると、"1991"から始まり、以下"1989"、"1987"、"1985"と続きます）。 |
| "\%" | 特殊文字（予約されている文字）を表示するには、前に円記号（\）を付けます（"\%"と指定すると、"%"と表示されます）。 |
| "%%" | キャプションなし（""と同じ）。 |
| "\{" | 中カッコ（{）を表示するには、前に円記号（\）を付けます（"\{"と指定すると、"{"と表示されます）。 |
| "\\" | 円記号（\）を表示するには、前にもう1つ円記号を付けます（"\\"と指定すると、"\"と表示されます）。 |
作成したGcMultiRowコンポーネントのデザインをフォームに反映する
ここまで作成したら、GcMultiRowコンポーネントのデザインをフォームに反映させます。
フォームデザイナに切り替え、Visual Studioの［ビルド］-［リビルド］メニューを実行します。すると、ツールボックスに「xxxコンポーネント」というタブが作成され、「Template1」というコンポーネントが作成されます。これをフォームにドラッグ＆ドロップします。
次に、GcMultiRowコンポーネントの「Tenplate」プロパティに、この「Template1」を設定します。これで、GcMultiRowコンポーネントのデザインをフォームに反映できます。
以降、デザイナでグリッドのデザインを変更した場合は、Visual Studioの［ビルド］-［リビルド］メニューを実行してください。この操作を行わないと、GcMultiRowコンポーネントのデザインをフォームに反映することができません。
セルのデータを取得する
セルに入力された値を取得するには、GcMultiRowクラスのGetValueメソッドを使用します。メソッドの引数は2つで、データを取り出したい位置のセルの行列番号を指定します。
GetValueメソッドの書式
Public Function GetValue(ByVal rowIndex As Integer, _ ByVal cellIndex As Integer _ ) As Object
public object GetValue(int rowIndex, int cellIndex);
| 引数 | 説明 |
|---|---|
| rowIndex | セルの行インデックス |
| cellIndex | セルの列インデックス |
セルの行番号は最も上の行が「0」になり、列番号はセルを配置した順に自動的に割り振られます。セルの列インデックスを確認するには、デザイナで［テンプレート］-［セルの情報］-［インデックス］をオンにします。
このプログラムでは、「合計金額」に入力された値を取り出し、購入金額の合計をMaskedTextBoxコントロールのDoubleClickイベントハンドラで合計するようにしました。このとき、GcMultiRowクラスのRowCountプロパティで、現在何行のデータが入力されているのかを把握し、その行数分の合計を出すようにしています。
Dim sum As Integer = 0
Private Sub MaskedTextBox2_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles MaskedTextBox2.DoubleClick
Dim cnt As Integer = 0
Dim i As Integer
cnt = Me.GcMultiRow1.RowCount
For i = 0 To cnt - 1
sum += Convert.ToInt32(Me.GcMultiRow1.GetValue(i, 6))
Next
Me.MaskedTextBox2.Text = Convert.ToString(sum)
End Sub
int sum = 0;
private void maskedTextBox2_DoubleClick(object sender, EventArgs e)
{
int cnt = 0;
int i ;
cnt = gcMultiRow1.RowCount;
for (i = 0; i <= cnt - 1; i++ )
{
sum += Convert.ToInt32(gcMultiRow1.GetValue(i, 6));
}
maskedTextBox2.Text = Convert.ToString(sum);
}
まとめ
このようにMultiRow for Windows Forms 5.0JのGcMultiRowコンポーネントは、単純な行列ではない複雑なレイアウトの表を、簡単に作成できるコンポーネントです。また、豊富なセル型がエンドユーザーの入力を助けてくれるので、ユーザビリティの向上につながります。アプリケーション操作の学習にかかる時間を短縮できるというメリットも生まれます。
今回は、簡単な売り上げデータ入力のアプリケーションを作りました。ページの関係で、MultiRow for Windows Forms 5.0Jのほんのわずかの機能しか紹介できませんでしたが、このアプリケーションを作るのにも大して時間はかからなかったので、グリッドの作り込みやDBデータの表示で苦労されている方々には、大きなメリットを生み出すコンポーネントだと思います。
次回は、もう少しこのアプリケーションの機能を拡張していきたいと思います。
製品情報
