Tweet

.NET TIPS ［ASP.NET AJAX］Sliderコントロールでスライダを定義するには？［2.0のみ、C#、VB］ 山田 祥寛 2007/11/01

　Sliderコントロール（SliderExtender）は、ASP.NET AJAX Control Toollkit（以降、Control Toolkit）で提供されるコントロールの1つで、ASP.NET標準のTextBoxコントロールを拡張し、スライド式の入力インターフェイスを生成するものだ。Sliderコントロールを利用することで、特定範囲に収まる数値の入力（選択）をマウスにより行うことが可能になる。

Sliderコントロールによるスライダの生成

Sliderコントロールを利用することで、ある一定範囲に属する数値の入力が容易になる。

　マウスによる数値の入力という意味では、「TIPS：［ASP.NET AJAX］NumericUpDownコントロールでアップダウン・ボタンを生成するには？」で紹介したNumericUpDownコントロール（NumericUpDownExtender）に似ているように思われるかもしれないが、SliderコントロールにはNumericUpDownコントロールにはない特長もある。1つに、NumericUpDownコントロールの場合、値の増減をアップダウン・ボタンで行う必要があるため、対象となる値に幅がある場合に操作が煩雑になる（結局、テキストボックスに数値を直接入力した方が早いだろう）。また、あらかじめ規定された値範囲（上限／下限）が視覚的に把握しにくいという問題もある。

　しかし、スライダ（Sliderコントロール）では値の増減をマウスのドラッグ＆ドロップで行えるため、値範囲に幅がある場合にも操作が容易であるし、上限／下限も簡単に見て取ることが可能だ。もちろん、その半面で、Sliderコントロールは、

• NumericUpDownコントロールに比べると、場所を占有しやすい
• スライドの幅／高さや値のスキップ間隔によっては、細かな値の調整が難しい

などのデメリットもある。それぞれのメリット／デメリットを理解して、これら両者のコントロールは使い分けるようにするとよいだろう。

　さて、それではさっそく、先の画面のようなスライダをASP.NETページに実装する手順を見ていくことにしよう。なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

●Sliderコントロールの基本

　新規のWebフォーム（Slider.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。また、それぞれのコントロールに対しては、表の内容でプロパティ値を設定しておこう。

Slider.aspxのフォーム・レイアウト

各コントロールのプロパティ設定は以下のとおり。

コントロール（ID） プロパティ 設定値 ToolkitScriptManager（manager*） − − TextBox（txtNum） − − SliderExtender（slider） BoundControlID lblNum TargetControlID txtNum Length 200 Minimum -100 Decimals 2 Steps 200 TooltipText 現在値は{0}です。 Label（lblNum） Text △（ブランク）

* ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロール。詳細については、「TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？」を参照してほしい。

　SliderコントロールのTargetControlIDプロパティは、スライダ機能を関連付けるTextBoxコントロールを指定するものだ。これによって、TextBoxコントロールtxtNumにSliderコントロールの機能が付与されたことになるわけだ（実行すると、Sliderコントロールによって拡張されたTextBoxコントロールはスライダによって置き換えられるため、テキストボックスとしては非表示の状態となる）。

　なお、Sliderコントロールのそのほかのプロパティを設定する場合、（Sliderコントロールそれ自体ではなく）関連付けたTextBoxコントロールのプロパティとして設定する必要がある点に注意してほしい。本稿の場合であれば、TextBoxコントロールのプロパティ・ウィンドウに「slider（SliderExtender）」という項目が追加されているので、この項目の配下から個々のプロパティ値を設定する。

　Sliderコントロールで利用可能な主なプロパティは、以下のとおりだ。

分類	プロパティ名	概要
基本	TargetControl	スライダ機能を適用するTextBoxコントロールのID値
	BoundControlID	スライダの現在値を表示するためのTextBox／LabelコントロールのID値
	Minimum	スライダの最小値
	Maximum	スライダの最大値
	Decimals	小数点以下のけた数
	Steps	スライダ内での増分／減分の間隔
	Value	スライダの現在値
	Length	スライダの長さ
