Tabs for ASP.NET Web Forms

Size: px

Start display at page:

Download "Tabs for ASP.NET Web Forms"

れいなゆのもと
5 years ago
Views:

1 更新グレープシティ株式会社

2 目次製品の概要 2 ComponentOne for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: ページへの C1Tabs の追加 4 手順 2:C1Tabs デザイナフォームでの作業 4 手順 3: コントロールへのコンテンツの追加 4-5 デザイン時のサポート 6 C1Tabs スマートタグ 6 C1Tabs コンテキストメニュー 6-7 C1Tabs デザイナフォーム 7-10 C1Tabs の要素 11 テーマタブストリップの配置 C1Tabs の動作 15 キーボードアクセス 15 ツールチップ 15 選択インデックス 15 タスク別ヘルプ 16 テーマの利用 16 組み込みテーマの使用 C1Tabs コントロールへのタブページの追加コードによる C1Tabs コントロールの作成タブページのコンテンツの追加と操作 20 C1Tabs へのコントロールの追加 C1Tabs のタブページへのテキストの追加配置の変更選択インデックスの変更 Copyright GrapeCity Inc. All rights reserved.

3 製品の概要 Tabs for ASP.NET Web Forms を使用して Web コンテンツを簡単に整理および移動します各タブのコンテンツの全ページをホストします ComponentOne for ASP.NET Web Forms のヘルプ ComponentOne for ASP.NET Web Forms の各コントロールで共通したトピックアセンブリの追加テーマの適用クライアント側情報などについては ASP.NET Web Forms ユーザーガイドを参照してください 2 Copyright GrapeCity Inc. All rights reserved.

4 主な特長 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.

クイックスタートこのクイックスタートではナビゲーションコントロールを使用して単純なページ化された領域を Web サイト内に作成し C1Tabs コントロールの機能を紹介します手順 1: : ページへの C1Tabs の追加この手順ではまずページに C1Tabs コントロールを追加します開始するには以下の手順を実行します 1. 新しい ASP.

5 クイックスタートこのクイックスタートではナビゲーションコントロールを使用して単純なページ化された領域を 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.

6 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.

デザイン時のサポート以下の各セクションでは C1Tabs のデザイン時環境を使用して C1Tabs コントロールを設定する方法について説明します C1Tabs スマートタグ C1Tabs コントロールには Visual Studio のスマートタグ ( ) が含まれていますスマートタグは C1Tabsで最もよく使用されるプロパティを提供するショートカットのタスクメニューを表します

7 デザイン時のサポート以下の各セクションでは 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.

用できる追加機能があります C1Tabs コントロール上の任意の場所を右クリックし C1Tabs のコンテキストメニューを表示しますコンテキストメニューのコマンドは以下のように動作しますスマートタグの表示 [ スマートタグの表示 ] をクリックすると [C1Tabs タスク ] メニューが開きますデザイナを開く [ デザイナを開く ] をクリックすると C1Tabs

8 用できる追加機能があります 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.

9 C1Tabs デザイナフォームのメニュー C1Tabs デザイナフォームのメニューには次のメニュー項目とサブ項目が含まれていますメニュー項目サブメニュー項目説明ファイル終了 C1Tabs デザイナフォームを閉じます編集項目の挿入タブやセパレータのリスト内の指定された場所に C1TabPage を挿入します 8 Copyright GrapeCity Inc. All rights reserved.

10 子の追加切り取りコピー貼り付け削除名前の変更 C1Tabs デザイナフォームのツールバー下の表で各ボタンについて説明しますボタン名前説明選択された C1Tabs の子として C1TabPage を追加します項目リスト内で移動するために選択された C1TabPage を切り取ります選択された C1TabPage をコピーします項目リスト内の指定された場所に C1TabPage を貼り付けます選択された C1TabPage を削除します C1TabPage の名前を変更できます項目を上に移動アイテムを下に移動アイテムを左に移動アイテムを右に移動子項目の追加項目の挿入切り取りコピー貼り付け削除選択された C1TabPage をアイテムリストの上へ移動します選択された C1TabPage をアイテムリストの下へ移動しますメニュー階層内で選択された C1TabPage を左へ移動しますメニュー階層内で選択された C1TabPage を右へ移動します C1TabPage を C1Tabs コントロールの子として挿入します項目リスト内の指定された場所に C1TabPage を挿入します項目リスト内で移動するために選択された C1TabPage を切り取ります選択された C1TabPage をコピーします項目リスト内の指定された場所に C1TabPage を貼り付けます選択された C1TabPage を削除します編集タブ編集編集タブをクリックしプロパティの操作や調節を行うC1Tabs コントロールまたは目的の C1TabPage を選択しますプレビュータブ 9 Copyright GrapeCity Inc. All rights reserved.

11 C1Tabs デザイナフォームのプロパティペインは Visual Studio のプロパティウィンドウとほぼ同じですここでは単純に C1Tabs またはC1TabPage を選択し目的のプロパティを設定しますコマンドボタン次の表はコマンドボタンの一覧ですボタン OK キャンセル説明 OK をクリックすると新しい設定値が C1Tabs コントロールに適用されますキャンセルをクリックすると C1Tabs デザイナフォームが閉じて新しい設定値は破棄されデフォルト設定値が C1Tabs コントロールに適用されます 10 Copyright GrapeCity Inc. All rights reserved.

C1Tabs の要素 C1Tabs は実質的にはウィザードコントロールとタブストリップを組み合わせたものです C1Tabs は (C1TabPage クラスで表される ) 複数のページを 1 ページずつ表示するために使用されます C1Tabs のナビゲーションは統合されたタブストリップで処理されますタブストリップ C1Tabs のタブストリップは

