Tabs for ASP.NET Web Forms 2015.05.20 更新 グレープシティ株式会社 Tabs for ASP.NET Web Forms 目次 製品の概要 ComponentOne Studio for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1:ページへの C1Tabs の追加 4 手順 2:C1Tabs デザイナフォームでの作業 4 手順 3:コントロールへのコンテンツの追加 4-5 デザイン時のサポート C1Tabs スマートタグ C1Tabs コンテキストメニュー C1Tabs デザイナフォーム C1Tabs の要素 タブストリップの配置 テーマ C1Tabs の動作 6 6 6-7 7-10 11 11-12 13-14 15 キーボードアクセス 15 ツールチップ 15 選択インデックス 15 タスク別ヘルプ テーマの利用 16 16 組み込みテーマの使用 16-17 カスタムテーマの使用 17-19 C1Tabs コントロールへのタブページの追加 19-20 コードによる C1Tabs コントロールの作成 20-22 タブページのコンテンツの追加と操作 1 2 22 C1Tabs へのコントロールの追加 22-23 C1Tabs のタブページへのテキストの追加 23-24 配置の変更 24-26 選択インデックスの変更 26-27 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms 製品の概要 Tabs for ASP.NET Web Forms を使用して、Web コンテンツを簡単に整理および移動します。各タブのコンテンツの全ペー ジをホストします。 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. Tabs for ASP.NET Web Forms 主な特長 C1Tabs には、次の役に立つ主な機能があります。 タブの向き デフォルトで、C1Tabs は上部に水平方向で表示されます。表示位置は右部分、左部分、または下部分に簡単に変え ることができます。 ホスト外部コンテンツ 外部コンテンツをページ内にホストします。プロジェクト内の別の Web ページのコンテンツまたはプロジェクト外の Web サイトのコンテンツを表示します。 Scrollable scrollableオプションを true に設定すると、タブの数が多すぎてタブの幅に収まらないときに、タブが折り返されずスク ロールして表示されます。 タブの追加/削除 addTab 関数を使用してタブを動的に追加します。また、タブ上の「x」をクリックして個々のタブを閉じる機能を含めるこ ともできます。 アニメーション エンドユーザーがタブページをナビゲートする場合の遷移効果を追加します。組み込みのアニメーションから選択する か、独自のカスタム効果を追加します。 テーマ スマートタグをクリックするだけで、6種類のプレミアムテーマ(Arctic、Midnight、Aristo、Rocket、Cobalt、および Sterling)のいずれかを選択して外観を変更します。オプションとして、jQuery UI からThemeRoller を使用してカスタマ イズしたテーマを作成します。 CSS のサポート CSS(Cascading Style Sheet)のスタイルを使用して、カスタムスキンを定義します。 3 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms クイックスタート このクイックスタートでは、ナビゲーションコントロールを使用して単純なページ化された領域を Web サイト内に作成 し、C1Tabs コントロールの機能を紹介します。 手順 1:ページへの :ページへの C1Tabs の追加 この手順では、まずページに C1Tabs コントロールを追加します。 開始するには、以下の手順を実行します。 1. 新しい ASP.NET Web サイトプロジェクトを作成します 2. ドキュメントウィンドウのすぐ下の「デザイン デザイン」タブをクリックして、デザインビューに切り替えます。 3. Visual Studio ツールボックスに移動し、C1Tabs をダブルクリックして、ページにコントロールを追加します。 Web ページに空の C1Tabs コントロールが組み込まれます。 手順 2::C1Tabs デザイナフォームでの作業 C1Tabs デザイナフォームを使用すると、C1Tabs コントロールや各 C1TabPage を簡単にカスタマイズできます。この手順で は、C1Tabs デザイナフォームを使用して、3つの C1TabPage を C1Tabs コントロールに追加し、その動作を変更します。 以下の手順を実行します。 1. C1Tabs のスマートタグをクリックして[C1Tabs タスク]メニューを開き、デザイナを開く デザイナを開く を選択します。 C1Tabs デザイナフォームが開きます。 2. C1Tabs デザイナフォームで、〈子項目の追加 子項目の追加〉ボタンをクリックし、C1TabPage をコントロールに追加します。 3. 〈子項目の追加 子項目の追加〉ボタンをもう一度クリックし、別の C1TabPage を C1Tabs コントロールに追加します。 4. C1Tabs1 を選択し、プロパティグリッドで以下のプロパティを設定します。 Height プロパティを「300px」に設定します。 Width プロパティを「400px」に設定します。 5. 〈OK〉をクリックしてC1Tabs デザイナフォーム デザイナフォームを保存し、閉じて、C1Tabs コントロールにタブが2つあることを確認しま す。 次の手順では、C1Tabs コントロールにコンテンツを追加し、その外観をカスタマイズします。 手順 3:コントロールへのコンテンツの追加 :コントロールへのコンテンツの追加 この手順では、C1Tabs コントロールにコンテンツを追加します。コントロールのボディをクリックしてテキストを入力するか、 ツールボックスからコントロールを追加することで、簡単にコントロールにコンテンツを追加することができます。 以下の手順を実行し、C1Tabs コントロールのページに標準コントロールとテキストコンテンツを追加します。 4 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms 1. C1Tabs コントロールのコンテンツ領域内でクリックし、「タブページ1です。」を入力します。 C1Tabs コントロールの最初のページにテキストコンテンツが追加されます。 2. ソースビューに切り替えて C1Tabs コントロールの構造を確認し、以下に示す タグを2番目の手順の <cc1:C1TabsStep> に追加します。その結果次のように示されます。 ソースビュー <cc1:C1TabPage Text="タブ2" ID="Tab2" runat="server"> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </cc1:C1TabPage> これにより、C1Tabs コントロールの2ページ目に Calendar コントロールが追加されます。 3. [F5]を押してアプリケーションを実行し、最初のタブページがフォーカスされた状態でC1Tabs コントロールが表示され ることを確認します。 4. 「Tab2」をクリックして、2番目のタブページがフォーカスされることを確認します。 5 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms デザイン時のサポート 以下の各セクションでは、C1Tabs のデザイン時環境を使用して、C1Tabs コントロールを設定する方法について説明します。 C1Tabs スマートタグ C1Tabs コントロールには、Visual Studio のスマートタグ ( ) が含まれています。スマートタグは、C1Tabsで最もよく使用さ れるプロパティを提供するショートカットのタスクメニューを表します。 [C1Tabs タスク タスク]メニューにアクセスするには、C1Tabsコントロールの右上端にあるスマートタグをクリックします。 [C1Tabs タスク タスク]メニューは次のように動作します。 デザイナを開く デザイナを開く デザイナを開くをクリックすると、プロパティウィンドウをスクロールしなくても C1Tabs の要素を手軽に設定できる C1Tabs デザイナフォームが開きます。コントロールのコンテンツをロードし、保存して、コントロールに C1Tabs を追加 できます。 テーマ テーマを組み込みスキンの1つに設定します。 新しいテーマの作成 [新しいテーマの作成 新しいテーマの作成]オプションをクリックすると、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 クイックスタート」 を参照 してください。 バージョン情報 [バージョン情報 バージョン情報]をクリックすると、製品のバージョン情報を確認できるダイアログボックスが表示されます。 C1Tabs コンテキストメニュー C1Tabs には、Visual Studio がすべての .NET コントロールや ASP.NET コントロールに提供しているコンテキストメニューで利 6 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms 用できる追加機能があります。 C1Tabs コントロール上の任意の場所を右クリックし、C1Tabs のコンテキストメニューを表示します。 コンテキストメニューのコマンドは、以下のように動作します。 スマートタグの表示 [スマートタグの表示 スマートタグの表示]をクリックすると、[C1Tabs タスク タスク]メニューが開きます。 デザイナを開く [デザイナを開く デザイナを開く]をクリックすると、C1Tabs デザイナフォーム デザイナフォームが開き、C1TabPage の追加、削除、および並べ替えが できます。このフォームで、C1Tabs のプレビューや、各 C1TabPage の外観、動作などのさまざまなプロパティの設定 もできます。 C1Tabs デザイナフォーム C1Tabs デザイナフォーム デザイナフォームは、コントロールのプロパティや C1Tabs のプロパティを編集できる C1Tabs のデザイナで す。C1Tabs デザイナフォーム デザイナフォームは、コントロールを視覚的に修正できる点でプロパティウィンドウに似ています。ただし、このデ ザイナでは、C1Tabs およびC1TabPage の選択、それらのプロパティの設定、C1TabPage の位置の操作、それに C1Tabs コントロールの外観のプレビューがすべてフォーム内でできます。 このトピックでは、C1Tabs デザイナフォーム デザイナフォームのデザインインタフェースに精通することにより、デザイナ内でコマンドを使用し、 最小限の労力と時間でC1Tabs を編集できるようになります。 C1Tabs デザイナフォーム デザイナフォームを開くには、C1Tabs のスマートタグをクリックし、[C1Tabs タスク タスク]メニューから[デザイナを開く デザイナを開く]リ ンクを選択します。 C1Tabs デザイナフォームの機能 C1Tabs デザイナフォーム デザイナフォームには、メニュー、ツールバー、「編集」タブ、「プレビュー プレビュー」タブ、およびプロパティペインが含まれてい ます。 7 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms C1Tabs デザイナフォームのメニュー C1Tabs デザイナフォームのメニューには、次のメニュー項目とサブ項目が含まれています。 8 メニュー項目 サブメニュー項目 説明 ファイル 終了 C1Tabs デザイナフォームを閉じます。 編集 項目の挿入 タブやセパレータのリスト内の指定された場所に C1TabPage を挿入し ます。 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms 子の追加 選択された C1Tabs の子として C1TabPage を追加します。 切り取り 項目リスト内で移動するために、選択された C1TabPage を切り取りま す。 コピー 選択された C1TabPage をコピーします。 貼り付け 項目リスト内の指定された場所に C1TabPage を貼り付けます。 削除 選択された C1TabPage を削除します。 名前の変更 C1TabPage の名前を変更できます。 C1Tabs デザイナフォームのツールバー 下の表で、各ボタンについて説明します。 ボタン 名前 説明 項目を上に移動 選択された C1TabPage をアイテムリストの上へ移動します。 アイテムを下に移動 選択された C1TabPage をアイテムリストの下へ移動します。 アイテムを左に移動 メニュー階層内で、選択された C1TabPage を左へ移動します。 アイテムを右に移動 メニュー階層内で、選択された C1TabPage を右へ移動します。 子項目の追加 C1TabPage を C1Tabs コントロールの子として挿入します。 項目の挿入 項目リスト内の指定された場所に C1TabPage を挿入します。 切り取り 項目リスト内で移動するために、選択された C1TabPage を切り取ります。 コピー 選択された C1TabPage をコピーします。 貼り付け 項目リスト内の指定された場所に C1TabPage を貼り付けます。 削除 選択された C1TabPage を削除します。 「編集」タブ 「編集 編集」タブをクリックし、プロパティの操作や調節を行うC1Tabs コントロールまたは目的の C1TabPage を選択しま す。 「プレビュー」タブ 9 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms C1Tabs デザイナフォーム デザイナフォームのプロパティペインは、Visual Studio のプロパティウィンドウとほぼ同じです。ここでは、単 純に C1Tabs またはC1TabPage を選択し、目的のプロパティを設定します。 コマンドボタン 次の表は、コマンドボタンの一覧です。 10 ボタン 説明 OK 〈OK〉をクリックすると、新しい設定値がC1Tabs コントロールに適用されます。 キャン セル 〈キャンセル〉をクリックすると、C1Tabs デザイナフォームが閉じて新しい設定値は破棄され、デフォルト設 定値が C1Tabs コントロールに適用されます。 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms C1Tabs の要素 C1Tabs は、実質的にはウィザードコントロールとタブストリップを組み合わせたものです。C1Tabs は、(C1TabPage クラスで 表される)複数のページを、1ページずつ表示するために使用されます。C1Tabs のナビゲーションは、統合されたタブストリッ プで処理されます。 タブストリップ C1Tabs のタブストリップは、コントロールのページをナビゲートするために使用されます。各タブは、1つの C1TabPage に関 連付けられています。タブストリップは、コントロールの上部、下部、左、右のいずれかに配置できます。 タブページ C1Tabs のタブページは、書式付きテキスト、コントロール、テーブルなど、さまざまな要素を保持することができます。ま た、C1Tabs には、C1TabPage タグ内でサーバーコントロールを宣言するだけで、任意のコントロールを追加できます。たとえ ば、次のマークアップでは、Button サーバーコントロールが C1Tabs の最初のページ内に追加されます。 ソースビュー <cc1:C1TabPage ID="C1TabPage01" runat="server"> <asp:Button ID="Button1" runat="server" Text="ボタン" /> </cc1:C1TabPage> タブストリップの配置 C1Tabs のタブストリップ要素は、コントロールの4つの領域、上、下、左、右のいずれかに表示できます。タブストリップの位置 は、Direction プロパティによって処理されます。 各設定の例については、下の図を参照してください。 向き 11 例 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms 上 下 左 右 12 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms テーマ C1Tabs には、コントロールの外観を簡単に変更できるテーマが容易されています。このコントロールには、6種類の組み込み テーマが含まれており、アプリケーションのコントロールをすばやくカスタマイズできます。 Arctic Aristo Cobalt 13 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms Midnight Rocket Sterlin 14 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms C1Tabs の動作 以下のトピックでは、C1Tabs コントロールの動作に関する機能について説明します。これらの機能の中には、ロード時のコン トロールの動作に影響を与えるものや、ユーザーによるコントロールのインタラクティブ操作に影響を与えるものがあります。 キーボードアクセス Tabs for ASP.NET Web Forms では、C1Tabs コントロールと各タブページに対してキーボード操作がサポートされていま す。この機能は、タブストリップ全体については C1Tabs.AccessKey プロパティにアクセスキーを設定し、個々のタブについて は C1TabPage.AccessKey プロパティにアクセスキーを設定することによって有効にできます。AccessKey プロパティを設定 すると、キーボードで[ALT]キーとアクセスキーを同時に押すことによって要素にアクセスできます。 ツールチップ ToolTip プロパティを使用して、使いやすいインタフェースを作成できます。ツールチップは、ユーザーインタフェースの要素に 関する情報や指示をユーザーに提供する、グラフィックユーザーインタフェースの要素です。ユーザーがこのインタフェース要 素上にマウスポインタを置くと、追加情報が記載されたボックスが表示されます。 ツールチップは、ToolTip プロパティを文字列に設定することによって、C1Tabs コントロールの各タブページに適用できます。 コントロールの最初のタブにツールチップを設定する場合は、次のコードを使用します。 Visual Basic コードの書き方 Visual Basic TabPage1.ToolTip = "Hello World!" C# コードの書き方 C# TabPage1.ToolTip = "Hello World!"; C1TabPage.ToolTip プロパティは、デザインビューまたはソースビューでも設定できます。 選択インデックス C1Tabs コントロールのタブページには、ゼロベースのインデックスが付けられます。つまり、最初のタブページのインデックス はゼロです。デフォルトでは、Selected プロパティは 0 に設定され、実行時には最初のタブが選択されます。実行時に選択さ れるタブとタブページを変更するには、Selected プロパティをインデックス内の別の値に設定します。たとえば、4つのタブが あり、実行時に最後のページが選択されるようにする場合は、Selected プロパティを3に設定します。 15 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms タスク別ヘルプ タスク別ヘルプセクションでは、Visual Studio ASP.NET 環境でのプログラミングに精通し、Tabs for ASP.NET Web Forms コントロールを全般的に理解しているユーザーを対象としています。 各トピックでは、C1Tabs コントロールを使用した特定のタスクのソリューションを示します。各トピックで説明されている手順に 従うことによって、さまざまな C1Tabs 機能を使用したプロジェクトを作成できます。 テーマの利用 このセクションのトピックは、組み込みテーマとカスタムテーマを利用する方法を示します。 組み込みテーマの使用 C1Tabs コントロールには、ほんの数クリックで適用できる6種類の組み込みテーマが用意されています。このトピックでは、デ ザインビュー、ソースビュー、およびコードでテーマを変更する方法を説明します。テーマについての詳細は、「テーマ」を参照 してください。 デザインビューでのテーマの変更 以下の手順を実行します。 1. C1Tabs スマートタグ( )をクリックして、[C1Tabs タスク タスク]メニューを開きます。 2. [テーマ テーマ]ドロップダウン矢印をクリックして、リストからテーマを選択します。この例では、rocket を選択します。 rocket テーマがC1Tabs コントロールに適用されます。 ソースビューでのテーマの変更 ソースビューで C1Tabs のテーマを変更するには、VisualStyle="rocket" を、次のように <cc1:C1Tabs> タグに追加します。 ソースビュー <cc1:C1Tabs ID="C1Tabs1" runat="server" Theme="rocket"/> コードでのテーマの変更 以下の手順を実行します。 1. 以下の名前空間をプロジェクトにインポートします。 Visual Basic コードの書き方 16 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms Visual Basic Imports C1.Web.Wijmo.Controls C# コードの書き方 C# using C1.Web.Wijmo.Controls; 2. C1TargetControlBase.Theme プロパティを設定する次のコードを、Page_Load イベントに追加します。 Visual Basic コードの書き方 Visual Basic C1Tabs1.Theme = "rocket" C# コードの書き方 C# C1Tabs1.Theme = "rocket"; 3. プログラムを実行します。 このトピックの作業結果 次の図は、rocket テーマが設定された C1Tabs コントロールを示しています。 カスタムテーマの使用 Tabs for ASP.NET Web Forms には6種類の組み込みテーマが用意されていますが、異なるテーマを使用する場合は、CDN URL を使用して既存のテーマを選択するか、jQuery ThemeRoller Web アプリケーションを使用して独自のカスタムテーマを 作成することができます。以下の例では、C1Tabs コントロールを使用します。 CDN URL の使用 以下の手順を実行します。 1. C1Tabs スマートタグをクリックして、[C1Tabs タスク]メニューを開きます。 2. [CDN の使用]チェックボックスを ON にします。 3. Theme プロパティに CDN URL を入力してテーマを指定します。CDN URL は http://blog.jqueryui.com/2011/06/jquery-ui-1-8-14/ で確認できます。この例では、次の trontastic テーマを使用し ます。http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/trontastic/jquery-ui.css。 17 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms このテーマ設定は Web.config ファイルの <appSettings> に格納されています。ソリューションエクスプローラで、 Web.config ファイルをダブルクリックします。 タグに WijmoTheme キーと値が含まれていることに注意してください。 これは、追加した CDN URL が指定されている場所です。 4. プロジェクトを実行し、テーマが C1Tabs に適用されていることを確認してください。 jQuery ThemeRoller の使用 以下の手順を実行します。 1. http://jqueryui.com/themeroller/ に移動します。 2. 「Roll Your Own」タブで、設定を変更してカスタムテーマを作成します。フォント、色、背景、枠線などをカスタマイズで きます。または、「Gallery」タブをクリックして既存のテーマを選択します。 3. 〈Download〉ボタンをクリックし、Build Your Download ページでもう一度〈Download〉をクリックします。 4. テーマの .zip ファイルを Visual Studio プロジェクトフォルダ内のフォルダに保存し、解凍します。この例で は、CustomTheme フォルダを作成しました。 5. ソリューションエクスプローラで、〈すべてのファイルを表示 すべてのファイルを表示〉をクリックし、CustomTheme フォルダを右クリックして[プ プ ロジェクトに取り込む ロジェクトに取り込む]を選択します。 6. C1Tabs スマートタグをクリックして、[タスク タスク]メニューを開きます。 7. [CDN の使用 の使用]チェックボックスを ON にします。 8. Theme プロパティで、カスタムテーマ .css へのパス(たとえば、CustomTheme\jquery-ui1.8.22.custom\css\jquery-ui-1.80.22.custom.css)を入力します。 18 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms このテーマ設定は Web.config ファイルの <appSettings> に格納されています。ソリューションエクスプローラで、 Web.config ファイルをダブルクリックします。 タグに WijmoTheme キーと値が含まれていることに注意してください。 これは、追加したカスタムテーマが指定されている場所です。 9. プロジェクトを実行し、テーマがC1Tabs に適用されていることを確認してください。 C1Tabs コントロールへのタブページの追加 このトピックでは、デザインビュー、ソースビュー、およびコードで、C1Tabs コントロールにタブページを追加する方法を説明し ます。 デザインビューの場合 以下の手順を実行します。 1. スマートタグをクリックして、[C1Tabs タスク タスク]メニューを開きます。デザイナを開く デザイナを開くを選択します。 [C1Tabs デザイナフォーム デザイナフォーム]ダイアログボックスが開きます。 2. 〈子項目の追加〉ボタンをクリックし、C1TabPage を C1Tabs コントロールに追加します。ツリービューに「Tab1」と表示 されます。 3. 〈OK〉をクリックして、[C1Tabs デザイナフォーム デザイナフォーム]ダイアログボックスを閉じます。 ソースビューの場合 ソースビュー <cc1:C1TabPage ID="Tab1" runat="server" Text="タブ1"> </cc1:C1TabPage> コードの場合 以下の手順を実行します。 19 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms 1. 以下の名前空間をプロジェクトにインポートします。 Visual Basic コードの書き方 Visual Basic Imports C1.Web.Wijmo.Controls.C1Tabs C# コードの書き方 C# using C1.Web.Wijmo.Controls.C1Tabs; 2. 次のコードを Page_Load イベントに追加します。 Visual Basic コードの書き方 Visual Basic Dim TabPage1 As New C1TabPage() TabPage1.Text = "タブページ1" C1Tabs1.Controls.Add(TabPage1) C# コードの書き方 C# C1TabPage TabPage1 = new C1TabPage(); TabPage1.Text = "タブページ1"; C1Tabs1.Controls.Add(TabPage1); コードによる C1Tabs コントロールの作成 場合によっては、コードで C1Tabs コントロールをプロジェクトに追加する必要があるかもしれません。このトピックでは、C# と Visual Basic のコードを使用して、3つの C1TabPage オブジェクトを持つ C1Tabs コントロールを作成する方法を学びます。 以下の手順を実行します。 1. PlaceHolder コントロールをページに追加します。 2. デザインビューで、ページをダブルクリックして Page_Load イベントをプロジェクトに追加し、コードエディタに切り替え ます。 3. 以下の名前空間をプロジェクトにインポートします。 Visual Basic コードの書き方 Visual Basic Imports C1.Web.Wijmo.Controls.C1Tabs C# コードの書き方 C# using C1.Web.Wijmo.Controls.C1Tabs; 4. C1Tabs オブジェクトを作成し、その Width プロパティと Height プロパティを設定してから、Page_Load イベントに次 のコードを配置することによって、そのオブジェクトをプロジェクトに追加します。 20 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms Visual Basic コードの書き方 Visual Basic Dim NewTabs As C1Tabs = New C1Tabs() NewTabs.Width = 300 NewTabs.Height = 200 PlaceHolder1.Controls.Add(NewTabs) C# コードの書き方 C# C1Tabs NewTabs = new C1Tabs(); NewTabs.Width = 300; NewTabs.Height = 200; PlaceHolder1.Controls.Add(NewTabs); 5. 3つの C1TabPage オブジェクトを作成し、それらを C1Tabs に追加します。このコードは、Page_Load イベントにも追 加する必要があります。 Visual Basic コードの書き方 Visual Basic '3つの C1TabPage オブジェクトを作成 Dim C1TabPage1 As C1TabPage = New Dim C1TabPage2 As C1TabPage = New Dim C1TabPage3 As C1TabPage = New 'TabPage の Text プロパティを設定 C1TabPage1.Text = "C1タブページ1" C1TabPage2.Text = "C1タブページ2" C1TabPage3.Text = "C1タブページ3" '3つの C1TabPage オブジェクトを C1Tabs NewTabs.Controls.Add(C1TabPage1) NewTabs.Controls.Add(C1TabPage2) NewTabs.Controls.Add(C1TabPage3) C1TabPage() C1TabPage() C1TabPage() に追加 C# コードの書き方 C# // 3つの C1TabPage オブジェクトを作成 C1TabPage C1TabPage1 = new C1TabPage(); C1TabPage C1TabPage2 = new C1TabPage(); C1TabPage C1TabPage3 = new C1TabPage(); // TabPage の Text プロパティを設定 C1TabPage1.Text = "C1タブページ1"; C1TabPage2.Text = "C1タブページ2"; C1TabPage3.Text = "C1タブページ3"; // 3つの C1Tab オブジェクトを C1Tabs に追加 NewTabs.Controls.Add(C1TabPage1); NewTabs.Controls.Add(C1TabPage2); NewTabs.Controls.Add(C1TabPage3); 6. プログラムを実行します。 21 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms このトピックの作業結果 プロジェクトが実行されると、C1Tabs コントロールは次の図のようになります。 タブページのコンテンツの追加と操作 C1Tabs コントロールでは、任意のコントロールの組み込み、テキストの表示、および外部コンテンツの表示が可能です。説明 されているC1Tabs コントロールのページへコンテンツを追加する方法について説明します。 C1Tabs へのコントロールの追加 ドラッグ&ドロップ操作や、XHTML、またはコードを使用して、C1Tabs の個々のページに任意のコントロールを追加できます。 このトピックでは、標準 Button コントロールをタブページに追加する方法について説明します。このトピックは、コントロールに 少なくとも1つのタブページを追加済みであることが前提となります(「C1Tabs コントロールへのタブページの追加」を参照して ください)。 デザインビューの場合 以下の手順を実行します。 1. デザイナーで、コントロールを追加するタブを選択します。タブを選択するには、C1Tabs コントロールを選択し、タブを クリックします。 2. Visual Studio ツールボックスから Button コントロールを選択し、それを C1TabPage にドラッグします。 ソースビューの場合 以下の手順を実行します。 1. コントロールを追加するタブページの <cc1:C1TabPage> タグを選択し、それらの間に次のタグを記述しま す。<asp:Button ID="Button1" runat="server" Text="Hello World" /> 2. プログラムを実行し、Button コントロールがタブページに表示されていることを確認します。 コードの場合 以下の手順を実行します。 1. 次のコードを Page_Load イベントに入力して、Button コントロールを作成してテキストを追加します。 Visual Basic コードの書き方 Visual Basic Dim nuButton As Button = New Button() 22 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms nuButton.Text = "Hello World!" C# コードの書き方 Title Text Button nuButton = new Button(); nuButton.Text = "Hello World!"; 2. Button コントロールをタブページに追加します。 Visual Basic コードの書き方 Visual Basic C1TabPage1.Controls.Add(nuButton) C# コードの書き方 Title Text C1TabPage1.Controls.Add(nuButton); 3. プログラムを実行し、Button コントロールがタブページに表示されていることを確認します。 C1Tabs のタブページへのテキストの追加 このトピックでは、デザイナと XHTML マークアップを使用して、テキストをC1Tabs コントロールに追加する方法を学びます。 デザインビューの場合 テキストをタブページに追加するには、カーソルをタブページの中に置き、そのタブページにテキストを入力(またはコピー)す るだけです。 テキストをタブページに追加したら、Visual Studio の書式設定ツールバー(このツールバーを表示するには、[表示 表示]→[ツー ツー ルバー ルバー]→[書式設定 書式設定]を選択)を使用して、テキストを書式設定できます。下の図は、書式設定済みテキストが表示され た C1TabPage を示しています。 23 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms ソースビューの場合 ソースビューでは、<cc1:C1TabPage> タグの間にテキストを置くことによって、C1TabPage にテキストを追加できます。テ キストを書式設定するには、XHTML マークアップを使用します。 ソースビューでテキストを C1TabPage に追加するには、以下の手順を実行します。 1. ソースビューに切り替え、次のテキストと XHTML タグを <cc1: C1TabPage> タグの間に貼り付けます。 ソースビュー ソースビューでは、<b>C1Tabs</b> コントロールにテキストを追加することもできます。 <span style="color: #0000ff; font-family: Courier New"><wijmo: C1TabPage> </span> タグの間にテキストを置き、HTML マークアップを使用してテキストを書式設定するだけです。 2. 「デザイン デザイン」タブをクリックしてデザインビューに切り替え、C1Tabs コントロールの C1TabPage にテキストが追加されて いることを確認します。結果は、次の図のようになります。 配置の変更 C1Tabs コントロールのデフォルトの向きは水平であり、コントロールの上部に配置されますが、その配置はAlignment プロ パティを設定することによって、容易に下部、左、または右に変更できます。以下の手順では、デザインビュー、ソースビュー、 およびコードを使用してタブストリップの配置を変更する方法を説明します。詳細については、「タブストリップの配置」を参照し てください。 デザインビューの場合 プロパティウィンドウで、C1Tabs コントロールが選択されていることを確認し、Alignment プロパティのドロップダウン矢印をク リックして、リストから Top、Right、Bottom、または Left を選択します。この例では、Left に設定します。 24 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms ソースビューの場合 ソースビューで、Alignment="Left" を<cc1:C1Tabs> タグに追加します。その結果、XHTML は次のようになります。 ソースビュー <cc1:C1Tabs ID="C1Tabs1" runat="server" Alignment="Left" > コードの場合 以下の手順を実行します。 1. 以下の名前空間をプロジェクトにインポートします。 Visual Basic コードの書き方 Visual Basic Imports C1.Web.Wijmo.Controls.C1Tabs C# コードの書き方 Title Text using C1.Web.Wijmo.Controls.C1Tabs; 2. 次のコードを Page_Load イベントに追加します。 Visual Basic コードの書き方 Visual Basic C1Tabs1.Alignment = Alignment.Left C# コードの書き方 Title Text C1Tabs1.Alignment = Alignment.Left; 3. プログラムを実行します。 このトピックの作業結果 次の図は、左向きのタブストリップを持つ C1Tabs コントロールを示しています。 25 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms 選択インデックスの変更 C1Tabs コントロール の Selected プロパティを使用すれば、プロジェクト実行時に選択されるタブを決定できます。次のトピッ クでは、デザインビュー、ソースビュー、およびコードで、このプロパティを設定する方法を示します。 デザインビューの場合 以下の手順を実行します。 1. C1Tabs のスマートタグ( )をクリックして、[C1Tabs タスク タスク]メニューを開き、[タブデザイナ タブデザイナ]を選択します。 C1Tabs デザイナフォーム デザイナフォームが表示されます。 2. 〈子項目の追加 子項目の追加〉ボタン を使用して、3つのページを C1Tabs に追加します。 3. ツリービューからC1Tabs を選択し、そのプロパティリストを表示します。 4. Selected プロパティを指定し、その値を1に設定します。 注意: 注意:SelectedIndex プロパティのデフォルト値が 0 であることを確認してください。この設定のままにした場 合、C1Tabs は最初のタブ C1TabPage1 が選択された状態でロードされます。 5. 〈OK〉を押してから、プロジェクトを実行します。実行時に2番目のタブページ C1TabPage2 が選択されることを確認し てください。 ソースビューの場合 Selected="1" を<cc1:C1Tabs> タグに追加します。結果の XHTML は次のようになります。 ソースビュー <cc1:C1Tabs ID="C1Tabs1" runat="server" SelectedIndex="1"> コードの場合 以下の手順を実行します。 1. 次のコードを Page_Load イベントに追加します。 Visual Basic コードの書き方 Visual Basic C1Tabs1.SelectedIndex = 1 C# コードの書き方 26 Copyright © GrapeCity inc. All rights reserved. Tabs for ASP.NET Web Forms Title Text C1Tabs1.SelectedIndex = 1; 2. [F5]を押して、プロジェクトを実行します。 27 Copyright © GrapeCity inc. All rights reserved.
© Copyright 2024