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

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

Webページのデザイン

　では、さっそくアプリケーションを作成していきましょう。作成するアプリケーションは、3つのC1Expanderコントロールを使用して、3つのサイトをページ内に表示します。各C1Expanderコントロールは、デザイン時にContentUrlプロパティを設定しサイトを表示しますが、TextBoxコントロールとButtonコントロールを使って、好きなサイトを表示できるようにします。

ページのレイアウト

　ページには、ASP.NETのTextBox、ButtonコントロールとC1Expanderコントロールを配置します。

　C1ExpanderコントロールはExpandedプロパティを「False」にし、ページ表示時は縮小状態で表示するようにします。

　また、ThemeRolerを使用してデザインを装飾します。

ページレイアウト

C1Expanderコントロールの作成

　最初に、C1Expanderコントロールを作成します。

　① ツールボックスからC1Expanderコントロールのアイコンをクリックし、ページにドラッグ＆ドロップします。

　② 「ContentUrl」プロパティに「http://download.grapecity.com/help/componentone/aspwij_expander/」と入力します。これで、C1Expanderコントロールはこの外部コンテンツ（Webサイト）を表示します。

　③ ここで試しにプロジェクトを実行してみます。グレープシティ社のWebサイトにある「Expander for ASP.NET Wijmoヘルプ」が表示されます。

　C1Expanderコントロールはデフォルトのままなので、コンテンツ領域が拡張して表示されています。

　また、コンテンツ領域も少し狭いですね。

デフォルトで実行したページはコンテンツ領域が拡張表示で少し狭い

　④ 実行を中止し、Visual Studioに戻ります。C1Expanderコントロールをクリックし、プロパティウィンドウにある「Expanded」プロパティを「False」にします。

　これで、アプリケーション実行時はC1Expanderコントロールはコンテンツ領域が閉じた状態になります。

　⑤ また、コンテンツ領域が狭かったのでもう少し広げます。ページエディタを「ソース」に切り替え、次のCSS文を<asp:Content>要素の下に記述します。

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css" media="all">
        .ui-expander-content 
        {
            height: 400px;
        }
    </style>

　⑥ ヘッダー領域にWebサイトのタイトルを設定します。<wijmo:C1Expander>要素の中に、<Header>要素を追加し、タイトル文字列を入力します。

<Header>Expander for ASP.NET Wijmo ユーザーガイド<br /> </Header>

　これで、ヘッダー領域にタイトルが表示されます。

コンテンツ領域が広がり、ヘッダーにタイトルが付いた。

ここまでのHTML文

<%@ Page Title="ホーム ページ" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register assembly="C1.Web.Wijmo.Controls.4" namespace="C1.Web.Wijmo.Controls.C1Expander" tagprefix="wijmo" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <style type="text/css" media="all">
        .ui-expander-content 
        {
            height: 400px;
        }
    </style>

    <h2>
        &nbsp;</h2>
    <p>
    </p>
    <wijmo:C1Expander ID="C1Expander1" runat="server" 
        ContentUrl="http://download.grapecity.com/help/componentone/aspwij_expander/" 
        Expanded="False">
        <Header>Expander for ASP.NET Wijmo ユーザーガイド<br /> </Header>
    </wijmo:C1Expander>
</asp:Content>

　⑦ 同じように、C1Expanderコントロールをあと2つ作成します。

<wijmo:C1Expander ID="C1Expander2" runat="server" Expanded="False" 
    ContentUrl="http://msdn.microsoft.com/ja-jp/library">
    <Header>MSDN ライブラリ<br /> </Header>
</wijmo:C1Expander>
<br />
<br />

<wijmo:C1Expander ID="C1Expander3" runat="server" Expanded="False" 
    ContentUrl="http://www.grapecity.com/tools/products/componentoneasp2012">
    <Header>「ComponentOne Studio for ASP.NET Wijmo 2012J」 製品情報<br /> </Header>
</wijmo:C1Expander>
<br />
<br />

3つのC1Expanderコントロールを作成する