【学習】WinFormsでNumericUpDownを使ってみよう（数値をスピナーで入力する）
これまでの学習では、
- TextBox で文字を入力する
- ボタンを押して処理する
という形でプログラムを動かしてきました。
しかし、数量や金額のように数値だけを入力したい場面では、TextBox だと「abc」が入力されるなど、想定外の入力が入る可能性があります。
数値専用の入力コントロール
という仕組みです。
今回は NumericUpDown（数値アップダウン） を使って、数量を選べるアプリを作ります。
今日作るもの
数量 を上下ボタンで 1〜10 の範囲で変更し、計算 ボタンを押すと
合計：300 円（30円 × 10個）のように、単価 × 数量の合計が表示されます。
ソリューションとプロジェクトを作る
Visual Studio で新しいプロジェクトを作ります。
- テンプレート: Windows Forms アプリ (.NET Framework)
- ソリューション名: NumericSample
- プロジェクト名: NumericUpDownDemo
作成すると Form1 が表示されます。
フォームに配置するコントロール
フォームに次のものを配置します。
| コントロール | 名前 |
|---|---|
| Label | unitLabel |
| NumericUpDown | quantityBox |
| Button | calcButton |
| Label | resultLabel |
unitLabel の Text を「単価：30円」、calcButton の Text を「計算」、resultLabel の Text を空にしておきます。
NumericUpDownの設定（プロパティ）
NumericUpDown を選択し、プロパティウィンドウで次のように設定します。
| プロパティ | 値 | 説明 |
|---|---|---|
| Minimum | 1 | 最小値 |
| Maximum | 10 | 最大値 |
| Value | 1 | 初期値 |
| Increment | 1 | 上下ボタンで増減する量 |
これで 1〜10 の整数だけを選べるようになります。
イベントを登録する
calcButton をダブルクリックすると calcButton_Click イベントが作成されます。
ここで quantityBox.Value を取得し、単価と掛け算して resultLabel に表示します。
完成コード
using System;
using System.Windows.Forms;
namespace NumericUpDownDemo
{
public partial class Form1 : Form
{
const int UNIT_PRICE = 30; // 単価
public Form1()
{
InitializeComponent();
}
private void calcButton_Click(object sender, EventArgs e)
{
int quantity = (int)quantityBox.Value;
int total = UNIT_PRICE * quantity;
resultLabel.Text = $"合計：{total} 円（{UNIT_PRICE}円 × {quantity}個）";
}
}
}プログラムの流れ
計算ボタンを押す
↓
quantityBox.Value を取得（decimal 型）
↓
(int) で int に変換
↓
単価 × 数量 で合計を計算
↓
resultLabel に表示重要ポイント
NumericUpDown は「数値だけを入力させる」 コントロールです。
- Value プロパティで現在の値を取得・設定する（型は decimal）
- Minimum / Maximum で入力範囲を制限できる
- Increment で上下ボタンの増減量を指定する
- キーボードで直接入力することもできる（範囲内なら）
- 数量、金額、年齢など、数値入力に適している
発展：小数点を表示する
金額など小数点が必要な場合は、DecimalPlaces を設定します。
| プロパティ | 値 | 説明 |
|---|---|---|
| DecimalPlaces | 2 | 小数点以下2桁を表示 |
| Minimum | 0 | 最小値 |
| Maximum | 9999.99 | 最大値 |
| Increment | 0.01 | 0.01 ずつ増減 |
発展：ValueChanged イベント
ボタンを押さなくても、値が変わるたびに処理したい場合は ValueChanged イベントを使います。
private void quantityBox_ValueChanged(object sender, EventArgs e)
{
int quantity = (int)quantityBox.Value;
int total = UNIT_PRICE * quantity;
resultLabel.Text = $"合計：{total} 円";
}数量を変えるたびに、すぐに合計が更新されます。
発展アイデア
NumericUpDown を使うと次のようなものも作れます。
- 簡易レジ（数量 × 単価）
- 注文フォーム（個数選択）
- 設定画面（タイムアウト秒数、リトライ回数など）
- 年齢・人数の入力
NumericUpDown は数値入力の基本コントロールの一つです。