Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/07/13 14:00
目次

全体のレイアウト作成

 では、ページを作成していきましょう。作り方は、まずグリッドを9行に分割し、1行ずつStackPanelでTextBlockとGcTextBoxコントロールを配置していくだけです。

グリッドと見出しの作成

 グリッドはRowDefinitionsプロパティで複数行に分割し、最初の行にTextBlockで見出しと説明文を入れます。

<Grid x:Name="LayoutRoot" Background="White">
  <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Width="450" Height="600" >
    <Border BorderThickness="2" BorderBrush="Cyan">

      <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" />

氏名入力のTextBoxコントロールに検証機能をバインドする

 グリッドの2行目に、氏名を入力する欄をSilverlight標準のTextBoxコントロールで作成します。そして、このコントロールで、入力が空白だった時にアラーム表示をする検証インジケータを設定します。

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

 まず、StackPanelコントロールでTextBlock、TextBox、GcValidationIndicatorコントロールを配置します。

 GcValidationIndicatorコントロールは、先に「im」という名前空間を設定していますので、XAMLでコントロールを記述する際は「<im:GcValidationIndicator>」と記述します。そして、Nameプロパティで名前を付け、ElementNameプロパティでTextBoxコントロールに関連づけます。

<StackPanel Grid.Row="1" Orientation="Horizontal">
  <TextBlock Text="氏名:" VerticalAlignment="Center" Margin="5" />
    <TextBox Name="TextBox1" Width="120">
    </TextBox>
  <im:GcValidationIndicator Name="GcValidationIndicator1" Width="16" Height="16" 
      ElementName="TextBox1" />
</StackPanel>

空白時のエラー表示を行う検証機能の作成

 このGcValidationIndicatorコントロールは、Bindingオブジェクトを使って検証機能を実装させます。まず、XAMLに「local」という名前空間を作成します。

プロジェクトがVBの場合
xmlns:local="clr-namespace:sl_varid_vb"
プロジェクトがC#の場合
xmlns:local="clr-namespace:sl_varid_cs"

 そして、StackPanelのResourceプロパティにこの名前空間を設定します。

<StackPanel Grid.Row="1" Orientation="Horizontal">
  <StackPanel.Resources>
    <local:Person x:Key="Person" />
  </StackPanel.Resources>

 続いて、TextBoxコントロールのTextプロパティにBindingオブジェクトを組み込みます。

 ValidatesOnNotifyDataErrorsプロパティは、バインディングエンジンが検証エラーを報告するかどうかを示す値を、取得または設定するものです。ここではエラーを報告しないようにします。ValidatesOnExceptionsプロパティは、例外検証エラーを報告するかどうかを示す値を取得または設定するプロパティで、ここでは報告するようにします。

  <TextBlock Text="氏名:" VerticalAlignment="Center" Margin="5" />
    <TextBox Name="TextBox1" Width="120">
      <TextBox.Text>
        <Binding Mode="TwoWay"  Source="{StaticResource Person}" Path="Text" 
                       ValidatesOnNotifyDataErrors="False" ValidatesOnExceptions="true" />
       </TextBox.Text>
    </TextBox>
  <im:GcValidationIndicator Name="GcValidationIndicator1" Width="16" Height="16" 
      ElementName="TextBox1" />
</StackPanel>

入力検証クラスの作成

 今度は、ビハインドコードで検証を行うクラス「Person」を作成します。

 まず、プロジェクトの[参照設定]に、「System.ComponentModel.DataAnnotations」を追加します。これは、ValidatorクラスのValidatePropertyメソッドを使用して、コントロールの入力が空白かどうかの検証を行うためです。また、各コードの先頭にこの名前空間を宣言しておきます。

 クラス「Person」では、例外検証エラー時のメッセージとプロパティ「Text」を作成し、ValidatePropertyメソッドを実行してプロパティの値が空白の時エラーメッセージをGcValidationIndicatorコントロールに渡すようにします。これで、TextBoxコントロールのTextプロパティが空白のまま他のコントロールにフォーカスが移動すると、GcValidationIndicatorコントロールはアイコンを点滅させ、検証エラーメッセージをツールチップで表示します。

Textプロパティが空白のまま他のコントロールにフォーカスが移動すると、検証機能が働く
Textプロパティが空白のまま他のコントロールにフォーカスが移動すると、検証機能が働く
Visual Basic
Imports System.ComponentModel.DataAnnotations

Partial Public Class MainPage
  ...
  ...
End Class

Public Class Person
  Private _Text As String = "Text"

  <Required(ErrorMessage:="入力必須項目です。")>
  Public Property Text() As String
    Get
      Return _Text
    End Get
    Set(ByVal value As String)
      ' アノテーションにしたがって検証を実行します。
        Validator.ValidateProperty(value, New ValidationContext(Me, Nothing, Nothing) With {.MemberName = "Text"})
        _Text = value
    End Set
  End Property
End Class
C#
using System.ComponentModel.DataAnnotations;

namespace sl_varid_cs
{
  public partial class MainPage : UserControl
  {
    ...
    ...
  }

  public class Person
  {
    private string _Text = "Text";

      // プロパティの値を必須として指定します。
      [Required(AllowEmptyStrings = false, ErrorMessage = "入力必須項目です。")]
      public string Text
      {
        get { return _Text; }
        set
        {
          // アノテーションにしたがって検証を実行します。
          Validator.ValidateProperty(value, new ValidationContext(this, null, null) { MemberName = "Text" });
          _Text = value;
        }
      }
  }

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(InputMan)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5