Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

書式設定もできる数値コントロールを持ったWPFアプリケーションの作成

PowerTools InputMan for WPF 1.0JのGcNumberコントロールを使ったアプリケーションの作成

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

WPFアプリケーションの作成

 さっそく、GcNumberコントロールを使ってWPFアプリケーションを作成しましょう。今回は、オークションの入札画面を作成してみました。入札額をGcNumberコントロールを使って入力し、ボタンを押すとその額を画面に反映する、という簡単なものです。

GUIのデザイン

 作成するWPFアプリケーションは、背景をグラデーションで塗りつぶし、ロゴと商品の写真をImageコントロールで表示します。文字列はすべてTextBlockコントロールで表示し、入札価格を入力するGcNumberコントロールを配置しています。

 動作としては、[入札する]ボタンを押すと入力された値をTextBlockに反映します(GcNumberコントロールの設定は、この後作成しながら説明します)。

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

GcNumberコントロールの作成

 GcNumberコントロールを作成します。今回のアプリケーションでは、GcNumberコントロールを以下の設定にして使用します。

  • 入力書式に整数・小数ともに3桁の区切り記号を入れ、接頭語/接尾語を付けて文字色を変える
  • 負の数値が入力された時にも接頭語/接尾語を付けて文字色を変える
  • 動作範囲は-1,000から100,000,000(1億)までとし、増減値を100にする
  • ドロップダウン電卓を常に使えるようにする

 まず、ツールボックスにあるGcNumberコントロールを、WPFアプリケーションにドラッグ&ドロップします。Visual Studio 2010のデザイン画面でサイズを変更して、プロパティウィンドウで動作範囲を設定後「項目別」に切り替え、[値]をクリックして展開し次のプロパティを設定します。

設定するプロパティ
プロパティ 設定値
MaxValue 100000000
MinValue -1000
Value 100

 続いて、[スピン]を展開し、SpinIncrementプロパティを「100」にします。矢印ボタンをクリックすると値は100ずつ増減するようになります。

プロパティウィンドウで動作範囲を設定する
プロパティウィンドウで動作範囲を設定する
※注意

 Visual Studio 2010のプロパティウィンドウは、デフォルトではアルファベット順になっているので、「項目別」に変更すると作業がしやすくなります。

GcNumberコントロールの書式設定

 入力欄に「接頭語/接尾語」を設定します。書式としては、「入札価格: 円(税込)」となるようにします。

 接頭語は「NumberSignPrefixField」クラスのプロパティを、接尾語は「NumberSignSuffixField」クラスのプロパティを使用します。これらは、プロパティウィンドウで値を設定すると自動的にXAMLのコードを作成してくれます。

 まず、プロパティウィンドウの[フィールドセット]をクリックして展開します。「FieldSet」欄の[▼]ボタンを初めて押すと、[作成]というボタンが出るので、これをクリックします(同時に、XAMLにこのクラスを作成するコードが書き込まれます)。全部で5つのフィールドが出てくるので、[SignPrefix]をクリックして展開します。

[作成]ボタンをクリック
[作成]ボタンをクリック
[SignPrefix]をクリックして展開する
[SignPrefix]をクリックして展開する

 プロパティウィンドウをスクロールし、「PositivePattern」に「入札価格: 」と入力します。また、「Foreground」プロパティの[▼]ボタンを押してカラーパレットを表示し、色の名前リストから「Chocolate」を選びます。

[▼]ボタンを押してカラーパレットを表示
[▼]ボタンを押してカラーパレットを表示
色の名前リストから「Chocolate」を選ぶ
色の名前リストから「Chocolate」を選ぶ

 次に、入力値がマイナスになった場合の書式を設定します。「NegativePattern」プロパティを使用して、入力値がマイナスになった場合に表示する文字列「金額エラー -」を入力します。文字色はデフォルトの赤のままです。

 続いて、「接尾語」を設定します。プロパティウィンドウで「SignSuffix」を選び、接頭語と同様「PositivePattern」に「 円(税込) 」と入力、「Foreground」プロパティに「Chocolate」を設定します。

 文字列がすべて表示されるように、再度GcNumberコントロールのサイズをデザインウィンドウで調節します。

その他の外観設定

 GcNumberコントロールの背景色設定と電卓のドロップダウン表示を設定します。

 プロパティウィンドウで[ブラシ]をクリックして展開し、Backgroundプロパティをクリックします。これはGcNumberコントロールの背景色を設定するプロパティで、デフォルトでは白色(White)になっているので、透明に設定します。プロパティの値欄をクリックするとカラーパレットが表示されるので、[Nullブラシ]をクリックします。

カラーパレットで[Nullブラシ]をクリック
カラーパレットで[Nullブラシ]をクリック

 電卓の表示機能も有効にしてみましょう。[動作]をクリックして展開し、「AllowDropDownOpen」プロパティのチェックをオンに設定します。[ボタン]をクリックして展開し、「DropDownButtonVisibility」プロパティを 「ShowAlways」(常に表示)に設定します。これで、電卓を表示するドロップダウンボタンがGcNumberコントロールに表示されます。

 電卓の機能は、あらかじめGcNumberコントロールに組み込まれており、計算結果は自動的にGcNumberコントロールに入力されるので、コードなどは一切書く必要はありません。

2つのプロパティで電卓機能を有効にする
2つのプロパティで電卓機能を有効にする

  • ブックマーク
  • 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