SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(InputMan)

日本仕様の入力フォームを持ったSilverlightアプリケーションを作成しよう~InputMan for SliverlightでWebアプリを強化する

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルソース (1.0 MB)

『本名欄』の構成

 『本名欄』部分のXAMLファイルは次のようになります。この定義は先ほどの【リスト1】の「</Grid.ColumnDefinitions>」と「</Grid>」の間に記述します。

リスト4 『本名欄』のXAML定義
<sdk:Label Grid.Row="0" Grid.Column="0" Content="本名:" 
           VerticalContentAlignment="Center" />
<im:GcTextBox Grid.Row="0" Grid.Column="1" Name="Name_TextBox" 
              WatermarkDisplayNull="必須項目" 
              WatermarkDisplayNullForeground="#80000000" 
              WatermarkNull="本名を入力してください。" 
              WatermarkNullForeground="#80000000" 
              Format="aAZ" MaxLength="16" HighlightText="True"
              VerticalContentAlignment="Stretch" VerticalAlignment="Center"
              im:GcImeManager.ReadingStringKanaMode="KatakanaHalf" 
              im:GcImeManager.ReadingStringOutputMode="Replace"
              >
    <im:GcTextBox.Effect>
        <DropShadowEffect/>
    </im:GcTextBox.Effect>
    <im:GcTextBox.Text>
        <Binding Path="Name" Mode="TwoWay"/>
    </im:GcTextBox.Text>
</im:GcTextBox>
<im:GcValidationIndicator Grid.Row="0" Grid.Column="2" 
                          Height="16" Margin="0,12,0,0" Width="16" 
                          Name="Name_ValidationIndicator" 
                          ElementName="Name_TextBox" />

タイトル

 「Grid.Row="0" Grid.Column="0"」には、「本名:」というタイトルをラベル表示します。ラベルをプログラム側から変更しないのでNameプロパティは定義していません。Windowsフォームと、WPFやSilverlightが最も異なるのはコントロールに名前が必須ではない点です。そのため、必要最小限の名前を考えれば良いわけです。

入力欄コード解説

  1. Grid.Row="0" Grid.Column="1"」には「Name_TextBox」という名前でGcTextBoxコントロールを配置しています。
  2. WatermarkDisplayNullプロパティで、入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時に入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示する事で、実際の入力値と区別がつくようにしています。
  3. Format="aAZ"」としているので英小文字、英大文字、空白、全角文字すべてが入力できるように設定しています。また、MaxLengthプロパティに「16」と指定して、最大文字数を16文字に制限しています。
  4. GcImeManagerを指定してIMEの入力をGcImeManagerに送信しています。
  5. GcTextBox.Effectを指定して影付きの入力欄にします。
  6. <Binding Path="Name" Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのNameプロパティ値と連携します。
Formatプロパティの設定を助ける書式の設定ダイアログ

 Formatプロパティに設定にはさまざまな書式があるので、覚えたりヘルプファイルで毎回調べるのも非効率的です。そこで活躍するのが「書式の設定ダイアログ」です。

図7 書式の設定ダイアログ
図7 書式の設定ダイアログ

 代表的な書式は最初から登録されており、それ以外についてもカスタム入力欄の右側のボタンをクリックすれば、書式を一覧から選択して組み立てることができます。

『フリガナ欄』の構成

 『フリガナ欄』部分のXAMLファイルは次のようになります。

リスト5 『フリガナ欄』のXAML定義
<im:GcTextBox Grid.Row="1" Grid.Column="1" Name="Kana_TextBox" 
              WatermarkDisplayNull="必須項目" 
              WatermarkDisplayNullForeground="#80000000" 
              WatermarkNull="フリガナを入力してください。" 
              WatermarkNullForeground="#80000000" 
              VerticalContentAlignment="Stretch" VerticalAlignment="Center" 
              Format="K" MaxLength="32" HighlightText="True" 
              HorizontalAlignment="Left" Margin="0,8" Width="290">
    <im:GcTextBox.Effect>
        <DropShadowEffect/>
    </im:GcTextBox.Effect>
    <im:GcTextBox.Text>
        <Binding Path="Kana" Mode="TwoWay"/>
    </im:GcTextBox.Text>
</im:GcTextBox>

入力欄コード解説

  1. Grid.Row="1" Grid.Column="1"」には、「Kana_TextBox」という名前でGcTextBoxコントロールを配置しています。
  2. WatermarkDisplayNullプロパティで、入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時に入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示する事で、実際の入力値と区別がつくようにしています。
  3. Format="K"」としているので半角カナのみが入力できます。また、デフォルトでAutoConvertがTrueになっているので、全角カナや全角ひらがなの入力は自動的に半角カナに変換されます。
  4. 「GcTextBox.Effect」を指定して影付きの入力欄にします。
  5. <Binding Path="Kana" Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのKanaプロパティ値と連携します。

『メールアドレス欄』の構成

リスト6 『メールアドレス欄』のXAML定義
<im:GcMask Grid.Row="3" Grid.Column="1" Name="MailAddress_Mask" 
           WatermarkDisplayNull="必須項目" 
           WatermarkDisplayNullForeground="#80000000" 
           WatermarkNull="メールアドレスを入力してください。" 
           WatermarkNullForeground="#80000000" 
           VerticalContentAlignment="Stretch" VerticalAlignment="Center" 
           HighlightText="Field">
    <im:GcMask.FieldSet>
        <im:MaskFieldSet>
            <im:MaskPatternField Pattern="\H{1,}"/>
            <im:MaskLiteralField Text="@"/>
            <im:MaskPatternField Pattern="\W{1,}"/>
            <im:MaskLiteralField Text="."/>
            <im:MaskPatternField Pattern="\W{1,}"/>
        </im:MaskFieldSet>
    </im:GcMask.FieldSet>
    <im:GcMask.Effect>
        <DropShadowEffect/>
    </im:GcMask.Effect>
    <im:GcMask.Text>
        <Binding Path="MailAddress" Mode="TwoWay" />
    </im:GcMask.Text>
</im:GcMask>

入力欄コード解説

  1. Grid.Row="3" Grid.Column="1"」には「MailAddress_Mask」という名前でGcMaskコントロールを配置しています。
  2. WatermarkDisplayNullプロパティで、入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時に入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示する事で、実際の入力値と区別がつくようにしています。
  3. 「MaskFieldSet」として、『1文字以上の半角文字 + @ + 1文字以上の半角英数字 + . + 1文字以上の半角英数字』という形式のメールアドレスのみを入力できるように制限しています。
  4. 「GcTextBox.Effect」を指定して影付きの入力欄にします。
  5. <Binding Path=" MailAddress " Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのMailAddressプロパティ値と連携します。

次のページ
『生年月日欄』の構成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(InputMan)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5665 2010/12/28 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング