.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のフォーム・レイアウト | |||||||||||||||||||||||||||||||||||||
| 各コントロールのプロパティ値は以下のとおり。パネル上に表示されるテキストは適当に入力する。 | |||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||
ToolkitScriptManager（manager*）
Panel（presize）
ResizableControl（rce）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コントロールのプロパティ値は以下のとおり。 | ||||||||
|
画像パネルを生成する場合にポイントとなるのは、Style属性に「Width:100%;Height:100%;」と指定している点だ。これによって、画像のサイズはパネル・サイズに対して相対的に決まる（ここでは100％なのでパネル・サイズに等しくなる）ので、パネルのリサイズに合わせて画像もリサイズされることになるというわけだ。
以上を理解したら、さっそく改変したサンプルを実行してみよう。冒頭の画面のように、マウスのドラッグ操作によって画像がリサイズされることを確認できれば成功だ。
| 利用可能バージョン：.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」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
