はじめに
GcTextBoxコントロールを使うと、「入力可能文字種を設定してそれ以外の文字種のデータは受け付けないようにする」「違う文字種のデータを設定した文字種に自動的に変換する」「入力可能文字種を透かし文字でユーザーに知らせておく」など、はじめから必要な文字種でデータを入力してもらうような設定が行えます。
また、「テキストボックスに入りきらないデータを自動的に省略記号で表示する」「マウスポインタを重ねると入力データをすべて表示する」など、UIのレイアウトにも配慮した機能まで兼ね備えています。
そこで、今回はこのGcTextBoxコントロールを使って、これらの機能を使った簡単な入力ページを作成してみました。
対象読者
Visual Basic/Visual C# 2010を使ってプログラムを作ったことのある人。また、SilverlightおよびXAMLに対する基礎知識が必要です。
必要な環境
Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。また、Silverlight 4 Tools for Visual Studio 2010をインストールしていることが必須条件です。
なお、本プログラムはWindows Vista上で動作するVisual Studio 2010およびSilverlight 4 Tools for Visual Studio 2010を使用して作成し、Internet Explorer 8で動作確認を行っています（※注意）。
前回の記事から、Visual Studio 2010＋Silverlight 4 Tools for Visual Studio 2010の開発環境に対応しています。
これまでのVisual Studio 2008＋Silverlight 3 Tools for Visual Studio 2008の環境では、サンプルソースは動作しないので注意してください。
サンプルソースを実行するには、C#、VBともに次の設定を行う必要があるため、注意してください（※○○にはcsまたはvbのいずれかが入ります）。
- ソリューションエクスプローラでASP.NET Webサイトプロジェクト（sl_imtbox_○○.Web）を右クリックし、［スタートアッププロジェクトに設定］を選択
- ソリューションエクスプローラでsl_imtbox_○○TestPage.aspxを右クリックし、［スタートページに設定］を選択
コンポーネントのインストール
この記事の手順を試すには、Visual Studio、Visual Basic、Visual C#の開発環境にInputMan for Silverlight 1.0Jをインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。
製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
GcTextBoxコントロールについて
GcTextBoxコントロールは、次のようなVisual Studio標準のテキストボックスにはない高度な機能を提供します。
- 特定の文字種だけ入力を受け付ける文字種限定入力
- 入力可能な文字種へ自動変換するオートコンバート機能
- 透かし文字表示
- 入力候補値の表示
- 複数行入力時の罫線表示
- オーバーフロー文字の表示
- 省略文字表示
文字種の設定
GcTextBoxコントロールは、文字種を設定することで入力できる文字の種類を制限できます。
文字種の制限をかけると、指定した文字種以外でデータが入力されると受け付けないか、自動変換が可能であれば指定した文字種に変換されます。たとえば、数値しか受け付けないように設定したとき、文字が入力されてもGcTextBoxコントロールは受け付けません。
また、全角カナに文字種を設定したGcTextBoxコントロールに、ひらがなを入力すると自動的にカタカナに変換されます。
設定可能な文字種は表のとおりで、プロパティウィンドウのリストを使って、Formatプロパティに全角または半角の記号で文字種を設定します。
| 全角 | 半角 | 説明 |
| Ａ | A | 大文字のアルファベット（A～Z） |
| ａ | a | 小文字のアルファベット（a～z） |
| Ｋ | K | カタカナ（促音・拗音の小書き表記あり） |
| Ｎ | N | カタカナ（促音・拗音の小書き表記なし） |
| ９ | 9 | 数字（0～9） |
| ＃ | # | 数字および数字関連記号（0～9、+ - $ % \ , .） |
| ＠ | @ | 記号（! " # $ % & ' ( ) - = ^ ~ \ | @ ` [ { ; + : * ] } , < . > / ? _） |
| Ｂ | B | 2進数（0または1） |
| Ｘ | X | 16進数（0～9、A～F） |
| Ｊ | - | ひらがな（促音・拗音の小書き表記あり） |
| Ｇ | - | ひらがな（促音・拗音の小書き表記なし） |
| Ｚ | - | すべての全角文字 |
| Ｔ | - | サロゲート ペア文字 |
| Ｓ | S | 空白文字 |
| - | H | すべての半角文字 |
| - | ^ | 指定した文字種に含まれないすべての文字 |
| - | \ | エスケープシーケンス |
未入力時に表示する透かし表示テキスト
コントロールにフォーカスがあるとき、およびコントロールにフォーカスがないときに、コントロールに透かし表示テキストを設定できます。
使用するプロパティはWatermarkNullおよびWatermarkDisplayNullで、それぞれ表示したい文字列を設定します。
また、WatermarkNullForegroundプロパティおよびWatermarkDisplayNullForegroundプロパティを使用することにより、それぞれのテキストを表示する際の文字色を指定できます。
入力候補値の表示
テキストコントロールで値が未入力のとき、入力候補となる値をあらかじめグレー表示できます。入力候補として表示されたテキストの値は、表示された候補値のまま入力値として適用できます。
入力候補値を表示するには、ShowRecommendedValueプロパティを使用し、表示される値はRecommendedValueプロパティで設定します。
省略文字
入力された文字列が、GcTextBoxコントロールの幅に収まりきらないときに、すべての文字が表示されていないことを示す省略文字を表示できます。省略文字の表示の有無やその表示位置は、Ellipsisプロパティで設定できます。
この機能を使えば、長文入力を受け付ける場合でもGcTextBoxコントロールの幅を広くとる必要がありません。
オーバーフローチップの表示
入力された文字列が、GcTextBoxコントロールの幅に収まりきらないときに、コントロールの上にマウスカーソルが置かれたときにオーバーフローチップを表示できます。
オーバーフローチップを表示するには、ShowOverflowTipプロパティを「True」に設定します。
省略文字と組み合わせて使うと効果が大きいです。
Webページの作成
では、Webページを作成してみましょう。使用するWebページは、まずグリッドを9行1列（行数は適当）に設定します。そして、一番上の行にタイトルを設定し、以降1行ずつTextBlockとGcTextBoxコントロールを配置します。GcTextBoxコントロールの設定は、この後説明します。
Silverlightプロジェクトの作成
まずは、Silverlightプロジェクトを作成します。Visual Studio 2010 Silverlight Tools 4.0をインストールし、Visual Studioで新しいプロジェクトを作成すると、［プロジェクトの種類］に［Silverlight］が追加されています。これを選んで［テンプレート］から［Silverlightアプリケーション］を選びます。
「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、［新しいWebプロジェクトの種類］でリストから［ASP.NET Webサイト］を選びます。
プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。このXAMLコードに、以下の名前空間を追加します。
xmlns:im="http://schemas.grapecity.com/windows/2010/inputman"
この名前空間の追加によって、XAMLでInputMan for Silverlightの各コントロールを使うことができるようになります。
そして、プロジェクトの「参照の追加」を使って、次の参照を追加します。
- GrapeCity.Silverlight.InputMan.dll
- GrapeCity.Silverlight.InputMan.Common.dll
全体のレイアウト作成
では、ページを作成していきましょう。作り方は、まずグリッドをアンケート項目の数だけ分割し、1行ずつStackPanelでTextBlockとGcTextBoxコントロールを配置していくだけです。ここでは、9行に分割しています。
グリッドと見出しの作成
グリッドはRowDefinitionsプロパティで複数行に分割し、最初の行にTextBlockで見出しと説明文を入れます。
<Grid x:Name="LayoutRoot" Background="White" >
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Width="450" Height="600" >
<Border BorderThickness="2" BorderBrush="MediumPurple" Background="AliceBlue" >
<Grid ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical">
<TextBlock Text="節電アンケート" HorizontalAlignment="Center" FontSize="18" Foreground="MediumPurple">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="2" Color="DarkGray" ShadowDepth="3"></DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
<TextBlock Text="節電に関するアンケートにご協力ください。" VerticalAlignment="Center" Height="22"
Width="240" Margin="20" />
</StackPanel>
氏名入力のGcTextBoxコントロールの設定
最初の入力インターフェイスは氏名を入力してもらいます。これには、GcTextBoxコントロールの文字種設定を「全角文字」以外は受け付けないようにし、ウォーターマークに「全角文字」と設定します。ウォーターマークの文字は透かし文字らしくするために、WatermarkDisplayNullForegroundプロパティを「LightBlue」にします。
<StackPanel Grid.Row="1" Orientation="Horizontal">
<TextBlock Text="氏名：" VerticalAlignment="Center" Margin="5" />
<im:GcTextBox Format="Ｚ" Width="150" WatermarkDisplayNull="全角文字"
WatermarkDisplayNullForeground="LightBlue" Margin="22,0,0,0" />
<TextBlock Text="例：全角 太郎" Foreground="DarkBlue" VerticalAlignment="Center"
Margin="5" />
</StackPanel>
フリガナ入力のGcTextBoxコントロールの設定
氏名のフリガナを全角のカタカナで入力してもらうために、GcTextBoxコントロールの文字種設定を「全角カタカナ」以外は受け付けないようにし、ウォーターマークも設定します。これで、このGcTextBoxコントロールは全角カタカナしか入力出来なくなりますが、全角のひらがなや半角のカタカナを入力すると自動的に全角のカタカナに変換してくれます。
<StackPanel Grid.Row="2" Orientation="Horizontal">
<TextBlock Text="フリガナ：" VerticalAlignment="Center" Margin="5" />
<im:GcTextBox Format="Ｋ" Width="150" WatermarkDisplayNull="全角カタカナ"
WatermarkDisplayNullForeground="LightBlue" />
<TextBlock Text="例：ゼンカク タロウ" Foreground="DarkBlue" VerticalAlignment="Center"
Margin="5" />
</StackPanel>
郵便番号入力のGcTextBoxコントロールの設定
郵便番号入力は、ハイフンを除いた7桁の半角数字しか受け付けないように、Formatプロパティを設定します。また、「MaxLength」プロパティを「7」に設定し、7文字以上入力出来ないように文字数の制限をかけます。文字数のカウント方法は「MaxLengthUnit」プロパティを「Char」に設定します。これで、このGcTextBoxコントロールは半角数字を7文字までしか受け付けないようになります。
また、ここでもウォーターマークを設定しておきます。
<StackPanel Grid.Row="3" Orientation="Horizontal">
<TextBlock Text="郵便番号：" VerticalAlignment="Center" Margin="5" />
<im:GcTextBox Format="9" Width="70" WatermarkDisplayNull="半角数字"
WatermarkDisplayNullForeground="LightBlue" MaxLength="7" MaxLengthUnit="Char" />
<TextBlock Text="例：0000000 （ハイフンを除く）" Foreground="DarkBlue" VerticalAlignment="Center"
Margin="5" />
</StackPanel>
住所入力のGcTextBoxコントロールの設定
このGcTextBoxコントロールではウォーターマーク以外に、長い住所が入力された場合に備えて省略表示とオーバーフロ－チップを設定します。省略表示は入力の最後尾を省略し、省略文字はデフォルトの「...」を使用します。
<StackPanel Grid.Row="4" Orientation="Horizontal">
<TextBlock Text="住所：" VerticalAlignment="Center" Margin="5" />
<im:GcTextBox Format="Ｚ" Width="232" WatermarkDisplayNull="全角文字"
WatermarkDisplayNullForeground="LightBlue" ShowOverflowTip="True"
Ellipsis="EllipsisEnd" Margin="22,0,0,0" />
</StackPanel>
これで出来上がりです。
まとめ
入力フォームを作成する場合は、とにかく入力データのチェックに神経を使いますが、入力時点でデータをきちんと管理できていれば、エラートラップに苦労する必要はありません。
GcTextBoxコントロールは、多彩な文字種設定で入力値に制限をかけられるので、エラー処理のルーチンが不要になるといっても過言ではありません。
また、文字種の自動変換や省略表示、オーバーフローチップなどほとんどの機能がXAMLの設定だけで行えるので、ビハインドコードを書かずに済む点も開発効率の向上に貢献しているといえます。
参考文献
製品情報
