マスク、日付時刻、日付、時刻、数値、コンボコントロールで提供されるスピンボタンを、タッチデバイスで操作しやすいように配置やボタンサイズなどを最適化できます。
各コントロールのスピン機能の詳細については、それぞれ下記のページを参照してください。
ボタンの配置
各コントロールにスピンボタンを表示したときのデフォルトの状態では、マウスによる操作を前提としたボタンの大きさや配置となっており、タッチ操作には適していません。
（図）デフォルト設定のスピンボタン
InputMan for ASP.NETでは、スピンボタンの配置をカスタマイズする機能を提供します。タッチデバイスでは スピンボタンの配置を設定するには、各コントロールのSpinプロパティが参照するSpinクラスのAlignmentプロパティを使用します。Alignmentプロパティに設定できる値は以下のとおりで、デフォルトはSpinButtonAlignment.Verticalです。
| Alignmentプロパティの値 | 説明 | |
|---|---|---|
| BothSidesDownLeft |  |
コントロールの両端にボタンを配置します。スピンダウンボタンが左側、スピンアップボタンが右側です。 |
| BothSidesUpLeft |  |
コントロールの両端にボタンを配置します。スピンアップボタンが左側、スピンダウンボタンが右側です。 |
| HorizontalDownLeft |  |
コントロールの右端にボタンを水平方向に隣接して配置します。スピンダウンボタンが左側、スピンアップボタンが右側です。 |
| HorizontalUpLeft |  |
コントロールの右端にボタンを水平方向に隣接して配置します。スピンアップボタンが左側、スピンダウンボタンが右側です。 |
| Vertical | |
コントロールの右端にボタンを垂直方向に隣接して配置します。 |
なお、Alignmentプロパティによりスピンボタンの配置を設定した場合も、マウスやキーボードによる操作は可能です。
ボタン画像のカスタマイズ
SpinクラスのAlignmentプロパティをSpinButtonAlignment.Vertical以外に設定した場合、スピンアップ、タウンの各ボタンの画像は「＋」および「−」と表示されます。これは、ドロップダウンボタンと同時に表示されたとき、類似の形状（三角形の矢印）による混乱を避けるためです。
スピンボタンに任意のイメージ画像を指定するするには、Spinクラスの以下のプロパティを使用します。
上記のプロパティおよびAlignmentプロパティを使用することで、以下のようなスピンボタンのカスタマイズが可能です。
（図）スピンボタンの配置と画像のカスタマイズ
次のサンプルコードでは、スピンボタンを日付コントロールの右端で、スピンアップボタンが左側になるよう水平方向に配置し、また各ボタンの表示画像を設定します。
スピンボタンに任意のイメージ画像を指定するするには、Spinクラスの以下のプロパティを使用します。
- SpinDownImage （スピンダウンボタンのイメージ）
- PressedSpinDownImage （押された状態のスピンダウンボタンのイメージ）
- SpinUpImage （スピンアップボタンのイメージ）
- PressedSpinUpImage （押された状態のスピンアップボタンのイメージ）
上記のプロパティおよびAlignmentプロパティを使用することで、以下のようなスピンボタンのカスタマイズが可能です。
（図）スピンボタンの配置と画像のカスタマイズ
次のサンプルコードでは、スピンボタンを日付コントロールの右端で、スピンアップボタンが左側になるよう水平方向に配置し、また各ボタンの表示画像を設定します。
Imports GrapeCity.Web.Input.Core GcDate1.Spin.Visible = True GcDate1.Spin.Alignment = SpinButtonAlignment.HorizontalUpLeft GcDate1.Spin.SpinUpImage = "~/Images/SpinUp.png" GcDate1.Spin.PressedSpinUpImage = "~/Images/PressedSpinUp.png" GcDate1.Spin.SpinDownImage = "~/Images/SpinDown.png" GcDate1.Spin.PressedSpinDownImage = "~/Images/PressedSpinDown.png"
using GrapeCity.Web.Input.Core; GcDate1.Spin.Visible = true; GcDate1.Spin.Alignment = SpinButtonAlignment.HorizontalUpLeft; GcDate1.Spin.SpinUpImage = "~/Images/SpinUp.png"; GcDate1.Spin.PressedSpinUpImage = "~/Images/PressedSpinUp.png"; GcDate1.Spin.SpinDownImage = "~/Images/SpinDown.png"; GcDate1.Spin.PressedSpinDownImage = "~/Images/PressedSpinDown.png";
関連トピック