［ASP.NET AJAX］MultiHandleSliderコントロールによるスライダの見栄えをカスタマイズするには？［3.5、C#、VB］

.NET TIPS

［ASP.NET AJAX］MultiHandleSliderコントロールによるスライダの見栄えをカスタマイズするには？［3.5、C#、VB］

山田祥寛
2009/09/17

　「TIPS：［ASP.NET AJAX］MultiHandleSliderコントロールで複数ハンドルのスライダを作成するには？」では、MultiHandleSliderコントロールを使ったマルチハンドル・スライダの実装について紹介した。本稿では、引き続きMultiHandleSliderコントロールを使って、スライダの表示を自前の画像でカスタマイズする方法について紹介する。

　本稿で作成するのは、以下のようなスライダである。スライダのレール部分を独自の画像ファイルで置き換えている。

独自の画像でスライダ／ハンドルの表示をカスタマイズ

　それではさっそく、カスタマイズの手順を見ていこう。なお、本稿では前述のTIPSで作成したSlider.aspxファイルを基に、差分の手順のみを紹介する。MultiHandleSliderコントロールの基本的な用法については、前述のTIPSを併せてご参照いただきたい。

1. 画像ファイルを用意する

　本稿のサンプルを利用するには、以下の画像をあらかじめ用意し、.aspxファイルと同じフォルダにインポートしておく必要がある。

画像ファイル名	適用個所
wings.jpg	ハンドルの外側
wings_inner.jpg	ハンドルの内側
handle.gif	ハンドル

サンプル動作に必要な画像ファイル

　handle.gifについては、Control Toolkitのソース・コードに含まれているものをそのまま利用している。

2. スタイルシートを作成する

　MultiHandleSliderコントロールの見栄えをカスタマイズするには、以下のようなスタイルシートを用意しておく必要がある。

.my_slider .outer_rail_horizontal {

  position:absolute;

  background:url('wings.jpg') no-repeat;

  width:215px;

  height:46px;

  z-index:1;

}



.my_slider .inner_rail_horizontal {

  position:absolute;

  background: url('wings_inner.jpg') no-repeat;

  width:215px;

  height:46px;

  z-index:1;

}



.my_slider .handle {

  position:absolute;

  background:url('handle.gif') no-repeat;

  width:10px;

  height:22px;

  z-index:10;

  cursor:pointer;

}

MultiHandleSliderコントロールの見栄えをカスタマイズするためのスタイルシート（SliderStyle.css）

　「.my_slider .outer_rail_horizontal」「.my_slider .inner_rail_horizontal」は、それぞれハンドルの外側／内側に適用されるスタイル、「.my_slider .handle」はハンドルに適用されるスタイルである*1。このうち、斜体文字の部分――「.my_slider」「.handle」の部分は、後述するプロパティ値と整合できていれば、自分で自由に変更しても構わない。

*1　ちなみに、縦型のスライダを生成する場合には、「.my_slider .outer_rail_horizontal」「.my_slider .inner_rail_horizontal」の代わりに、「.my_slider .outer_rail_vertical」「.my_slider .inner_rail_vertical」を定義する。

　自分でスタイルを記述する場合にも、基本的にはリストの内容をベースに、backgroundプロパティ（画像ファイルのパス）、width／heightプロパティ（画像の幅／高さ）を、必要に応じて変更すればよいだろう。

　ただし、1点注意していただきたいのは、z-indexプロパティ（要素の重なる順序）の指定だ。ハンドルのz-indexプロパティよりもレール（.outer_rail_horizontal、.inner_rail_horizontal）のそれが大きい場合には、ハンドルが正しく表示されなくなってしまうので、注意すること。

3. .aspxファイルを編集する

　スタイルシートが編集できたら、あとは.aspxファイルに対して、以下のリストの要領でコードを追加するだけだ。追記部分は太字で示している。

<head runat="server">

  <title>MultiHanleSliderコントロール</title>

  <link rel="Stylesheet" type="text/css"

      href="SliderStyle.css" />

</head>

  …中略…

<ajaxToolkit:MultiHandleSliderExtender ID="mhs" runat="server"

    CssClass="my_slider" ShowInnerRail="true" 

    InnerRailStyle="SlidingDoors"                        

    Maximum="100" Minimum="0" TargetControlID="txtSlider">

  <MultiHandleSliderTargets>

      <ajaxToolkit:MultiHandleSliderTarget

          ControlID="txtHandle1" HandleCssClass="handle" />

      <ajaxToolkit:MultiHandleSliderTarget

          ControlID="txtHandle2" HandleCssClass="handle" />

  </MultiHandleSliderTargets>

</ajaxToolkit:MultiHandleSliderExtender>

MultiHandleSliderコントロールの見栄えをカスタマイズするコード（Slider.aspx）

　まずは、<ajaxToolkit:MultiHandleSliderExtender>要素のプロパティから（）。

　CssClassプロパティは、スライダに適用するスタイル・クラスの名前（ここではmy_slider）を表すものだ。ShowInnerRailプロパティはハンドルの内外でスタイルを区別するかどうかを表すプロパティである。このプロパティがfalseである場合には、（スタイルシートが用意されていても）ハンドル間のスタイルが、ハンドルの外と区別されなくなってしまうので、注意されたい。

ShowInnerRailプロパティがfalseである場合