スタイル	EnableHandleAnimation	アニメーション効果を有効にするか
	HandleAnimationDuration	アニメーション効果の期間（ミリ秒）
	RailCssClass	スライダのレール部に適用するスタイル（CSSクラス）
	HandleCssClass	スライダのハンドル部に適用するスタイル（CSSクラス）
	HandleImageURL	スライダのハンドルに表示する画像URL
そのほか	RaiseChangeOnlyOnMouseUp	マウスのボタンを放したタイミングでのみ変更イベントを発生するか
	TooltipText	ハンドルにマウス・カーソルを当てたときに表示されるテキスト（プレイスホルダとして{0}を使用した場合は現在値を割り当て）
Sliderコントロールで利用可能な主なプロパティ

　Sliderコントロールで指定可能なプロパティは、そのほとんどが直感的に理解できるものばかりであるが、唯一、Stepsプロパティについては要注意だ。直感的には、値の増減幅を意味するように思われるかもしれないが、SliderコントロールのStepsプロパティは「スライダをいくつのステップに分割するか」を決める値であるからだ。つまり、本プロパティの場合は最小／最大値が-100／100（値幅が200）でStepsプロパティが100であるから、結果、スライダとしては2単位（＝200÷100）で増減することになるわけだ。ちなみに、Stepsプロパティが省略された場合、スライダはデフォルトで1単位で増減する。

●Sliderコントロールの見栄えを変更する方法

　以上が、Sliderコントロールを利用してスライダを生成する基本である。Sliderコントロールではアセンブリの中に埋め込みリソースとして、スライダ画像を出力するために必要な画像をあらかじめ用意しているため、殊更に意識することなく、標準的なスライダを生成することができる。

　もっとも、標準的なスライダだけではなく、自前で用意した画像に基づいてスライダを生成したいというケースもあるだろう。その場合には、XxxxxCssClass／HandleImageURLプロパティを設定することで、スライダのスタイルを自由に変更することが可能だ。

　ここでは、Sliderコントロールのハンドル部を星アイコンに変更する例を見てみることにしよう。

スライダのハンドル部分をカスタムのアイコン画像で置き換える例

　変更すべきSliderコントロールのプロパティ設定は、以下のとおりだ。

プロパティ	設定値
HandleImageUrl	~/App_Themes/Basic/Images/FilledStar.png
RailCssClass	hRail
スライダの表示スタイルを変更する場合のプロパティ設定（Slider.aspxの変更分）

　また、RailCssClassプロパティに対応するよう、以下のようなCSSクラスを用意しておこう（FilledStar.png／slider_h_rail.gifはいずれもControl Toolkitのアーカイブに標準で含まれているものだ。あらかじめアプリケーション内に配置しておく必要がある）。

　ここで注意していただきたいのは、以下の2点だ。

（1）HandleImageUrlプロパティはそれ単体では認識されない
　 HandleImageUrlプロパティは、必ずXxxxxCssClassプロパティとセットで指定する必要がある。HandleImageUrlプロパティ単体で指定しても、ハンドル部のアイコンは置き換わらないので、注意してほしい。

（2）RailCssClassプロパティでは横幅を指定すること
　 RailCssClassプロパティで指定するスタイルシートでは、レールの横幅をwidthプロパティで明示的に表す必要がある。RailCssClassプロパティでレールのスタイルをカスタマイズした場合、SliderコントロールのLengthプロパティは無視される――Lengthプロパティはデフォルトのスタイルでしか認識されないという点に要注意だ。

　以上を理解したら、作成したサンプル・プログラムを実行してみよう。先ほどの画面のように、スライドのハンドル部がHandleImageUrlプロパティで指定した画像で置き換わっていれば成功だ。

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］MultiHandleSliderコントロールで複数ハンドルのスライダを作成するには？ ［ASP.NET AJAX］MultiHandleSliderコントロールによるスライダの見栄えをカスタマイズするには？ ［ASP.NET AJAX］NumericUpDownコントロールでアップダウン・ボタンを生成するには？ ［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？ ［ASP.NET AJAX］DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）