デフォルトでは、ペインのサイズ変更を試みた場合、ユーザーにはスプリッタバーの配置を示す点線しか表示されません。しかし、ユーザーがスプリッタバーを動かしたときにペインのプレビューが表示されるように、C1Splitter を設定できます。この効果を実現するには、Ghost プロパティを True に設定します。このトピックでは、デザインビュー、ソースビュー、およびコードでGhost プロパティを設定する方法について学びます。

Ghost プロパティの詳細については、「パネルのプレビュー」を参照してください。

デザインビューの場合

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

1. C1Splitter コントロールをWeb プロジェクトに追加します。
2. C1Splitter コントロールの Panel1 と Panel2 にテキストを追加します。
3. C1Splitter コントロールを右クリックしてそのコンテキストメニューを開き、［プロパティ］を選択します。

   C1Splitter のプロパティリストがフォーカスされたプロパティウィンドウが表示されます。

4. ResizeSettings ノードを拡張します。ResizeSettings クラスのプロパティが表示されます。
5. Ghost プロパティを True に設定します。
6. プロジェクトをビルドし、スプリッタバーを右へ動かすことによって Panel1 をサイズ変更します。スプリッタバーを動かしていくと、サイズ変更される領域に見合うように Panel1内のテキストが拡張され、２つめのパネルのテキストに重なることを確認してください。.
   

ソースビューの場合

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

1. C1Splitter コントロールをWeb プロジェクトに追加します。
2. C1Splitter コントロールの Panel1 と Panel2 にテキストを追加します。
3. ソースボタンをクリックしてソースビューに切り替えます。

4. ソースビューで、<cc1:C1Splitter> タグと </cc1:C1Splitter> タグの間に <ResizeSettings Ghost="True" /> を置きます。

   ソースビュー	コードのコピー
   <cc1:C1Splitter ID="C1Splitter1" runat="server" Height="150px" Width="250px">    <ResizeSettings Ghost="True" /> </cc1:C1Splitter>

5. プロジェクトをビルドし、スプリッタバーを右へ動かすことによって Panel1 をサイズ変更します。スプリッタバーを動かしていくと、サイズ変更される領域に見合うように Panel1内のテキストが拡張され、２つめのパネルのテキストに重なることを確認してください。

コードの場合

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

1. C1Splitter コントロールをWeb プロジェクトに追加します。
2. C1Splitter コントロールの Panel1 と Panel2 にテキストを追加します。
3. Web ページをダブルクリックしてコードビューに切り替えます。Page_Load イベントはページに追加されたことを確認します 。
4. 以下の名前空間をプロジェクトにインポートします。
   

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   Imports C1.Web.Wijmo.Controls.C1Splitter

   C#コードの書き方

   C#	コードのコピー
   using C1.Web.Wijmo.Controls.C1Splitter;

5. 次のコードを Page_Load イベントに置くことによって、Ghost プロパティを True に設定します。

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   C1Splitter1.ResizeSettings.Ghost = True

   C#コードの書き方

   C#	コードのコピー
   C1Splitter1.ResizeSettings.Ghost = true;

6. プロジェクトをビルドし、スプリッタバーを右へ動かすことによって Panel1 をサイズ変更します。スプリッタバーを動かしていくと、サイズ変更される領域に見合うように Panel1内のテキストが拡張され、２つめのパネルのテキストに重なることを確認してください。         

このトピックの作業結果

下の図１と図２は、このトピックの最終結果を示しています。図１は、Ghost プロパティを True に設定したときに生成される半透明のプレビューを示しています。図２は、スプリッタバーが解放され、Panel1 がサイズ変更されたあとのコントロールの表示を示しています。図２のテキストがプレビューで表示された形式になっていることに注意してください。 

Ghost プロパティの設定値を比較した図については、「 パネルのプレビュー」を参照してください。