ドロップダウン機能

時刻コントロールに搭載されるドロップダウンボタンを押下すると、キーボードを使用しない入力を補助するドロップダウンオブジェクトが表示されます。時刻コントロールにドロップダウン表示可能なオブジェクトは以下の2つで、ドロップダウン数値パッドは日付時刻コントロールと同等の機能を備えています。詳細については、次のリンク先を参照してください。

ドロップダウン時刻ピッカー
日付時刻コントロール－ドロップダウン数値パッド

ドロップダウン機能を有効にする

DropDownプロパティが参照するTimeDropDownオブジェクトは、コントロール上にドロップダウンボタンを表示させます。ドロップダウンボタンをクリックするか、キーボードで［Alt］＋［↓］キーを押下することで、時刻入力用のドロップダウンオブジェクトを表示できます。

また、ショートカットエクステンダには、デフォルトで［F7］キーがドロップダウン動作に割り当てられています。
ドロップダウン機能を有効にするには、TimeDropDownオブジェクトのEnabledプロパティをTrueに設定します。次に、Visibleプロパティを設定してドロップダウンボタンを表示させます。

次のサンプルコードは、時刻コントロールにドロップダウンボタンを設定する方法を示します。

Visual Basic
C#

GcTime1.DropDown.Enabled = True
GcTime1.DropDown.Visible = True

GcTime1.DropDown.Enabled = true;
GcTime1.DropDown.Visible = true;

なお、ドロップダウン機能を使用しない場合は、TimeDropDown.EnabledプロパティをFalseに設定します。これにより、実行時にドロップダウンオブジェクトを形成するためのHTML生成やJSファイルの読み込みを回避することができるため、パフォーマンスが向上します。

クライアント側で、DropDownオブジェクトのEnabledプロパティがTrueに切り替えられたとき、必要となるドロップダウンオブジェクトのJSファイルは動的にダウンロードされます。

ドロップダウンオブジェクトの種類

時刻コントロールに表示可能なドロップダウンオブジェクトは以下の3種類で、どのドロップダウンオブジェクトを表示するかはTimeDropDownクラスのDropDownTypeプロパティを使用して設定します。既定値はTimeDropDownType.Pickerです。

DropDownTypeの値	表示されるドロップダウンオブジェクト
NumericPad	ドロップダウン数値パッド
Picker	ドロップダウン時刻ピッカー

ページロード時にダウンロードされるドロップダウンオブジェクトの種類は、サーバー側DropDownTypeプロパティの初期設定に依存します。クライアント側でDropDownTypeプロパティが変更された場合は、変更後のドロップダウンオブジェクトに必要となるJSファイルが動的にダウンロードされます。

ドロップダウンボタンのカスタマイズ

TimeDropDownオブジェクトを使用して、下記のドロップダウンボタンのカスタマイズが可能です。

コントロールがフォーカスを受け取ったときにドロップダウン部分を表示するかどうか（AutoDropDownプロパティ）
ドロップダウンボタンに表示する画像（ButtonImageプロパティ）
ドロップダウンボタンが押されたときに表示する画像（PressedButtonImageプロパティ）
ドロップダウン部分に影を付けるかどうか（DropDownShadowプロパティ）
ドロップダウンボタンの表示位置（Positionプロパティ）
開くときのアニメーション効果（OpeningAnimationプロパティ）
閉じるときのアニメーション効果（ClosingAnimationプロパティ）

次のサンプルコードは、ドロップダウンボタンをカスタマイズする例です。

Visual Basic
C#

Imports GrapeCity.Web.Input.Core

GcTime1.DropDown.AutoDropDown = True
GcTime1.DropDown.DropDownShadow = True
GcTime1.DropDown.Position = ButtonPosition.Outside
GcTime1.DropDown.ClosingAnimation = DropDownAnimation.Scroll
GcTime1.DropDown.OpeningAnimation = DropDownAnimation.Fade
GcTime1.DropDown.ButtonImage = "~/Images/DropDown.png"
GcTime1.DropDown.PressedButtonImage = "~/Images/PressedDropDown.png"

using GrapeCity.Web.Input.Core;

GcTime1.DropDown.AutoDropDown = true;
GcTime1.DropDown.DropDownShadow = true;
GcTime1.DropDown.Position = ButtonPosition.Outside;
GcTime1.DropDown.ClosingAnimation = DropDownAnimation.Scroll;
GcTime1.DropDown.OpeningAnimation = DropDownAnimation.Fade;
GcTime1.DropDown.ButtonImage = "~/Images/DropDown.png";
GcTime1.DropDown.PressedButtonImage = "~/Images/PressedDropDown.png";

また、TouchDropDownScaleプロパティを使用して、タッチ操作時のドロップダウンカレンダーの拡大倍率を設定することができます。詳細については「ドロップダウンウィンドウの拡大表示」を参照してください。