入力検証機能を持ったSilverlightアプリケーションの作成

InputMan for Silverlight 1.0JのGcValidationIndicatorコントロールを使ったWebページの作成

住所入力のTextBoxコントロールにイベントを使って検証機能を組み込む

　次に、住所入力用のTextBoxコントロールに、TextChangedイベントを使って入力検証機能を実装します。

　入力検証を行うタイミングは、TextBoxコントロールのTextChangedイベントが発生した時点、ということになります。この場合は、ビハインドコードでGcValidationIndicatorコントロールのMarkErrorメソッドを実行させて検証エラーを表示します。

コントロールのレイアウト作成

　まず、XAMLでグリッドの3行目に各コントロールを配置します。StackPanelに順番にコントロールを配置し、TextBoxコントロールにはイベントハンドラを作成します。

　また、GcValidationIndicatorコントロールは名前を付けて、ElementNameプロパティでTextBoxコントロールとの関連付けを行っておきます。

<StackPanel Grid.Row="2" Orientation="Horizontal">
  <TextBlock Text="住所：" VerticalAlignment="Center" Margin="5" />
  <TextBox Name="TextBox2" Width="300" TextChanged="TextBox2_TextChanged"/>
  <im:GcValidationIndicator Name="GcValidationIndicator2" Width="16" Height="16" ElementName="TextBox2" />
</StackPanel>

TextChangedイベントハンドラの処理

　TextChangedイベントハンドラでは、まずStringクラスのIsNullOrWhiteSpaceメソッドを使って、Textプロパティの値が空白かどうかをチェックします。そして、空白であればGcValidationIndicatorクラスのMarkErrorメソッドを実行します。このメソッドは、引数に指定したオブジェクトを実行するメソッドで、ここではTextBlockオブジェクトを作成し、赤色で文字列を表示します。

　また、StringクラスのLengthプロパティでTextプロパティに入力された文字列をチェックし、10文字未満であれば同じくMarkErrorメソッドを実行します。このイベントハンドラを使う方法では、入力コントロールのイベント発生時が検証を行うタイミングになり、またいろいろなバリエーションの検証を組み込むことができます。

文字数が不足していると、検証機能が働き

入力が空白でも検証機能が働く

Visual Basic

Private Sub TextBox2_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs)
  If (String.IsNullOrWhiteSpace(TextBox2.Text)) Then
    GcValidationIndicator2.MarkError(New TextBlock() With {.Text = "入力必須項目です。", .Foreground = New SolidColorBrush(Colors.Red)})
  ElseIf (TextBox2.Text.Length < 10) Then
    GcValidationIndicator2.MarkError(New TextBlock() With {.Text = "10文字以上で入力してください。", .Foreground = New SolidColorBrush(Colors.Green)})
  Else
     GcValidationIndicator2.ClearError()
  End If
End Sub

C#

private void TextBox2_TextChanged(object sender, TextChangedEventArgs e)
{
  if (string.IsNullOrWhiteSpace(TextBox2.Text))
    GcValidationIndicator2.MarkError(new TextBlock() { Text = "入力必須項目です。", Foreground = new SolidColorBrush(Colors.Red) });
  else if (TextBox2.Text.Length < 10)
    GcValidationIndicator2.MarkError(new TextBlock() { Text = "10文字以上で入力してください。", Foreground = new SolidColorBrush(Colors.Green) });
  else
    GcValidationIndicator2.ClearError();
}