SHOEISHA iD

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

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

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

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

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

生年月日欄

 生年月日欄については、yyyy年MM月dd日の形式での入力を実現しています。

リスト6 生年月日欄のXAML定義
<im:GcDateTime Grid.Row="4" Grid.Column="2" Name="Birth_Date" 
               VerticalContentAlignment="Stretch" VerticalAlignment="Center" 
               WatermarkDisplayNull="必須項目" 
               WatermarkDisplayNullForeground="#80000000"                           
               WatermarkNull="生年月日を入力してください。" 
               WatermarkNullForeground="#80000000" 
               HighlightText="Field"
               >
    <im:GcDateTime.DisplayFieldSet>
        <im:DateDisplayFieldSet>
            <im:DateYearDisplayField />
            <im:DateLiteralDisplayField Text="年" />
            <im:DateMonthDisplayField ShowLeadingZero="True" />
            <im:DateLiteralDisplayField Text="月" />
            <im:DateDayDisplayField ShowLeadingZero="True" />
            <im:DateLiteralDisplayField Text="日" />
        </im:DateDisplayFieldSet>
    </im:GcDateTime.DisplayFieldSet>
    <im:GcDateTime.FieldSet>
        <im:DateFieldSet>
            <im:DateYearField />
            <im:DateLiteralField Text="年" />
            <im:DateMonthField />
            <im:DateLiteralField Text="月" />
            <im:DateDayField />
            <im:DateLiteralField Text="日" />
        </im:DateFieldSet>
    </im:GcDateTime.FieldSet>
    <im:GcDateTime.Effect>
        <DropShadowEffect/>
    </im:GcDateTime.Effect>
    <im:GcDateTime.Value>
        <Binding Path="BirthDay" Mode="TwoWay"/>
    </im:GcDateTime.Value>
</im:GcDateTime>
  1. Grid.Row="4" Grid.Column="2"」にはBirth_Dateという名前でGcDateTimeコントロールを配置します。
  2. WatermarkDisplayNullプロパティにより、入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時、入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示することで、実際の入力値と区別がつくようにしています。
  3. GcTextBox.Effectを指定して影付きの入力欄にします。
  4. <Binding Path=" BirthDay " Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのBirthDayプロパティ値と連携します。
※年号の表示形式について

 GcDateTimeコントロールは、DisplayFieldSetプロパティ(表示書式)、FieldSetプロパティ(入力書式)を設定するだけで、簡単に和暦表示などを行えます。表示と入力で、個別に書式を設定することもできます。


表示書式の設定
表示書式の設定
左:表示時を和暦で表示、右:入力時を西暦で表示
左:表示時を和暦で表示、右:入力時を西暦で表示

備考欄

 備考欄は、複数行が入力できるようになっています。InputManを使った場合、各行を点線で区切り、見栄えのいい複数行入力欄を実現することが可能です。

リスト7 備考欄のXAML定義
<im:GcTextBox Grid.Row="5" Grid.Column="2"
              Name="Comment_TextBox" 
              WatermarkDisplayNull="任意項目"
              WatermarkDisplayNullForeground="#80000000" 
              WatermarkNull="連絡事項を入力してください。" 
              WatermarkNullForeground="#80000000" 
              Multiline="True" MaxLength="2000" MaxLengthUnit="Byte"
              MaxLineCount="10"
              GridLineStyle="Dotted" GridLineBrush="Black" 
              TextWrapping="Wrap" HighlightText="True" 
              VerticalScrollBarVisibility="Auto"
              >
    <im:GcTextBox.Effect>
        <DropShadowEffect/>
    </im:GcTextBox.Effect>
    <im:GcTextBox.Text>
        <Binding Path="Comment" Mode="TwoWay"/>
    </im:GcTextBox.Text>
</im:GcTextBox>
  1. Grid.Row="5" Grid.Column="2"」にはComment_TextBoxという名前でGcTextBoxコントロールを配置します。
  2. WatermarkDisplayNullプロパティにより、入力欄に値が設定されていないときの表示を指定しています。コントロールがフォーカスを得た時、入力欄に値が設定されていない場合は、WatermarkNullプロパティの内容が表示されます。それぞれ少し薄い色で表示することで実際の入力値と区別がつくようにしています。
  3. Multiline="True" MaxLength="2000" MaxLengthUnit="Byte"」として、複数行サポート、最大2000バイトまで入力可能にします。
  4. GcTextBox.Effectを指定して影付きの入力欄にします。
  5. <Binding Path="Comment" Mode="TwoWay"/>」をTextプロパティに指定して、GridのDataContextに割り当てたクラスのCommentプロパティ値と連携します。
図6 サンプルを利用したお客様登録画面例
図6 サンプルを利用したお客様登録画面例

まとめ

 WPFを使った画面は、標準コントロールだけで作成した場合でもWindowsフォームとは一味違ったデザインの画面が作成できます。しかし、InputMan for WPFを使えば、複数行表示の罫線や行数制限などさらに一味違ったデザインを実装できます。

 そして実際に業務アプリを作成してみると、文字種限定や自動変換という機能は入力後のチェックコードなどを大幅に削減できるばかりではなく、利用者にとってもチェック後に入力し直すことがなく、全体的な操作性の向上につながります。

 もちろん、標準コントロールを駆使してウォータマークなどの機能を作成することもできますが、InputManによりその時間を他の使い勝手の向上に充てられるのならばそれに越したことはないのではないでしょうか。

製品情報

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング