.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も併せてご確認いただくと、より理解が深まるだろう。End of Article

利用可能バージョン:.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 記事ランキング

本日 月間