SHOEISHA iD

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

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

ComponentZine(ComponentOne)

拡張パネルでコンテンツをドロップダウン表示するASP.NETアプリケーションの作成

C1Expanderコントロールを使ったWebアプリケーションの作成

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

C1Expanderコントロールの構成要素

 C1Expanderコントロールは、ヘッダー要素とコンテンツ要素に分けられます。

ヘッダー要素

 C1Expanderコントロールのヘッダー領域はコントロールの上部に表示され、当初は空白で表示します。

 ヘッダー領域には、ヘッダーテンプレートを使用して内容(テキスト、HTMLコンテンツ、画像、他のコントロールなど)を追加できます。単純なドラッグ&ドロップ操作で、デザイン時にコントロールのヘッダー領域に、テキストや画像、コントロールを追加できます。

 ヘッダーには、拡張と縮小の方向を示す拡張/縮小インジケータが表示されます。

ヘッダー領域(ヘルプより抜粋)
ヘッダー領域(ヘルプより抜粋)

コンテンツ要素

 C1Expanderコントロールのコンテンツ領域は、カスタムHTMLコンテンツからはリッチテキスト、ContentUrlプロパティからはURLリンク、コンテンツテンプレートからは任意のコントロールを追加できます。単純なドラッグ&ドロップ操作で、デザイン時にコントロールのコンテンツ領域への追加と移動ができます。

 コンテンツを追加するには、コントロールのコンテンツ領域をクリックし、そこに通常どおりテキストを入力したり、画像やコントロールを追加したりするだけです。

コンテンツ領域(ヘルプより抜粋)
コンテンツ領域(ヘルプより抜粋)

C1Expanderコントロールの動作

 C1Expanderコントロールは、デフォルトでは拡張して表示されます。これを、閉じた状態に変更する場合は、Expandedプロパティを「False」にします。

 Expandedプロパティは、[C1Expanderタスク]メニュー、プロパティウィンドウ、ソースビュー、およびコードで設定できます。Expandedプロパティを[C1Expanderタスク]メニューで設定するには、[拡張]ボックスをONまたはOFFにします。

 また、ExpandDirectionプロパティを使用して拡張の方向を指定することができます。デフォルトでは「Bottom」になっており、ヘッダーをクリックすると下方向に拡張してコンテンツを表示します。

 ExpandDirectionプロパティに使用できる値は4つで、以下のExpandDirection列挙体のメンバを設定します。

メンバ名 説明
Top 上(top)
Right 右(right)
Bottom 下(bottom)
Left 左(left)
拡張の方向(ヘルプより抜粋)
拡張の方向(ヘルプより抜粋)

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

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

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7151 2013/05/24 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング