SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

WebSplitter for .NET

.NETで縮小・展開可能な分割パネルを持ったWebページを作る

コンポーネントを使った分割パネルを持つWebページの作成

  • このエントリーをはてなブックマークに追加

コントロールのインストール

 はじめてWebSplitter for .NETを使用する方は、プロジェクトにComponentOne Studio Enterprise 2008JまたはComponentOne Studio for ASP.NET 2008Jをインストールする必要があります。

 インストーラは、グレープシティのWebページからダウンロードできますので、ここからダウンロードしてインストールしてください。製品ページ左側の[ダウンロード]-[トライアル版]をクリックし、ダウンロード方法([FTP]または[HTTP])を選択すれば入手できます。ファイルはzip形式で圧縮されています。

 有償のコントロールですが、プロダクトキーを入力せずにインストールすることで、トライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 ComponentOne Studio Enterprise 2008JまたはComponentOne Studio for ASP.NET 2008Jをインストールしたら、ツールボックスに専用のタブを作成し、C1WebSplitterコンポーネントを追加します。追加するコントロールは、「.NET Frameworkコントロール」の「名前空間」が「C1.Web.C1WebSplitter」で始まる名前空間のコントロール「C1WebSplitter」です。

「名前空間」が「C1.Web.C1WebSplitter」で始まる名前空間のコントロール「C1WebSplitter」を選択する
「名前空間」が「C1.Web.C1WebSplitter」で始まる名前空間のコントロール「C1WebSplitter」を選択する

Webページのデザイン

 Webページは、まずC1WebSplitterコンポーネントを配置し、左側のパネル(Panel1)にテキストとASP.NETの標準コントロールであるButtonを5つ配置します。

 右側のパネルには、同じく標準コントロールのImageコントロールを配置し、ImageUrlプロパティに「oya-0308.jpg」を設定します。Height、Widthプロパティを500にします。

Webページのデザイン
Webページのデザイン

分割の設定

 C1WebSplitterコンポーネントは、デフォルトではドラッグによるスライドタイプになっています。

 これを、クリックによる展開・縮小タイプの分割に変えるには、C1WebSplitterコンポーネントのタスクトレイから「組み込みの分割」をリストから選びます。

タスクトレイから「組み込みの分割」をリストから選ぶ
 タスクトレイから「組み込みの分割」をリストから選ぶ
Thickを選んだ時の分割バーの形状
 Thickを選んだ時の分割バーの形状
BlueArrowを選んだ時の分割バーのタイプ
 BlueArrowを選んだ時の分割バーのタイプ

 また、プロパティウィンドウにある「SplitterDistance」プロパティで、展開・縮小するパネルの横幅を設定できます。

 そして、プロパティウィンドウの「Bar」プロパティをクリックして開き、ToolTipプロパティを設定すると、分割バーにマウスポインタを重ねた時のツールヒントを表示させることができます。

次のページ
イメージの入れ替え

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
WebSplitter for .NET連載記事一覧
この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2843 2008/08/28 18:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング