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つ円記号を付けます（"\\"と指定すると、"\"と表示されます）。 |
