単純なドラッグ＆ドロップ操作や HTML を使用して、 C1Splitter コントロールの各パネルに任意のコントロールを追加できます。このトピックでは、Button コントロールを Panel1 に、TextBox コントロールを Panel2 に追加します。

デザインビューの場合

以下の手順を実行します。

1. C1Splitter コントロールを Web プロジェクト追加します。
2. Visual Studio ツールボックスから Button コントロールを選択し、それを Panel1 にドラッグします。        

   

3. Visual Studio ツールボックスから TextBox コントロールを選択し、それを Panel2 にドラッグします。 

   

ソースビューの場合

以下の手順を実行します。

1. C1Splitter コントロールをWeb プロジェクト追加します。
2. 「ソース」タブをクリックしてソースビューに入りますします。

3. <Panel1> タグを確認し、それらの間に次のタグを置きます。

   ソースビュー	コードのコピー
   <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate>

4. <Panel2> タグを確認し、それらの間に次のタグを置きます。

   ソースビュー	コードのコピー
   <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ContentTemplate>

コードの場合

以下の手順を実行します。

1. C1Splitter コントロールを Web プロジェクト追加します。
2. Visual Studio ツールボックスから PlaceHolder コントロールを選択し、それを Panel1 にドラッグします。
   PlaceHolder1 が Panel1 に表示されます。
3. Visual Studio ツールボックスから PlaceHolder コントロールを選択し、それを Panel2にドラッグします。
   PlaceHolder2が Panel2 に表示されます。
4. ソリューションエクスプローラウィンドウで、プロジェクトを右クリックし、［コードの表示］を選択してコードエディタに入ります。
   Button コントロールを作成し、次のコードを Page_Load イベントに入力することによって、そのコントロールにテキストを追加します。

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   Dim nuButton As Button = New Button() nuButton.Text = "Hello World!"

   C#コードの書き方

   C#	コードのコピー
   Button nuButton = new Button(); nuButton.Text = "Hello World!";

5. 次のように TextBox コントロールを作成します。
   

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   Dim nuTextBox As TextBox = New TextBox()

   C#コードの書き方

   C#	コードのコピー
   TextBox nuTextBox = new TextBox();

6. 次のように Button コントロールを PlaceHolder1 に追加します。 

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   PlaceHolder1.Controls.Add(nuButton)

   C#コードの書き方

   C#	コードのコピー
   PlaceHolder1.Controls.Add(nuButton);

7. 次のようにTextBox コントロールを PlaceHolder2 に追加します。

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   PlaceHolder2.Controls.Add(nuTextBox)

   C#コードの書き方

   C#	コードのコピー
   PlaceHolder2.Controls.Add(nuTextBox);

8. プログラムを実行します.
   

このトピックの作業結果

次の図は、 C1Splitterコントロールで Panel1 に Button コントロール、Panel2 に TextBox コントロールを配置した場合を示しています。