ここでは、次の手順を実行して、FlipCard コントロールを使用する簡単なアプリケーションを作成する方法を学びます。

以下の手順は、Visual Studio 2012 で作成されたアプリケーション用です。使用する Visual Studio のバージョンによっては、手順が多少異なる場合があります。

手順１/３：Web フォームへの FlipCard の追加

1. Visual Studio で、新しい ASP.Net Web アプリケーションを作成し、新しい Web フォームを追加します。
2. ツールボックスで FlipCard コントロールを見つけ、Web フォームにドラッグします。ツールボックスでコントロールが見つからない場合は、右クリックして［項目の選択］を選択し、［ツールボックス項目の選択］ダイアログボックスで FlipCard を見つけます。

手順２/３：FlipCard のカスタマイズ

次の手順に従って、FlipCard コントロールの動作と外観をカスタマイズします。

1. FlipCard スマートタグを選択して［C1FlipCard のタスク］メニューを開き、次の設定を行います。
   • ［現在の面］ドロップダウンで値を "Back" に設定して、ページがロードされたときにカードの裏面が表示されるようにします。
   • ［テーマ］ドロップダウンで "midnight" を選択して、FlipCard コントロールの外観を変更します。

2. 

3. FlipCard を右クリックして［プロパティ］を選択し、［プロパティ］ウィンドウで以下を設定します。
   • ［幅］テキストボックスに "200px" と入力します。
   • ［高さ］テキストボックスに "150px" と入力します。
     

ソースビューの場合

<cc1:C1FlipCard> タグで CurrentSide、 Height、Width、および Theme プロパティを変更して、FlipCard のアニメーションをカスタマイズします。

<cc1:C1FlipCardID="C1FlipCard1" runat="server" CurrentSide="Back" Height="150px" Width="200px" Theme="midnight">

コードの場合

次のコードを Page_Load イベントに追加して、FlipCard コントロールのアニメーションをカスタマイズします。

C# でコードを書く場合

C1FlipCard1.CurrentSide = C1.Web.Wijmo.Controls.C1FlipCard.FlipCardSide.Back;
C1FlipCard1.Theme = "midnight";
C1FlipCard1.Height=150;
C1FlipCard1.Width = 200;

Visual Basic でコードを書く場合

C1FlipCard1.CurrentSide = C1.Web.Wijmo.Controls.C1FlipCard.FlipCardSide.Back
C1FlipCard1.Theme = "midnight"
C1FlipCard1.Height=150
C1FlipCard1.Width = 200

ここまでの成果

プロジェクトを実行すると、FlipCard が次の図のように表示されます。

先頭に戻る

手順３/３：FlipCard へのコンテンツの追加

次の手順を実行して、FlipCard コントロールの表面と裏面にコンテンツを追加します。以下の手順は、画像が既に Visual Studio プロジェクトに含まれていることを前提としています。

ソースビューの場合

<cc1:C1FlipCard> タグで FrontSide プロパティと BackSide プロパティを変更して、アニメーションをカスタマイズします。

<cc1:C1FlipCard ID="C1FlipCard1" runat="server" Height="500px" 

Width="500px" BackPanel-Font-Bold="true" >

            <FrontSide> 
                <img src="wijmo-technology.png" height="500" width="500" />
            </FrontSide>

            <BackSide>    
<h2> ASP.NET のための究極の UI コントロールコレクション </h2>
                   
 ComponentOne for ASP.NET Web Forms は、あらゆるブラウザで動作する最新の 
Web アプリケーションを作成およびスタイル設定するためのすべての機能を備えた
開発ツールキットを提供します。Web フォームコントロール、MVC スキャフォールディング、
HTML5/JavaScript ウィジェットなどが含まれており、高速で柔軟性のあるグリッド、
データの視覚化（チャート、ゲージ、レポート）、スケジュールなどの機能を、
数行のコードを書くだけで追加できます。高い評価を受けている Wijmo/JavaScript 
コア技術をベースにしているため、

 HTML5、jQuery、jQuery Mobile、CSS3、SVG などで構築されたクライアント側およびサーバー側のツール一式を統一的に作成できます。        
         </BackSide>

表面

裏面

先頭に戻る