CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/05/24 14:00
目次

コンポーネントのインストール

 本サンプルアプリケーションでは、「Expander for ASP.NET Wijmo」のC1Expanderコントロールを使用します。

 このコントロールを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。

 トライアル版は、グレープシティのWebページからダウンロードできます。

 ダウンロードしたい製品にチェックを付け[申込フォーム]ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。

 トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

 「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールしたら、プロジェクトにコントロールを追加します。

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

 追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Expander」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Expander」コントロールを選択する
アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Expanderコントロール」コントロールを選択する

 これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル 内容
C1.Web.Wijmo.Controls.4 本体アセンブリ

 また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル 内容
C1.C1Report.4.dll 本体アセンブリ
C1.Web.Wijmo.Controls.4.dll 本体アセンブリ

 なお、.NET Framework 4が必要です。

C1Expanderコントロールの概要

 「Expander for ASP.NET Wijmo」は、さまざまなアニメーション効果を使用して、拡張パネルに埋め込まれたコンテンツや外部コンテンツを表示・非表示にするパネルです。

C1Expanderコントロールの特徴

 C1Expanderは、以下のような機能を持っています。

拡張方向

 C1Expanderはコントロール、ExpandDirectionプロパティを使用してコントロールの拡張方向を、上、右、下、左のいずれかに拡張することができます。

外部コンテンツ

 ContentUrlプロパティを使用して、C1Expanderコントロールに外部コンテンツを表示できます。プロジェクト内の別のWebページのコンテンツや、他のプロジェクトのWebサイトのコンテンツを表示できます。

 また、表示したWebページは、ブラウザで表示しているのと同様に、ハイパージャンプなどの操作を行うことも可能です。

アニメーション効果

 C1Expanderコントロールは、組み込みのアニメーション効果を設定でき、効果はコントロールが拡張または縮小状態に動作する際に適用されます。アニメーション効果は、アニメーションが遷移する方法やアニメーション効果の継続時間などを変更することができます。

※アニメーション動作の詳細は前回の記事「カラフルなツールチップを持つASP.NETアプリケーションの作成」を参照してください。

ページロード時の拡張

 Expandedプロパティを使用することによって、C1Expanderコントロールをページロード時に最初から拡張表示にするかどうかを選択できます。デフォルトでは、ExpandedプロパティはTrueに設定され、コントロールは最初から拡張して表示されます。

テーマ

 スマートタグを単にクリックして、8種類のプレミアムテーマ(Arctic、Midnight、Aristo、Rocket、Cobalt、Sterlingなど)のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成します。

CSSのサポート

 CSS(Cascading Style Sheet)のスタイルを使用して、カスタムスキンを定義します。また、CSSを使用することでExpanderの外観をカスタマイズすることができます。


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

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5