マス目の設定

GcCharMaskCellのマス目の設定方法について解説します。

マス目の概要

セルに表示されるマス目は、CharBoxesプロパティが参照するCharBoxCollectionオブジェクトによって定義されます。CharBoxCollectionオブジェクトは、1つ１つのマス目を表すCharBoxオブジェクトの集合を保持するコレクションです。つまり、キャラクタボックスコントロールでは、オブジェクトに保持されるCharBoxオブジェクトをマス目の１つ１つとして表示します。

マス目を表すCharBoxオブジェクトは、次の３つの種類のオブジェクトを持つことができます。

InputBox（入力用の枠）
LiteralBox（リテラル文字）
SeparatorBox（ハイフン）

InputBoxは、入力用の枠で１つのInputBoxに対して1文字入力することができます。LiteralBoxは、任意の文字をリテラル文字として表示します。SeparatorBoxは、入力枠を区切るハイフンを表示します。

マス目の設定

コードによる設定

GcCharMaskCellにマス目を設定するには、CharBoxesプロパティが参照するCharBoxCollectionオブジェクトのAddメソッドを使用します。また、設定されているマス目をすべて削除するには、Clearメソッドを使用します。

次のサンプルコードは、郵便番号用の入力書式を例としたCharBoxを追加する例です。尚、マス目間のスペースや境界線、マス目のサイズ等の設定も行っています。これらの外観の設定に関する詳細は「外観の設定」を参照してください。

Visual Basic
C#

Imports GrapeCity.Win.MultiRow
Imports InputManCell = GrapeCity.Win.MultiRow.InputMan

Dim GcCharMaskCell1 = New InputManCell.GcCharMaskCell()
GcCharMaskCell1.Size = New Size(200, 28)

' マス目間のスペースを設定します。
GcCharMaskCell1.CharBoxSpacing = 2

' 既定値のマス目の設定をクリアします。
GcCharMaskCell1.CharBoxes.Clear()

' 入力枠用の境界線を定義します。
Dim borderSingle As New InputManCell.CharBoxBorder(New InputManCell.Line(GrapeCity.Win.Editors.LineStyle.Single, Color.Black))

' リテラル文字とハイフン用の境界線を定義します。
Dim borderNone As New InputManCell.CharBoxBorder(New InputManCell.Line(GrapeCity.Win.Editors.LineStyle.None, Color.White))

' リテラル文字を作成します。
Dim aLiteralBox As New InputManCell.LiteralBox()
aLiteralBox.Size = New System.Drawing.Size(14, 24)
aLiteralBox.Text = "〒"
aLiteralBox.Border = borderNone

' 郵便番号の前の３桁用の枠を作成します。
Dim aInputBoxl As New InputManCell.InputBox
aInputBoxl.Size = New System.Drawing.Size(18, 24)
aInputBoxl.Border = borderSingle

' ハイフンを作成します。
Dim aSeparatorBox As New InputManCell.SeparatorBox()
aSeparatorBox.Size = New System.Drawing.Size(10, 24)
aSeparatorBox.Border = borderNone

' 郵便番号の後の４桁用の枠を作成します。
Dim aInputBoxs As New InputManCell.InputBox
aInputBoxs.Size = New System.Drawing.Size(16, 20)
aInputBoxs.Border = borderSingle

' セルに作成したマス目を追加します。
GcCharMaskCell1.CharBoxes.Add(aLiteralBox)
GcCharMaskCell1.CharBoxes.Add(DirectCast(aInputBoxl.Clone, InputManCell.CharBox))
GcCharMaskCell1.CharBoxes.Add(DirectCast(aInputBoxl.Clone, InputManCell.CharBox))
GcCharMaskCell1.CharBoxes.Add(DirectCast(aInputBoxl.Clone, InputManCell.CharBox))
GcCharMaskCell1.CharBoxes.Add(aSeparatorBox)
GcCharMaskCell1.CharBoxes.Add(DirectCast(aInputBoxs.Clone, InputManCell.CharBox))
GcCharMaskCell1.CharBoxes.Add(DirectCast(aInputBoxs.Clone, InputManCell.CharBox))
GcCharMaskCell1.CharBoxes.Add(DirectCast(aInputBoxs.Clone, InputManCell.CharBox))
GcCharMaskCell1.CharBoxes.Add(DirectCast(aInputBoxs.Clone, InputManCell.CharBox))

