.NET TIPS

[ASP.NET AJAX]ResizableControlコントロールで画像/テキスト領域のサイズ変更を行うには?[2.0のみ、C#、VB]

山田 祥寛
2007/09/13

 ResizableControlコントロール(ResizableControlExtender)は、ASP.NET AJAX Control Toolkit(以降、Control Toolkit)で提供されるコントロールの1つで、名前のとおり、コントロールの幅/高さをページ上で変更するためのリサイズ機能を提供する。

 (例えば)限られたスペースに複雑な図を埋め込みたい場合など、従来であれば、ページ内にはサムネイル画像のみを表示しておき、詳細はサブウィンドウで表示する――というような手法が用いられてきたわけであるが、ResizableControlコントロールを利用すれば、初期状態は小さな状態で表示しておき、必要に応じて拡大表示するようなことが可能になる。これによって、情報量の多いページでもよりすっきりとコンテンツを配置できるようになるというわけだ。

 以下の画面はResizableControlコントロールによってテキストと画像のリサイズを行っている例だ。

右下端をつまんでリサイズ
ResizableControlコントロールによるテキストのリサイズ
ResizableControlコントロールを利用することで、パネルをマウスのドラッグ操作でリサイズできるようになる。

右下端をつまんでリサイズ
ResizableControlコントロールによる画像領域のリサイズ

 それではさっそく、ResizableControlコントロールを利用したリサイズ可能なパネルの作成手順を見ていくことにしよう。

 なお、本サンプル・プログラムを動作させるに当たっては、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

●ResizableControlコントロールの基本

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

ResizableControl.aspxのフォーム・レイアウト
各コントロールのプロパティ値は以下のとおり。パネル上に表示されるテキストは適当に入力する。
コントロール(ID) プロパティ 設定値
ToolkitScriptManager(manager*
Panel(presize) BackColor #E0E0E0
BorderColor #8080FF
BorderStyle Solid
BorderWidth 1px
ScrollBars Auto
Height 80px
Width 150px
ResizableControl(rce) TargetControlID presize
HandleCssClass handleText
MaximumHeight 400
MaximumWidth 500
MinimumHeight 10
MinimumWidth 10
* ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロール。詳細については、「TIPS:[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?」も参照してほしい。

 ResizableControlコントロールのTargetControlIDプロパティは、リサイズ機能を関連付けるコントロールを指定するものだ。ここでは“presize”を指定しているので、これによって、PanelコントロールpresizeにResizableControlコントロールの機能が付与されたことになるわけだ。

 なお、ResizableControlコントロールのそのほかのプロパティを設定する場合、(ResizableControlコントロールではなく)関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、Panelコントロールのプロパティ・ウィンドウに「rce(ResizableControlExtender)」という項目が追加されているので、この項目の配下から個々の値を設定することができる。

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

プロパティ 概要
TargetControlID 関連付ける要素のID値
HandleCssClass リサイズのためのハンドル部分に適用するスタイル(CSSクラス名)
ResizableCssClass リサイズ時にターゲット要素に適用するスタイル(CSSクラス名)
MaximumWidth ターゲット要素の最大幅
MaximumHeight ターゲット要素の最大高
MinimumWidth ターゲット要素の最小幅
MinimumHeight ターゲット要素の最小高
OnClientResizeBegin リサイズ開始時に実行するクライアントサイド・スクリプト
OnClientResizing リサイズ中に実行するクライアントサイド・スクリプト
OnClientResize リサイズ完了時に実行するクライアントサイド・スクリプト
HandleOffsetX リサイズ・ハンドルの表示位置(水平方向)
HandleOffsetY リサイズ・ハンドルの表示位置(垂直方向)
ResizableControlコントロールの主なプロパティ

 パネルをリサイズする際に使用するハンドル部分(リサイズ・ハンドル)のスタイルを指定するのは、HandleCssClassプロパティである(必須)。ここでは“handleText”という値を指定しているが、これはControl Toolkitで提供されているサンプル・アプリケーションに含まれている.cssファイルで定義されているクラスだ。スタイルシートの利用については、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」でも紹介しているので、併せて参照していただきたい。

 また、パネルの最大/最小サイズを決定するのは、MaximumWidth/MaximumHeight/MinimumWidth/MinimumHeightプロパティの役割だ。これらプロパティは任意であるが、予期しない大きさにパネルが拡大/縮小されてしまうことを防ぐためにも、これらプロパティには明示的に値を指定することをお勧めしたい。

 以上でResizableControlコントロールを利用するための手続きは完了だ。作成したサンプル・プログラムを実行し、冒頭の画面のような動作を確認できれば、まずは成功だ。

●ResizableControlコントロールでリサイズ可能な画像パネルを生成する

 リサイズ可能な画像パネルを生成する場合も、手順は基本的にテキスト・パネルの場合と変わらない。以下は、先ほど作成したResizableControl.aspxファイルの内容を画像パネルに変更したものだ。

ResizableControl.aspxのフォーム・レイアウト(変更分)
テキストの代わりに、(Panelコントロール上に)Imageコントロールを配置する。Imageコントロールのプロパティ値は以下のとおり。
コントロール(ID) プロパティ 設定値
Image(img) ImageUrl http://www.web-deli.com/image/logo.gif
Style Width:100%;Height:100%;

 画像パネルを生成する場合にポイントとなるのは、Style属性に「Width:100%;Height:100%;」と指定している点だ。これによって、画像のサイズはパネル・サイズに対して相対的に決まる(ここでは100%なのでパネル・サイズに等しくなる)ので、パネルのリサイズに合わせて画像もリサイズされることになるというわけだ。

 以上を理解したら、さっそく改変したサンプルを実行してみよう。冒頭の画面のように、マウスのドラッグ操作によって画像がリサイズされることを確認できれば成功だ。End of Article

利用可能バージョン:.NET Framework 2.0のみ
カテゴリ:Webフォーム 処理対象:ASP.NET AJAX
使用ライブラリ:ResizableControlコントロール
関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?
関連TIPS:[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET AJAX]クライアントサイド・スクリプトからASP.NETのプロファイル機能を利用するには?
[ASP.NET AJAX]CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには?
[ASP.NET AJAX]DragPanelコントロールでドラッグ可能なパネルを定義するには?
[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?
[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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH