WPF 標準コントロールデモアプリ › RepeatButton
RepeatButton Inputs
RepeatButton は押し続けている間、定期的に Click イベントを発火し続けるボタンです。スピナーやスクロールバーの矢印ボタンのように、ボタンを押し続けることで継続的に値を変化させる UI に使用します。
概要
WPF の RepeatButton は ButtonBase を継承したコントロールで、押し続けている間、設定した間隔で Click イベントを連続発火します。通常の Button がマウスを離したときに 1 回だけ発火するのとは異なります。
発火のタイミングは 2 つのプロパティで制御します。Delay は最初のリピートが始まるまでの待機時間(ミリ秒)、Interval はその後の繰り返し間隔(ミリ秒)です。両方ともデフォルト値は 250ms で、Windows の標準キーボードリピート設定と一致しています。
RepeatButton は WPF の ScrollBar や Slider の矢印ボタンとして内部的に使用されています。カスタムの数値入力スピナーやカスタムスクロールコントロールを作成する際の基盤コントロールとして活用できます。
Button と同様に Command と CommandParameter をサポートしているため、MVVM パターンで使用できます。ボタンが押されるたびにコマンドが実行されます。
画面キャプチャ

デモしているプロパティ
以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。
| プロパティ | 設定値 | 説明 |
|---|---|---|
Delay | int (ms, デフォルト: 250) | スピナーの「▲」「▼」ボタンのように、ボタンを押し続けたときの反応を自然に感じさせたいときに調整します。最初の Click 発火から繰り返しが始まるまでの待機時間(ミリ秒)で、デフォルトの 250ms は Windows 標準キーボードリピート遅延と一致します。Delay を長く(例: 500ms)すると「押しっぱなしでいきなり連続発火」という感覚が弱まり、短く(例: 100ms)するとすぐに連続発火が始まります。注意点として、Delay を 50ms 以下のような極端に短い値にすると、処理が重い PC や低スペック環境では最初のクリックだけで意図せず連続発火し始めることがあります。用途に応じて 200〜500ms 程度を目安に設定してください。 |
Interval | int (ms, デフォルト: 250) | Delay 後に始まる繰り返し発火の間隔(ミリ秒)です。例えば Interval=100ms は 1 秒間に最大 10 回 Click が発火することを意味します。Delay と組み合わせて「最初は遅く、慣れたら速く」という自然な加速感を演出できます。注意点として、Interval を 50ms 未満に設定すると、Click イベントごとに ViewModel の更新処理や UI の再描画が走るため、処理が重いとアプリ全体が詰まる可能性があります。短い Interval を使う場合は、コマンドハンドラ内の処理を最小限にとどめ、必要に応じてスロットリング(一定時間内の処理回数を制限する仕組み)を実装してください。 |
XAML 使用例
<!-- 数値スピナー -->
<StackPanel Orientation="Horizontal">
<RepeatButton Content="▼" Width="24"
Delay="300" Interval="100"
Command="{Binding DecrementCommand}" />
<TextBox Width="60" Text="{Binding Value}"
TextAlignment="Center" />
<RepeatButton Content="▲" Width="24"
Delay="300" Interval="100"
Command="{Binding IncrementCommand}" />
</StackPanel>主な使用例
- 数値スピナー — 上下の矢印ボタンを押し続けると数値が連続的に増減するスピナー UI を実装します。
- カスタムスクロール — 上下/左右のスクロール矢印ボタンを押し続けるとスクロールし続けるカスタムスクロール UI に使用します。
- 音量・ズームコントロール — ボタンを押し続けることで滑らかに音量やズームレベルを調整する UI に使用します。
- ゲームコントロール — ミニゲームやインタラクティブデモで継続的な操作が必要なコントロールに活用します。
- カルーセルナビゲーション — 前へ/次へボタンを押し続けると複数のスライドを高速移動できるカルーセルに使用します。
ヒントとベストプラクティス
- Delay と Interval を操作の粒度に合わせる — 細かい調整が必要な操作は Interval を長く(200〜500ms)、粗い操作は短く(50〜100ms)設定します。
- ViewModel で値の上限・下限を制御 — RepeatButton は高速に Click を発火するため、バインドされたプロパティで確実に最大値・最小値のクランプ処理を実装します。
- Command を使う — Click イベントより Command バインドを使い、ViewModel でロジックを管理します。
- マウスとタッチの挙動の違い — RepeatButton はマウスの押し続けに対して Delay/Interval に従って動作しますが、タッチ操作では長押し認識のタイミングがマウスと異なる場合があります。タッチ対応アプリでは実機テストを行い、Delay/Interval 値がタッチ操作でも自然に感じられるか確認してください。
- 短い Interval 時はコマンドハンドラを軽量に — Interval が短い(50ms 未満)場合、1 秒間に 20 回以上コマンドが実行されます。コマンドハンドラ内で DB アクセスや重い計算を行うとアプリが固まるため、単純なプロパティ更新のみにとどめ、必要なら一定回数ごとにまとめて処理するスロットリングを実装してください。
- 視覚フィードバック — RepeatButton を押している間にリアルタイムで値が変化するよう、
UpdateSourceTrigger=PropertyChangedを使用します。また、発火が続いていることをユーザーに伝えるため、IsPressed 状態の視覚的変化(背景色やスケール変更)を ControlTemplate で定義することを検討してください。 - アクセシビリティ — AutomationProperties.Name で「数量を増やす」などの説明を付けてスクリーンリーダーが目的を読み上げられるようにします。
関連コントロール
ソースコード
このデモ画面のソースコードは GitHub で公開しています。