12 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 にはコントロールの外観を簡単に変更できるテーマが容易されていますこのコントロールには 6 種類の組み込みテーマが含まれておりアプリケーションのコントロールをすばやくカスタマイズできます 11 Copyright GrapeCity Inc. All rights reserved.

Rocket Sterlin タブストリップの配置 C1Tabs のタブストリップ要素はコントロールの 4 つの領域上下左右のいずれかに表示できますタブストリップの位置は

16 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.

17 タスク別ヘルプタスク別ヘルプセクションでは 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.

Visual Basic Imports C1.Web.Wijmo.Controls C# コードの書き方 C# using C1.Web.Wijmo.Controls; 2. C1TargetControlBase.Theme プロパティを設定する次のコードを Page_Load イベントに追加します Visual Basic コードの書き方 Visual Basic C1Tabs1.

18 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 コントロールを示しています C1Tabs コントロールへのタブページの追加このトピックではデザインビューソースビューおよびコードで C1Tabs コントロールにタブページを追加する方法を説明しますデザインビューの場合以下の手順を実行します 1. スマートタグをクリックして [C1Tabs タスク ] メニューを開きますデザイナを開くを選択します [C1Tabs デザイナフォーム ] ダイアログボックスが開きます 2. 子項目の追加ボタンをクリックし C1TabPage を C1Tabs コントロールに追加しますツリービューに Tab1 と表示されます 3. OK をクリックして [C1Tabs デザイナフォーム ] ダイアログボックスを閉じます 17 Copyright GrapeCity Inc. All rights reserved.

19 ソースビューの場合ソースビュー <cc1:c1tabpage ID="Tab1" runat="server" Text=" タブ 1"> </cc1:c1tabpage> コードの場合以下の手順を実行します 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 18 Copyright GrapeCity Inc. All rights reserved.

20 Imports C1.Web.Wijmo.Controls.C1Tabs C# コードの書き方 C# using C1.Web.Wijmo.Controls.C1Tabs; 4. C1Tabs オブジェクトを作成しその Width プロパティと Height プロパティを設定してから Page_Load イベントに次のコードを配置することによってそのオブジェクトをプロジェクトに追加します 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 C1TabPage() Dim C1TabPage2 As C1TabPage = New C1TabPage() Dim C1TabPage3 As C1TabPage = New C1TabPage() '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) C# コードの書き方 C# // 3 つの C1TabPage オブジェクトを作成 C1TabPage C1TabPage1 = new C1TabPage(); C1TabPage C1TabPage2 = new C1TabPage(); C1TabPage C1TabPage3 = new C1TabPage(); // TabPage の Text プロパティを設定 19 Copyright GrapeCity Inc. All rights reserved.

21 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. プログラムを実行しますこのトピックの作業結果プロジェクトが実行されると 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 コントロールがタブページに表示されていることを確認しますコードの場合 20 Copyright GrapeCity Inc. All rights reserved.

以下の手順を実行します 1. 次のコードを Page_Load イベントに入力して Button コントロールを作成してテキストを追加します Visual Basic コードの書き方 Visual Basic Dim nubutton As Button = New Button() nubutton.text = "Hello World!

22 以下の手順を実行します 1. 次のコードを Page_Load イベントに入力して Button コントロールを作成してテキストを追加します Visual Basic コードの書き方 Visual Basic Dim nubutton As Button = New Button() 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 の書式設定ツールバー ( このツールバーを表示するには [ 表示 ] [ ツー 21 Copyright GrapeCity Inc. All rights reserved.

ルバー ] [ 書式設定 ] を選択 ) を使用してテキストを書式設定できます下の図は書式設定済みテキストが表示された C1TabPage を示していますソースビューの場合ソースビューでは <cc1:c1tabpage> タグの間にテキストを置くことによって C1TabPage にテキストを追加できますテキストを書式設定するには XHTML マークアップを使用します

ソースビューに切り替え次のテキストと XHTML タグを <cc1: C1TabPage> タグの間に貼り付けますソースビューソースビューでは <b>c1tabs</b> コントロールにテキストを追加することもできます <span style="color: #0000ff; font-family: Courier New"><wijmo: C1TabPage> </span>

23 ルバー ] [ 書式設定 ] を選択 ) を使用してテキストを書式設定できます下の図は書式設定済みテキストが表示された C1TabPage を示していますソースビューの場合ソースビューでは <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 プロパティのドロップダウン矢印をク 22 Copyright GrapeCity Inc. All rights reserved.

リックしてリストから Top Right Bottom または Left を選択しますこの例では Left に設定しますソースビューの場合ソースビューで Alignment="Left" を <cc1:c1tabs> タグに追加しますその結果 XHTML は次のようになりますソースビュー <cc1:c1tabs ID="C1Tabs1" runat="server"

24 リックしてリストから Top Right Bottom または Left を選択しますこの例では Left に設定しますソースビューの場合ソースビューで 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. プログラムを実行しますこのトピックの作業結果 23 Copyright GrapeCity Inc. All rights reserved.

25 次の図は左向きのタブストリップを持つ C1Tabs コントロールを示しています選択インデックスの変更 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 24 Copyright GrapeCity Inc. All rights reserved.

Wizard for ASP.NET Web Forms

Wizard for ASP.NET Web Forms 2018.04.17 更新グレープシティ株式会社目次製品の概要 3 ComponentOne for ASP.NET Web Forms のヘルプ 3 主な特長 4 クイックスタート 5 手順 1: ページへのコントロールの追加 5 手順 2:C1Wizard デザイナフォームでの作業 5-6 手順 3: コントロールへのコンテンツの追加 6-8 デザイン時のサポート 9 スマートタグ 9-10