MESCIUS InputMan for ASP.NET 10.0J
スピンボタンの最適化

マスク、日付時刻、日付、時刻、数値、コンボコントロールで提供されるスピンボタンを、タッチデバイスで操作しやすいように配置やボタンサイズなどを最適化できます。

各コントロールのスピン機能の詳細については、それぞれ下記のページを参照してください。

ボタンの配置

各コントロールにスピンボタンを表示したときのデフォルトの状態では、マウスによる操作を前提としたボタンの大きさや配置となっており、タッチ操作には適していません。


(図)デフォルト設定のスピンボタン

InputMan for ASP.NETでは、スピンボタンの配置をカスタマイズする機能を提供します。タッチデバイスでは スピンボタンの配置を設定するには、各コントロールのSpinプロパティが参照するSpinクラスのAlignmentプロパティを使用します。Alignmentプロパティに設定できる値は以下のとおりで、デフォルトはSpinButtonAlignment.Verticalです。

Alignmentプロパティの値 説明
BothSidesDownLeft コントロールの両端にボタンを配置します。スピンダウンボタンが左側、スピンアップボタンが右側です。
BothSidesUpLeft コントロールの両端にボタンを配置します。スピンアップボタンが左側、スピンダウンボタンが右側です。
HorizontalDownLeft コントロールの右端にボタンを水平方向に隣接して配置します。スピンダウンボタンが左側、スピンアップボタンが右側です。
HorizontalUpLeft コントロールの右端にボタンを水平方向に隣接して配置します。スピンアップボタンが左側、スピンダウンボタンが右側です。
Vertical コントロールの右端にボタンを垂直方向に隣接して配置します。

なお、Alignmentプロパティによりスピンボタンの配置を設定した場合も、マウスやキーボードによる操作は可能です。
ボタン画像のカスタマイズ
SpinクラスのAlignmentプロパティをSpinButtonAlignment.Vertical以外に設定した場合、スピンアップ、タウンの各ボタンの画像は「+」および「−」と表示されます。これは、ドロップダウンボタンと同時に表示されたとき、類似の形状(三角形の矢印)による混乱を避けるためです。

スピンボタンに任意のイメージ画像を指定するするには、Spinクラスの以下のプロパティを使用します。

上記のプロパティおよび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";
関連トピック

 

 


© MESCIUS inc. All rights reserved.