Carousel for ASP.NET Web Forms 2015.05.20 更新グレープシティ株式会社 Carousel for ASP.NET Web Forms 目次製品の概要 ComponentOne Studio for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1：ページへのコントロールの追加 4 手順 2：コントロールへのコンテンツの追加 4-5 手順 3：コントロールの外観と動作のカスタマイズ 5-7 デザイン時のサポート C1Carousel スマートタグ C1Carousel コンテキストメニュー C1Carousel デザイナフォーム C1Carousel の外観テーマタスク別ヘルプカルーセルの向きの設定 8 8-9 9-10 10-11 12 12-13 14 14 カルーセルへのページャの追加 14-15 カルーセル項目の自動再生 15-16 オンデマンドでのカルーセル項目のロード 16-17 カルーセル項目のプレビュー 1 2 17 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms 製品の概要 Carousel for ASP. NET Web Forms は、テキスト、画像、コントロールなどを動的に表示してインタラクティブな ASP.NET ウェブサイトを作成できます。 ComponentOne Studio for ASP.NET Web Forms のヘルプ ComponentOne Studio for ASP.NET Web Forms の各コントロールで共通したトピック、アセンブリの追加、テーマの適用、クライアント側情報などについては「ComponentOne Studio for ASP.NET Web Formsユーザーガイド」を参照してください。 2 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms 主な特長 C1Carousel は、以下の独特な主要機能を備えています。向きデフォルトでは、コントロールは水平方向に表示されますが、項目を垂直方向に表示するように選択できます。Orientation プロパティは、コンテンツを配置したり、スクロールしたりする方向を特定します。データ連結 C1Carousel でデータ連結が対応されています。画像 URL、キャプション、リンクフィールドまたは任意のデータをテンプレートに連結できます。ロードオンデマンド C1Carousel でデータ（ノード）を動的に取得できます。子項目が表示領域にスクロールされた際、AJAX でロードされます。オートプレイ選択すると、コントロールは自動的に画像を繰り返し表示します。各画像を表示する時刻と〈<再生再生>/<一時停止一時停止>〉ボタンを備えたタイマーをカルーセル上部に表示するかどうかを設定できます。 3 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms クイックスタートこのクイックスタートでは、C1Carousel コントロールの機能について学びます。C1Carousel は、独自のビューでメディアを追加する機能を提供します。手順 1：ページへのコントロールの追加：ページへのコントロールの追加この手順では、Web サイトを作成して設定し、空の C1Carousel コントロールを追加します。C1Carousel コントロールを Web サイトに追加するには、以下の手順を実行します。 1. Visual Studio の［ファイルファイル］メニューから、［新規新規］→［プロジェクトプロジェクト］を選択します。［新規プロジェクト新規プロジェクト］ダイアログボックスが表示されます。 2. ［新規プロジェクト新規プロジェクト］ダイアログボックスで、左ペインにある言語を展開し、［Web］を選択します。右ペインで、［空の空の ASP.NET Web アプリケーションアプリケーション］を選択し、アプリケーションの［名前名前］を入力して〈OK〉を選択します。新しいアプリケーションが作成されます。 3. ソリューションエクスプローラで、プロジェクトを右クリックしてコンテキストメニューを開き、［追加追加］→［新しい項目新しい項目］を選択します。 4. ［新しい項目の追加新しい項目の追加］ダイアログボックスで、テンプレートのリストから［Web フォームフォーム］を選択し、項目に Default.aspx という名前を付けて、〈追加追加〉をクリックします。新しいページが開きます。 5. ソースビューで、ページの先頭に次のマークアップを追加して、C1Carousel アセンブリを登録します。ソースビュー <%@ Register Assembly="C1.Web.Wijmo.Controls.4" Namespace="C1.Web.Wijmo.Controls.C1Carousel" TagPrefix="cc1" %> 追加したアセンブリに応じて、上記の「C1.Web.Wijmo.Controls.4」を「C1.Web.Wijmo.Controls.3」に置き換える必要がある場合があります。 6. ページの最初の <div></div> タグの間にマウスを置き、次のマークアップを追加して、C1Carousel コントロールをページに追加します。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="1" EnableTheming="True"></cc1:C1Carousel> この手順では、C1Carousel コントロールをフォームに追加しましたが、コントロールは現在空です。クイックスタートの次の手順では、コントロールにコンテンツを追加します。手順 2：コントロールへのコンテンツの追加：コントロールへのコンテンツの追加 C1Carousel コントロールへのコンテンツの追加はとても簡単であり、さまざまな方法で行えます。この手順では、ImageUrl プロパティを使って画像にリンクします。以下は、「手順 1：ページへのコントロールの追加」トピックを完了し、C1Carousel コントロールがページに追加されていることを前提にしています。コンテンツを C1Carousel コントロールに追加するには、以下の手順を実行します。 1. ソースビューで、<cc1:C1Carousel></cc1:C1Carousel> タグの間にマウスを置き、次のマークアップを追加して、項目をコントロールに追加します。ソースビュー <Items></Items> 2. <Items></Items> タグの間にマウスを置き、次のマークアップを追加して、C1CarouselItem をコントロールに追加しま 4 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms す。ソースビュー <cc1:C1CarouselItem ID="C1CarouselItem1" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/1" Caption="Sport 1"> </cc1:C1CarouselItem> <cc1:C1CarouselItem ID="C1CarouselItem2" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/2" Caption="Sport 2"> </cc1:C1CarouselItem> <cc1:C1CarouselItem ID="C1CarouselItem3" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/3" Caption="Sport 3"> </cc1:C1CarouselItem> <cc1:C1CarouselItem ID="C1CarouselItem4" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/4" Caption="Sport 4"> </cc1:C1CarouselItem> <cc1:C1CarouselItem ID="C1CarouselItem5" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/5" Caption="Sport 5"> </cc1:C1CarouselItem> <cc1:C1CarouselItem ID="C1CarouselItem6" runat="server" ImageUrl="http://lorempixum.com/750/300/sports/6" Caption="Sport 6"> </cc1:C1CarouselItem> 各 C1CarouselItem に対して以下のプロパティを設定することに注意してください。 ID：サーバー側コントロールに割り当てられるプログラム識別子を取得または設定する。 ImageUrl：カルーセル項目の画像 URL。 Caption：カルーセル項目のキャプション。 3. アプリケーションを実行して、ページが次の画像のように表示されていることを確認します。追加したキャプションが表示されていることを確認してください。 4. 画像を移動するには、〈前へ前へ〉および〈次へ次へ〉ボタンを押します。この手順では、C1Carousel コントロールにコンテンツを追加しました。次の手順では、コントロールの外観と動作をカスタマイズします。手順 3：コントロールの外観と動作のカスタマイズ：コントロールの外観と動作のカスタマイズ 5 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms C1Carousel の外観と動作を簡単にカスタマイズできます。次の手順では、コントロールの動作と外観を設定します。以下は、「手順 2：コントロールへのコンテンツの追加」トピックを完了していることを前提にしています。以下の手順を実行します。 1. ソースビューで、<cc1:C1Carousel> タグを編集し、Display="2" のように記述します。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="2" EnableTheming="True"> コントロールに２つの画像が同時に表示されるようになります。 2. ソースビューで、 <cc1:C1Carousel> タグを編集し、AutoPlay="True" ShowTimer="True" を追加します。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="2" EnableTheming="True" AutoPlay="True" ShowTimer="True"> コントロールが自動的に画像を繰り返し表示し、画像が次の画像に切り替わるまでの残り時間を示すプログレスバーが表示されるようになります。 3. ソースビューで、 <cc1:C1Carousel> タグを編集し、ShowPager="True" PagerType="Dots" を追加します。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="2" EnableTheming="True" AutoPlay="True" ShowTimer="True" ShowPager="True" PagerType="Dots"> コントロールにページャが表示され、ユーザーがコレクション内の任意の画像をクリックできるようになります。コントロールの下のドットボタンを押すとページが表示されます。 4. ソースビューで、 <cc1:C1Carousel> タグを編集し、Loop="False" を追加します。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="2" EnableTheming="True" AutoPlay="True" ShowTimer="True" ShowPager="True" PagerType="Dots" Loop="False"> コントロールは画像をループしなくなり、一連の最後の画像が表示された後に最初の画像に戻らなくなります。 5. アプリケーションを実行して、コントロールに変更内容が表示されることを確認します。 6 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms ページャは、コントロールと画像が自動再生されると変更されるタイマーの下に表示されます。ページャはコントロールの下に小さなボタンの形で表示されます。また、コントロールは画像をループしません。この手順では、コントロールの外観と動作をカスタマイズしました。おめでとうございます。このクイックスタートは完了しました。 7 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms デザイン時のサポート以下のセクションでは、C1Carousel のデザイン時環境を使用して C1Carousel コントロールを設定する方法を説明します。 C1Carousel スマートタグ Visual Studio では、C1Carousel コントロールにスマートタグが用意されています。スマートタグは、C1Carousel で最もよく使用されるプロパティを提供するショートカットタスクメニューです。 C1Carousel コントロールでは、スマートタグによって、よく使用されるプロパティにすばやく簡単にアクセスできます。［C1Carousel タスクタスク］メニューにアクセスするには、C1Carousel コントロールの右上端にあるスマートタグをクリックします。これによって、［C1Carousel タスクタスク］メニューが開きます。［C1Carousel タスクタスク］メニューは次のように動作します。データソースの選択既存のデータソースを選択するか、［データソース構成ウィザードデータソース構成ウィザード］から新しい接続を作成します。方向コントロールの Orientation を Horizontal または Vertical のいずれかに設定します。デフォルトの方向は Horizontal です。幅実行時のコントロールの幅を決定します。デフォルトの幅は 600px です。高さ実行時のコントロールの高さを決定します。デフォルトの高さは 300px です。テーマ 8 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms ［テーマテーマ］ドロップダウンボックスをクリックすれば、各種の視覚スキームから選択できます。使用可能な視覚スタイルの詳細については、「テーマ」を参照してください。新しいテーマの作成新しいテーマの作成オプションをクリックすると、ThemeRoller for Visual Studio が開きます。したがって、開発環境内でテーマをカスタマイズすることができます。アプリケーションで ThemeRoller for Visual Studio を使用する方法については、「ThemeRoller for Visual Studio」を参照してください。 CDN の使用［CDN の使用の使用］チェックボックスを ON にすると、CDN からクライアントリソースがロードされます。これはデフォルトで OFF です CDN パス CDN の URL パスを表示します Bootstrap の使用［Bootstrap の使用の使用］オプションを選択すると、コントロールに Bootstrap テーマを適用することができます。アプリケーションで Bootstrap テーマを使用する方法については、「Bootstrap for ASP.NET Web Forms クイックスタートクイックスタート」を参照してください。バージョン情報［バージョン情報バージョン情報］をクリックすると、製品のバージョン情報を確認できるダイアログボックスが表示されます。テンプレートの編集このオプションをクリックすると、テンプレート編集モードテンプレート編集モードが起動します。 C1Carousel コンテキストメニューリスト上の任意の場所を右クリックして、C1Carousel のコンテキストメニューを表示します。これは、Visual Studio がすべての .NET コントロールに提供しているコンテキストメニューですが、C1Carousel のコンテキストメニューは、機能がいくつか追加されています。コンテキストメニューのコマンドは、以下のように動作します。 9 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms スマートタグの表示この項目をクリックすると、［C1Carousel タスクタスク］メニューが表示されます。スマートタグの使用方法や「タスクメニュー」で提供される機能の詳細については、「C1Carousel スマートタグ」を参照してください。カルーセル項目の追加［カルーセル項目の追加］項目をクリックすると、C1Carousel デザイナフォームデザイナフォームが開き、C1Carousel コントロールに項目を追加したり、編集したりできるようになります。テンプレートの編集このオプションをクリックすると、テンプレート編集モードテンプレート編集モードが起動します。 C1Carousel デザイナフォーム C1Carousel デザイナフォームデザイナフォームを使用して、C1CarouselItem を追加および編集すると共に、さまざまなプロパティを設定して C1Carousel コントロールの外観や動作を変更できます。［C1Carousel タスクタスク］メニュー、コンテキストメニュー、およびプロパティウィンドウからデザイナにアクセスできます。任意のメニューから［カルーセル項目の追加カルーセル項目の追加］オプションを選択してデザイナを開きます。デザイナは次のように表示されます。 10 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms 11 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms C1Carousel の外観 C1Carousel コントロールの外観をカスタマイズするには、いくつかのオプションがあります。以下のセクションでは、組み込みのテーマでコントロールの外観を変更する方法や、C1Carousel コントロールの他の要素をカスタマイズする方法を説明します。テーマ C1Carousel には、コントロールの外観を簡単に変更できるテーマが含まれています。コントロールには、コントロールの外観をアプリケーション用にカスタマイズできる複数の組み込みテーマが用意されています。［C1Carousel タスクタスク］メニュー、プロパティウィンドウ、およびコードを使用して、簡単にテーマを変更できます。 Carousel for ASP.NET Web Forms には、以下のテーマが含まれています。テーマプレビュー arctic aristo cobalt 12 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms midnight rocket sterling 13 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms タスク別ヘルプタスク別ヘルプは、ASP.NET のプログラミングに精通し、コントロールの一般的な使用方法を理解しているユーザーを対象としています。ヘルプで概説されている手順を実行すれば、C1Carousel のさまざまな機能を実証するプロジェクトを作成して、C1Carousel の機能を理解できます。各トピックでは、C1Carousel コントロールを使用した特定のタスクのソリューションを示します。タスク別ヘルプの各トピックでは、新しい ASP.NET プロジェクトを作成し、必要なアセンブリへの参照を追加済みであることも前提となります。カルーセルの向きの設定デフォルトでは、C1Carousel コントロールは、水平の向きで表示されます。この例では、Orientation プロパティを使用してカルーセルを縦向き表示に変更する方法を示します。ソースビューの場合ソースビューで、Orientation="Vertical" を <cc1:C1Carousel> タグに追加します。その結果、次のようになります。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" Orientation="Vertical"> プロパティウィンドウの場合デザインビューで、C1Carousel コントロールを選択し、プロパティウィンドウで Orientation プロパティを Vertical に設定します。タスクメニューの場合デザインビューで、C1Carousel のスマートタグをクリックして［C1Carousel タスクタスク］メニューを開き、Orientation プロパティを Vertical に設定します。［C1Carousel タスクタスク］メニューについての詳細は、「C1Carousel スマートタグ」を参照してください。コードの場合次のコードを Page_Load イベントに追加して、Orientation プロパティを Vertical に設定します。 Visual Basicコードの書き方コードの書き方 Visual Basic Me.C1Carousel1.Orientation = "Vertical" C#コードの書き方コードの書き方 C# this.C1Carousel1.Orientation = "Vertical"; カルーセルへのページャの追加 C1Carousel コントロールには、各種のナビゲーションオプションが含まれており、そのオプションの１つを使用してカルーセルにページャを追加することで、ユーザーがより簡単にカルーセル項目をナビゲートできるようになります。 ShowPager プロパティを 14 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms True に設定すると、カルーセルの下にページャが表示され、ユーザーがカルーセル内のすべての項目をナビゲートできるようになります。デフォルトでは、ページャは数字で表示されますが、PagerType プロパティを以下のオプションのいずれかに設定できます。 Slider ページャをスライダで表示し、スライダのつまみボタンをドラッグして別の画像に移動します。 Numbers 数値ページャを表示し、ある数字をクリックしてその項目に移動します。 Dots ページャを小さなボタンで表示し、あるボタンをクリックしてその項目に移動します。 Thumbnails ページャをカルーセル項目のサムネイル画像で表示し、ある項目をクリックしてその項目に移動します。Thumbnails プロパティを設定して、サムネイルに表示する画像を設定できることに注意してください。以下の例では、小さなボタンで表示したページャを追加します。ソースビューの場合ソースビューで、 ShowPager="True" PagerType="Dots"を<cc1:C1Carousel> タグに追加します。その結果、次のようになります。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" ShowPager="True" PagerType="Dots"> デザインビューの場合デザインビューで、C1Carousel コントロールを選択し、プロパティウィンドウで次のように設定します。 ShowPager プロパティを True. PagerType プロパティを Dots. コードの場合以下のコードを Page_Loadイベントに追加し、ページャをカルーセルに追加します。 Visual Basic コードの書き方 Visual Basic Me.C1Carousel1.ShowPager = True Me.C1Carousel1.PagerType = PagerType.Dots C# コードの書き方 C# this.C1Carousel1.ShowPager = true; this.C1Carousel1.PagerType = PagerType.Dots; カルーセル項目の自動再生選択すると、カルーセル内の項目をスライドショーとして自動的に再生できます。 AutoPlay が True に設定されている場合、C1Carousel は自動的にコンテンツ項目を繰り返し表示します。 ShowTimer が True に設定されている場合、ユーザーが実行時にスライドショーを開始および停止できる〈再生〉／〈一時停止〉ボタンを備えるプログレスバーが表示されます。以下の例では、カルーセルにオートプレイ処理とタイマーを追加します。 15 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms ソースビューの場合ソースビューで、 AutoPlay="True" ShowTimer="True"を <cc1:C1Carousel> タグに追加します。その結果、次のようになります。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" AutoPlay="True" ShowTimer="True"> デザインビューの場合デザインビューで、C1Carouselコントロールを選択し、プロパティウィンドウで次のように設定します。 AutoPlay プロパティを True. ShowTimer プロパティを True. コードの場合次のコードを Page_Loadイベントに追加します。 Visual Basic コードの書き方 Visual Basic Me.C1Carousel1.AutoPlay = True Me.C1Carousel1.ShowTimer = True C# コードの書き方 C# this.C1Carousel1.AutoPlay = true; this.C1Carousel1.ShowTimer = true; オンデマンドでのカルーセル項目のロード C1Carousel は、データ（ノード）の動的取得をサポートします。子項目はスクロールインされるときに AJAX を使用してロードされます。以下の例では、LoadOnDemand プロパティを True に設定することにより、オンデマンドでのデータのロードを可能にします。ソースビューの場合ソースビューで、LoadOnDemand="True" を <cc1:C1Carousel> タグに追加します。その結果、次のようになります。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" LoadOnDemand="True"> デザインビューの場合デザインビューで、C1Carousel コントロールを選択し、プロパティウィンドウで LoadOnDemand プロパティを True に設定します。コードの場合次のコードを Page_Load イベントに追加します。 16 Copyright © GrapeCity inc. All rights reserved. Carousel for ASP.NET Web Forms Visual Basic コードの書き方 Visual Basic Me.C1Carousel1.LoadOnDemand = True C# コードの書き方 C# this.C1Carousel1.LoadOnDemand = true; カルーセル項目のプレビュー C1Carousel は、カルーセル内の項目のプレビューをサポートしているので、次の画像の一部を現在の画像と共に表示できます。以下の例では、Preview プロパティを True に設定することによりプレビューを可能にします。ソースビューの場合ソースビューで、Preview="True" を <cc1:C1Carousel> タグに追加します。その結果、次のようになります。ソースビュー <cc1:C1Carousel ID="C1Carousel1" runat="server" Preview="True"> デザインビューの場合デザインビューで、C1Carousel コントロールを選択し、プロパティウィンドウで Preview プロパティを True に設定します。コードの場合次のコードを Page_Load イベントに追加します。 Visual Basic コードの書き方 Visual Basic Me.C1Carousel1.Preview = True C# コードの書き方 C# this.C1Carousel1.Preview = true; 17 Copyright © GrapeCity inc. All rights reserved.