.NET TIPS

[ASP.NET AJAX]DragPanelコントロールでドラッグ可能なパネルを定義するには?[2.0のみ、C#、VB]

山田 祥寛
2007/12/20

 DragPanelコントロール(DragPanelExtender)は、ASP.NET AJAX Control Toolkit(以降、Control Toolkit)で提供されるコントロールの1つで、ASP.NET標準のPanelコントロールを拡張し、マウスによるドラッグが可能なパネル(以降、ドラッグ・パネル)を生成するためのコントロールだ。


(パネルをドラッグする)
DragPanelコントロールによるドラッグ・パネルの実装
マウスでページ上のパネル位置を自由にドラッグ&ドロップで移動させることができる。

 DragPanelコントロールの動作自体は明快なので、以下ではさっそく、上の画面のようなドラッグ・パネルをASP.NETページに実装する手順を見ていくことにしよう。

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

1. 新規のWebフォームを作成する

 新規のWebフォーム(DragPanel.aspx)を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。

Webフォーム(DragPanel.aspx)のフォーム・レイアウト
配置するコントロールは以下のとおり。
  ToolkitScriptManagerコントロール(manager)。
  Divタグ(dbase)。
  Panelコントロール(pnl)。
  Panelコントロール(pHeader)。
  Panelコントロール(pContents)。
  DragPanelコントロール(dpe)。

 DragPanelコントロールを利用する場合、ドラッグ・パネル全体、ヘッダ部分、コンテンツ(本体)部分を表す3つのPanelコントロールを配置しておく必要がある(ここではそれぞれpnl、pHeader、pContents)。また、ドラッグ・パネル全体を<Div>タグでくくっておく必要があるので、注意してほしい(筆者の環境では、この<Div>タグを定義していない場合、正しくドラッグ機能が動作しなかった)。

 また、ヘッダ部、コンテンツ部にはそれぞれ適当なテキストを入力しておこう。

2. コントロールのプロパティ情報を設定する

 次に、ページに配置したサーバ・コントロールのプロパティを以下の表の要領で設定する。

コントロール(ID) プロパティ 設定値
ToolkitScriptManager(manager)
Div(dbase) style height:200px;width:200px
Panel(pnl) Width 200px
Panel(pHeader) BorderColor Black
BorderStyle Solid
BorderWidth 1px
CssClass dragMe
Height 20px
Width 100%
Panel(pContents) BackColor #E0E0E0
BorderColor Black
BorderStyle Groove
BorderWidth 1px
Height 130px
Width 100%
DragPanel(dpe) DragHandleID pHeader
TargetControlID pnl
Webフォーム(DragPanel.aspx)のプロパティ設定

 DragPanelコントロールのTargetControlIDプロパティは、ドラッグ機能を関連付けるPanelコントロールを指定するものだ。ここでは“pnl”を指定しているので、これによって、Panelコントロールpnlがドラッグ・パネルとして定義されたことになるわけだ。

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

 もっとも、DragPanelコントロールで提供している固有のプロパティは、DragHandleIDプロパティだけだ。DragHandleIDプロパティは、パネルをマウスでドラッグする場合のハンドル部分を表すもので、通常はヘッダ部分を表すパネルを指定するのが一般的だ。

[参考]

上のサンプルでは、ヘッダ部のスタイルを適用するために、PanelコントロールpHeaderのCssClassプロパティに“dragMe”という名前のクラスを指定している。これはControl Toolkit内のサンプル・アプリケーションに含まれている.cssファイルで定義されているクラスだ。スタイルシートの引用については、「TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?」で紹介しているので、併せて参照していただきたい。

 なお参考として、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではPanelコントロール配下のプロパティとして設定したDragHandleIDプロパティも、コード上はDragPanelコントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にToolkitScriptManagerの配置は必須--%>
<asp:ScriptManager ID="manager" runat="server">
  </asp:ScriptManager>
<%--ドラッグ・パネル全体を定義--%>
<div id="dbase" style="height:200px;width:200px">
  <asp:Panel ID="pnl" runat="server" Width="200px">
    <%--パネルのヘッダ部(ドラッグ・ハンドル部)を定義--%>
    <asp:Panel ID="pHeader" runat="server" Width="100%"
      BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"
      CssClass="dragMe" Height="20px">
        ASP.NET AJAXプログラミング</asp:Panel>
    <%--ドラッグ・パネル内の本体部分を定義--%>
    <asp:Panel ID="pContents" runat="server" Width="100%"
      BackColor="#E0E0E0" BorderColor="Black" BorderStyle="Groove"
      BorderWidth="1px" Height="130px">
      ASP.NET AJAX 1.0、ASP.NET AJAX Control Toolkit対応...
    </asp:Panel>
  </asp:Panel>
</div>
<%--DragPanelコントロールの諸設定--%>
<ajaxToolkit:DragPanelExtender ID="dpe" runat="server"
  DragHandleID="pHeader" TargetControlID="pnl">
  </ajaxToolkit:DragPanelExtender>
DragPanel.aspxのソース・コード(抜粋)
一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

 以上を理解できたら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、ヘッダ部分をマウスでドラッグすることで、パネル位置を自由に移動できることが確認できるはずだ。End of Article

利用可能バージョン:.NET Framework 2.0のみ
カテゴリ:Webフォーム 処理対象:ASP.NET AJAX
使用ライブラリ:DragPanelコントロール
関連TIPS:[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET AJAX]CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには?
[ASP.NET AJAX]AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには?
[ASP.NET AJAX]DropShadowコントロールでパネルに影を付けるには?
[ASP.NET AJAX]RoundedCornerコントロールでパネルの角を丸めるには?
[ASP.NET AJAX]ASP.NET AJAX Control Toolkitを利用するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム 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 -

注目のテーマ

Insider.NET 記事ランキング

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