ハンドルの外側と内側とで画像が区別されていない。

　そして、InnerRailStyleプロパティは、ハンドルの内側の表示方法を指定するためのプロパティである。このサンプルのようにSlidingDoorsと指定した場合には、ハンドルをスライドさせると、引き戸（Sliding Doors）を開けて奥の様子（画像）が見えるようなイメージになる。一方、AsIs指定では、つまみをスライドさせると、指定した画像がそのまま左端から開いている分だけ見えるようなイメージになる。言葉だと分かりにくいと思うので、それぞれの結果の違いを画像で確認してみた方がよいだろう。


InnerRailStyleプロパティによる見栄えの違
左はSlidingDoors指定、右はAsIs指定の場合の結果。

　これでレール部分の表示は設定できたので、あとはハンドル部分を設定するだけだ（）。

　ハンドル部分のスタイルを適用するには、<ajaxToolkit:MultiHandleSliderTarget>要素のHandleCssClassプロパティに、先ほど用意したスタイル・クラスの名前（ここではhandle）を指定すればよい。ドキュメントを見ると、このほかにもホバー／ドラッグ時のスタイルを指定するHandleHoverCssClass／HandleDragCssClassプロパティもあるように書かれているのだが、現在のコントロールでは実装されていないようだ。

　以上を理解できたら、さっそくサンプルを実行してみよう。冒頭の画面のように、スライダがカスタム画像で置き換えられていれば、サンプルは正しく動作している。

●MultiHandleSliderコントロールのプロパティ

　最後に、MultiHandleSliderコントロールで提供される主なプロパティについて、まとめておこう。多くのプロパティが直感的に理解できるものばかりだと思うので、適宜、自分でも設定値を変更して、見栄えや挙動の変化を確認してほしい。

分類

プロパティ名

概要

基本

ControlID

スライダ機能を適用するTextBoxコントロールのID値

Minimum

スライダの最小値

Maximum

スライダの最大値

Length

スライダの長さ（ピクセル）

Decimals

小数点以下の有効けた数

Steps

スライダ内での増分／減分の間隔

Orientation

スライダの方向（Horizontal｜Vertical）

MultiHandleSliderTargets

個々のハンドルに関する情報

サブプロパティ名	概要
ControlID	ハンドルをバインドするコントロール（ID値）
HandleCssClass	ハンドルに適用するスタイル
Offset	ハンドルの内側のスタイルを適用するオフセット位置（ピクセル）

挙動

EnableHandleAnimation

スライダ・クリック時のハンドル移動にアニメーションを適用するか

EnableRailClick

スライダ（レール）クリック時のハンドル移動を有効にするか

EnableInnerRangeDrag

複数ハンドルの間をドラッグした場合に両側のハンドルを同時に移動するか（複数ハンドルを持つ場合）

EnableKeyboard

キーボードからスライダの操作を可能にするか

EnableMouseWheel

マウス・ホイールからスライダの操作を可能にするか

HandleAnimationDuration

アニメーション効果の期間（秒単位）

Increment

スライダの変化値（キーボード／ホイール操作が有効の場合）

イベント

OnClientLoad

スライダの初期化時に発生

OnClientDragStart

ハンドルのドラッグを開始するタイミングで発生

OnClientDrag

ハンドルをドラッグしているタイミングで発生

OnClientDragEnd

ハンドルのドラッグを終えたタイミングで発生

OnClientValueChanged

ハンドルの値が変更されたタイミングで発生

見栄え

CssClass

スライダに適用されるスタイル・クラス

ShowInnerRail

ハンドルの内外でスタイルを区別するか（複数ハンドルを持つ場合）

ShowHandleHoverStyle

ハンドルにマウスをホバーしているときに異なるスタイルを適用するか

ShowHandleDragStyle

ユーザーがハンドルをドラッグしているときに異なるスタイル・クラスを適用するか

InnerRailStyle

ハンドル間のスタイルを適用する方法（複数ハンドルで、かつ、カスタム・スタイルを適用している場合のみ）

設定値	概要
AsIs	画像を左端からそのまま描画するか
SlidingDoors	引き戸を開けるときのように描画するか

そのほか

RaiseChangeOnlyOnMouseUp

マウスのボタンを放したタイミングでのみ変更イベントを発生するか

TooltipText

ハンドルにマウス・カーソルを当てたときに表示されるテキスト（プレイスホルダとして{0}を使用した場合は現在値を割り当て）

MultiHandleSliderコントロールのプロパティ

　基本的なプロパティについては、Sliderコントロールとも多く共通しているので、前述のTIPSも併せてご確認いただくと、より理解が深まるだろう。

利用可能バージョン：.NET Framework 3.5
カテゴリ：Webフォーム　処理対象：ASP.NET AJAX
使用ライブラリ：MultiHandleSliderコントロール
関連TIPS：［ASP.NET AJAX］MultiHandleSliderコントロールで複数ハンドルのスライダを作成するには？

この記事と関連性の高い別の.NET TIPS

		数値を右詰めや0埋めで文字列化するには？
		文字と文字列を変換するには？
		日付や時刻を文字列に変換するには？
		数値を3けた区切りの文字列に変換するには？
		DataGridViewコントロールで数値を3けた区切りで表示するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム 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 記事ランキング

本日月間

＠IT