syncfusion-wpf-numericupdown

Syncfusion WPF NumericUpdown (UpDown) の実装

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• 増加／減少ボタン付きの数値入力フィールドを作成する
• 最小値と最大値の範囲内に値を制限する
• 小数点以下の桁数や桁区切りを指定して数値をフォーマットする
• ローカライズやカルチャ固有のフォーマットを適用する
• 値（正、負、ゼロ）に応じた色で外観をカスタマイズする
• 数値入力でのキーボードおよびマウス操作を実装する
• 透かしテキストを使用して null 値を処理する

コンポーネントの概要

Syncfusion WPF NumericUpdown (UpDown) コントロールは、値を増減するためのスピンボタンを内蔵し、数値を表示および管理します。値の制限、数値のフォーマット、イベント処理、幅広いスタイル設定などの機能を備えています。

主なコンポーネント：

• テキスト領域：数値を表示します
• 増加ボタン：値を増やすリピートボタンです
• 減少ボタン：値を減らすリピートボタンです

ドキュメントのナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリ参照
• デザイナー、XAML、C# コードを使用した UpDown の追加
• 値とステップに関する基本プロパティ
• テーマの適用とスタイル設定

値と制限

📄 参照： references/value-and-restrictions.md

• 値の設定と管理
• 値変更イベント（ValueChanged、ValueChanging）
• 最小値と最大値の制約
• 検証モードと動作
• null 値と透かしの処理
• 編集権限の制御

数値のフォーマット

📄 参照： references/number-formatting.md

• 小数点以下の桁数のフォーマット
• 桁区切り文字の設定
• NumberFormatInfo のカスタマイズ
• カルチャとローカライズのサポート
• テキストの配置オプション

スタイルと外観

📄 参照： references/styling-and-appearance.md

• 正、負、ゼロの値に応じた色のカスタマイズ
• フォーカス時のスタイル設定
• SfSkinManager とのテーマ連携
• ThemeStudio を使用したカスタムテーマの作成

高度な設定

📄 参照： references/advanced-configuration.md

• ステップ間隔の管理
• キーボードおよびマウスの操作パターン
• アニメーションのサポート
• カルチャ固有の動作
• 複雑なユースケースとシナリオ

クイックスタートの例

基本的な XAML の設定

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        
        <syncfusion:UpDown Name="upDown" 
                          Height="25" 
                          Width="100"
                          Value="10"
                          Step="5"
                          MinValue="0"
                          MaxValue="100" />
    </Grid>
</Window>

基本的な C# の設定

// Create UpDown control
UpDown updown = new UpDown();
updown.Width = 100;
updown.Height = 25;
updown.Value = 10;
updown.Step = 5;
updown.MinValue = 0;
updown.MaxValue = 100;

// Add to container
grid.Children.Add(updown);

値の変更の処理

updown.ValueChanged += (d, e) => 
{
    var newValue = e.NewValue;
    var oldValue = e.OldValue;
};

updown.ValueChanging += (s, e) => 
{
    // Can cancel the change
    if ((double)e.NewValue > 50)
        e.Cancel = true;
};

よく使われるパターン

パターン 1：範囲を制限した検証付き数値入力

特定の範囲内（例：数量 1～999）で入力を検証する必要がある場合：

var updown = new UpDown();
updown.MinValue = 1;
updown.MaxValue = 999;
updown.MinValidation = MinValidation.OnKeyPress;
updown.MaxValidation = MaxValidation.OnKeyPress;

使用場面： 商品の数量、年齢の検証、パーセント値のフィールド。

パターン 2：フォーマットを適用した通貨入力

小数点以下の桁数を指定して、フォーマット済みの通貨を表示する必要がある場合：

updown.NumberDecimalDigits = 2;
updown.GroupSeperatorEnabled = true;
updown.Culture = new CultureInfo("en-US");

使用場面： 価格入力、金額、財務計算。

パターン 3：値に応じた視覚的なフィードバック

正、負、ゼロの値に応じて異なる色を使用する必要がある場合：

updown.EnableNegativeColors = true;
updown.NegativeBackground = Brushes.LightCoral;
updown.NegativeForeground = Brushes.DarkRed;

updown.ApplyZeroColor = true;
updown.ZeroColor = Brushes.Gray;

使用場面： 利益／損失の表示、貸借対照表、差異分析。

パターン 4：透かし付きの null 値

未初期化または「値なし」の状態を処理する必要がある場合：

updown.UseNullOption = true;
updown.Value = null;
updown.NullValueText = "Enter a value";

使用場面： 任意の数値フィールド、初期状態で空のフィールド。

主なプロパティ

プロパティ	型	用途
Value	double?	現在の数値
Step	double	増加／減少の間隔
MinValue	double	許可される最小値
MaxValue	double	許可される最大値
NumberDecimalDigits	int	表示する小数点以下の桁数
GroupSeperatorEnabled	bool	桁区切りを表示するかどうか
Culture	CultureInfo	ローカライズ形式
AllowEdit	bool	テキストの直接編集を許可するかどうか
UseNullOption	bool	null 値をサポートするかどうか
NullValueText	string	null の場合に表示する透かしテキスト

一般的なユースケース

1. 製品数量の入力：最小値と最大値の範囲内の整数に制限します
2. 価格の入力：小数点以下2桁と通貨記号を付けて表示します
3. 年齢の入力：有効な年齢の範囲（18～120歳）に制限します
4. パーセンテージの入力：小数なしで0～100に制限します
5. 温度の制御：カルチャ固有の形式で負の値を入力できるようにします
6. 割引計算：正の値は緑色、負の値は赤色で表示します
7. スコアリングシステム：特定の範囲（評価の場合は1～5）に制限します
8. 時間の長さ：ステップ間隔（15分単位）で書式設定します

---

次のステップ： 実装のニーズに合わせて上記のリファレンスファイルを選ぶか、基本的なセットアップ手順について「Getting Started」をお読みください。