SHOEISHA iD

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

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

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

「InputMan for WPF」で操作性の高いUIを開発 ~Windowsフォームとは一味違うデザインを実装~

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

標準コンポーネントでお客様情報登録画面を作成

 まず、標準コンポーネントだけを使って画面を作成してみました。入力欄に影を付けたくらいで特殊なことは何もしていないレイアウトです。

図2 標準コンポーネントのみを使用して作成した画面の例
図2 標準コンポーネントのみを使用して作成した画面の例

 標準コンポーネントでは、文字数の制限はありますが、文字種の制限や自動変更がないため、XAML定義だけでは希望する文字種で入力されるとは限りません。

図3 文字種を指定できないため、全角、半角、かな、英字などが混ざってしまう
図3 文字種を指定できないため、全角、半角、かな、英字などが混ざってしまう

InputMan for WPFでお客様情報登録画面を作成

 では、次に基本レイアウトにInputManを配置して画面をデザインしてみます。InputManを使うためには、ツールボックスにInputManのコンポーネントを追加します。

図4 ツールボックスアイテムの選択
図4 ツールボックスアイテムの選択

 続いて、ツールボックスからフォームエディタに使用するコントロールをドラッグ&ドロップします。今回のサンプルでは、氏名、フリガナ、住所についてはGcTextBoxを使います。郵便番号にはGcMask、生年月日にはGcDate、備考にはGcTextBoxをMultiLine指定で使います。

氏名欄

 前ページのリスト1「…(*)…」の部分に、次のXAML定義を記述して、氏名欄を定義します。

 InputManを使った氏名欄では、標準テキストボックスで実現できなかった文字種制限を実現しています。また、未入力時に「必須項目」と表示して、氏名欄が必須項目であることがわかるようにしています。さらに、氏名欄で漢字入力をした時の漢字の読みを、フリガナ欄にフリガナとして自動転記もするようにして、入力の負荷を軽減できるようにします。

リスト2 氏名欄のXAML定義
<im:GcTextBox Grid.Row="0" Grid.Column="2" Name="Name_TextBox" 
                  WatermarkDisplayNull="必須項目" 
                  WatermarkDisplayNullForeground="#80000000" 
                  WatermarkNull="本名を入力してください。" 
                  WatermarkNullForeground="#80000000" 
                  Format="aAZ" MaxLength="16" HighlightText="True"
                  VerticalContentAlignment="Stretch" VerticalAlignment="Center"
                  im:GcImeManager.ReadingString="{Binding Kana, Mode=TwoWay}" 
                  im:GcImeManager.ReadingStringKanaMode="KatakanaHalf" 
                  im:GcImeManager.ReadingStringOutputMode="Append"
                  >
    <im:GcTextBox.Effect>
        <DropShadowEffect/>
    </im:GcTextBox.Effect>
    <im:GcTextBox.Text>
        <Binding Path="Name" Mode="TwoWay"/>
    </im:GcTextBox.Text>
</im:GcTextBox>
  1. Grid.Row="0" Grid.Column="2"」には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プロパティ値と連携します。

フリガナ欄

 同じように、フリガナ欄として次のXAML定義をリスト1に追記します。

 フリガナ欄も、InputManを使えば入力できる文字種を半角カナのみに限定することが可能です。同時に、全角カナやひらがなを入力した場合は、自動的に半角カナに変換する機能もInputManのプロパティで実現できるため、操作性の良い入力画面が作成できます。

リスト3 フリガナ欄のXAML定義
<im:GcTextBox Grid.Row="1" Grid.Column="2" Name="Kana_TextBox" 
                  WatermarkDisplayNull="必須項目" 
                  WatermarkDisplayNullForeground="#80000000" 
                  WatermarkNull="フリガナを入力してください。" 
                  WatermarkNullForeground="#80000000" 
                  VerticalContentAlignment="Stretch" VerticalAlignment="Center" 
                  Format="K" MaxLength="32" HighlightText="True" 
                  >
    <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="2"」にはKana_TextBoxという名前でGcTextBoxコントロールを配置します。
  2. WatermarkDisplayNullプロパティにより、入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時、入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示することで、実際の入力値と区別がつくようにしています。
  3. Format="K"」としているので半角カナのみが入力できます。また、デフォルトでAutoConvertが「True」になっているので全角カナや全角ひらがなの入力は自動的に半角カナに変換されます。
  4. GcTextBox.Effectを指定して影付きの入力欄にします。
  5. <Binding Path="Kana" Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのKanaプロパティ値と連携します。

次のページ
郵便番号欄

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

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

もっと読む

この記事の著者

初音玲(ハツネアキラ)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5929 2011/10/13 16:46

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング