バージョン

ペイン内に分割バーをネスト

始める前に

WebSplitter™ ペインをネストしたユーザー インタフェースを作成するために、コンテンツ テンプレートのいずれかの中に WebSplitter がもうひとつある親の WebSplitter を作成する必要があります。

以下の手順の前提は以下のとおりです。

  • ブランクの WebForm で新しい ASP.NET AJAX 対応の Web サイトをすでに作成している。

  • WebForm 上に ASP.NET AJAX ScriptManager インスタンスがある。

  • このアプリケーションで Infragistics Application Styling を有効にしており、Default Style を使用している。

達成すること

読み終わると、ネストされた WebSplitter ペインを実行サンプルで作成することが可能となります。

次の手順を実行します。

  1. Visual Studio Toolbox で、WebSplitter コントロールを指定してダブルクリックします。これは WebForm にインスタンスを配置します。

  2. WebSplitter コントロールをクリックして、[プロパティ] ウィンドウで Height プロパティを指定して 600px に設定します。

  3. Width のプロパティを指定して 800px に設定します。

  4. Panes プロパティを指定して、次に省略記号（…​）ボタンをクリックして、SplitterPane コレクション エディタを開きます。

  5. 2 つの個別の SplitterPanes を追加するには [追加] ボタンを 2 回クリックします。

  6. 最初の SplitterPane をクリックし、[プロパティ] ウィンドウで ContentUrl プロパティを指定し、その値を http://jp.infragistics.com に設定します。

  7. [OK] ボタンをクリックして SplitterPane コレクション エディタを閉じます。

  8. 次に一本の線を HTML Markup に追加します。Default.aspx で、[ソース] ボタンをクリックして、マークアップ ビューを表示します。

  9. WebSplitter 要素を指定して Panes 要素を指定します。これは、作成した 2 つの SplitterPanes を含みます。

  10. 2 番目の SplitterPane の間に、 Template 要素を挿入します。コードは以下のように表示されるはずです。

HTML の場合:

<igweb:WebSplitter ID="WebSplitter1" runat="server"
  Height="600px" Width="800px">
	<Panes>
		<igweb:SplitterPane runat="server" ContentUrl="http://jp.infragistics.com">
		</igweb:SplitterPane>
		<igweb:SplitterPane runat="server">
			<Template/>
		</igweb:SplitterPane>
	</Panes>
</igweb:WebSplitter>

  1. [デザイン] ボタンをクリックしてデザイン モードに戻ります。

  2. 一番下の SplitterPane をクリックして、入力フォーカスをここに置きます。

  3. Visual Studio Toolbox に戻り、2 番目の SplitterPane のコンテンツ テンプレートに WebSplitter コントロールをもうひとつ追加するには WebSplitter をクリックします。

  4. 次に一番下にある SplitterPaneにある新しい WebSplitter コントロールをクリックして、[プロパティ] ウィンドウで、Height プロパティと Width プロパティ内に含まれている値を削除します。これによって、SplitterPanes はその中に含まれているコンテンツのサイズにしたがって SplitterPanes 自体をリサイズします。

  5. Orientation プロパティを指定して Vertical に設定します。

  6. 二番目の WebSplitter の Panes コレクションを指定して、省略記号ボタン（…​）をクリックして SplitterPane コレクション エディタを起動します。

  7. 2 つの SplitterPane を追加するには [追加] ボタンを 2 回クリックします。

  8. 最初の SplitterPane をクリックして、[プロパティ] ウィンドウで、ContentUrl プロパティを http://www.microsoft.com に設定します。

  9. 2 番目の SplitterPane をクリックして、[プロパティ] ウィンドウで、ContentUrl プロパティを http://www.google.com に設定します。

  10. [OK] ボタンをクリックして SplitterPane コレクション エディタを閉じます。

  11. アプリケーションを保存して実行します。アプリケーションは以下の画像のようになるはずです。

WebSplitter Nested Splitter Panes 01.png

一番上の SplitterPane は Infragistics™ Web サイトにリンクされ、一番下の SplitterPane にはもうひとつの WebSplitter コントロールが含まれています。ネストされた WebSplitter 内の 2 つの SplitterPanes にも 2 つの SplitterPanes が含まれています。ひとつは Microsoft™ の Web サイトにリンクされ、もうひとつは Google™ の Web サイトにリンクされます。親の WebSplitter の Orientation が直接の子の WebSplitter と同じでないようにネストされた WebSplitter の方向を変えるのが賢明です。子の WebSplitter コントロールの方向を変更したくない場合には、必要でない場合に余分のコントロールを持つというオーバーヘッドを負わないように子の WebSplitter の追加もスキップして、より多くの SplitterPane を追加することができます。