.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のフォーム・レイアウト | |||||||||||||||||||||||||||
各コントロールのプロパティ設定は以下のとおり。 | |||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||
* 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のアーカイブに標準で含まれているものだ。あらかじめアプリケーション内に配置しておく必要がある)。
|
|
スライダのレール部分を規定するためのスタイルシート(Sliderコントロール標準のスタイルシートを書き換えたもの) |
ここで注意していただきたいのは、以下の2点だ。
(1)HandleImageUrlプロパティはそれ単体では認識されない
HandleImageUrlプロパティは、必ずXxxxxCssClassプロパティとセットで指定する必要がある。HandleImageUrlプロパティ単体で指定しても、ハンドル部のアイコンは置き換わらないので、注意してほしい。
(2)RailCssClassプロパティでは横幅を指定すること
RailCssClassプロパティで指定するスタイルシートでは、レールの横幅をwidthプロパティで明示的に表す必要がある。RailCssClassプロパティでレールのスタイルをカスタマイズした場合、SliderコントロールのLengthプロパティは無視される――Lengthプロパティはデフォルトのスタイルでしか認識されないという点に要注意だ。
以上を理解したら、作成したサンプル・プログラムを実行してみよう。先ほどの画面のように、スライドのハンドル部がHandleImageUrlプロパティで指定した画像で置き換わっていれば成功だ。
利用可能バージョン:.NET Framework 2.0のみ カテゴリ:Webフォーム 処理対象:ASP.NET AJAX 使用ライブラリ:Sliderコントロール 関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには? 関連TIPS:[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには? 関連TIPS:[ASP.NET AJAX]NumericUpDownコントロールでアップダウン・ボタンを生成するには? |
![]() |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために (2017/7/26)
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために (2017/7/19)
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator (2017/7/18)
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
![]() |
|
|
|
![]() |