' 設定したマス目のサイズを有効にするために
' AutoSizeプロパティをFalseに設定します。
For Each aCharBox As InputManCell.CharBox In GcCharMaskCell1.CharBoxes
    aCharBox.AutoSize = False
Next

' MultiRowのテンプレートを設定します。  
GcMultiRow1.Template = Template.CreateGridTemplate(New Cell() {GcCharMaskCell1})
GcMultiRow1.RowCount = 5

using GrapeCity.Win.MultiRow;
using InputManCell = GrapeCity.Win.MultiRow.InputMan;

InputManCell.GcCharMaskCell gcCharMaskCell1 = new InputManCell.GcCharMaskCell();
gcCharMaskCell1.Size = new Size(200, 28);

// マス目間のスペースを設定します。 
gcCharMaskCell1.CharBoxSpacing = 2;

// 既定値のマス目の設定をクリアします。 
gcCharMaskCell1.CharBoxes.Clear();

// 入力枠用の境界線を定義します。 
InputManCell.CharBoxBorder borderSingle = new InputManCell.CharBoxBorder(new InputManCell.Line(GrapeCity.Win.Editors.LineStyle.Single, Color.Black));

// リテラル文字とハイフン用の境界線を定義します。 
InputManCell.CharBoxBorder borderNone = new InputManCell.CharBoxBorder(new InputManCell.Line(GrapeCity.Win.Editors.LineStyle.None, Color.White));

// リテラル文字を作成します。 
InputManCell.LiteralBox aLiteralBox = new InputManCell.LiteralBox();
aLiteralBox.Size = new System.Drawing.Size(14, 24);
aLiteralBox.Text = "〒";
aLiteralBox.Border = borderNone;

// 郵便番号の前の３桁用の枠を作成します。 
InputManCell.InputBox aInputBoxl = new InputManCell.InputBox();
aInputBoxl.Size = new System.Drawing.Size(18, 24);
aInputBoxl.Border = borderSingle;

// ハイフンを作成します。 
InputManCell.SeparatorBox aSeparatorBox = new InputManCell.SeparatorBox();
aSeparatorBox.Size = new System.Drawing.Size(10, 24);
aSeparatorBox.Border = borderNone;

// 郵便番号の後の４桁用の枠を作成します。 
InputManCell.InputBox aInputBoxs = new InputManCell.InputBox();
aInputBoxs.Size = new System.Drawing.Size(16, 20);
aInputBoxs.Border = borderSingle;

// コントロールに作成したマス目を追加します。 
gcCharMaskCell1.CharBoxes.Add(aLiteralBox);
gcCharMaskCell1.CharBoxes.Add((InputManCell.CharBox)aInputBoxl.Clone());
gcCharMaskCell1.CharBoxes.Add((InputManCell.CharBox)aInputBoxl.Clone());
gcCharMaskCell1.CharBoxes.Add((InputManCell.CharBox)aInputBoxl.Clone());
gcCharMaskCell1.CharBoxes.Add(aSeparatorBox);
gcCharMaskCell1.CharBoxes.Add((InputManCell.CharBox)aInputBoxs.Clone());
gcCharMaskCell1.CharBoxes.Add((InputManCell.CharBox)aInputBoxs.Clone());
gcCharMaskCell1.CharBoxes.Add((InputManCell.CharBox)aInputBoxs.Clone());
gcCharMaskCell1.CharBoxes.Add((InputManCell.CharBox)aInputBoxs.Clone());

// 設定したマス目のサイズを有効にするために 
// AutoSizeプロパティをFalseに設定します。 
foreach (InputManCell.CharBox aCharBox in gcCharMaskCell1.CharBoxes)
{
    aCharBox.AutoSize = false;
}

gcMultiRow1.Template = Template.CreateGridTemplate(new Cell[] { gcCharMaskCell1 });
gcMultiRow1.RowCount = 5;

(図) 上記サンプルコードを適用したGcCharMaskCell

デザイン画面での設定

デザイン画面では「キャラクタボックスの編集」エディタから容易な設定が可能です。このエディタは次のいずれかの方法で起動でき、マス目の詳細を設定できます。

セルのスマートタグから「キャラクタボックスの編集...」を選択
プロパティウィンドウのCharBoxes プロパティをアクティブした時に表示される「…」ボタンを押下