.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のアーカイブに標準で含まれているものだ。あらかじめアプリケーション内に配置しておく必要がある)。

.hRail {
  position:relative;
  background:url("slider_h_rail.gif") repeat-x;
  height:30px;
  width:200px
}
スライダのレール部分を規定するためのスタイルシート(Sliderコントロール標準のスタイルシートを書き換えたもの)

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

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

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

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

利用可能バージョン:.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
[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」


Insider.NET フォーラム 新着記事
  • 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間