By default, users will only see a dotted line indicating the placement of the splitter bar when they attempt to resize panes. You can, however, set up C1Splitter so that a preview of the pane is shown as the user slides the splitter bar. To achieve this effect, you set the ResizeSettings.Ghost property to True. In this topic, you will learn how to set the ResizeSettings.Ghost property in Design view, in Source view, and in code.

For more information on the ResizeSettings.Ghost property, see Panel Previewing.

In Design View

Complete the following steps:

1. Add a C1Splitter control to your Web project.
2. Add text to Panel1 and Panel2 of the C1Splitter control.
3. Right-click the C1Splitter control to open its context menu, then select Properties. The Properties window appears with C1Splitter''s property list in focus.
4. Expand the ResizeSettings node. The properties of the ResizeSettings class are revealed.
5. Set the ResizeSettings.Ghost property to True.
6. Run the program and resize Panel1 by moving the splitter bar to the right. As you move the splitter bar, observe that the text in Panel1 expands to fit the area that you are sizing and overlaps the text of the second panel.
   

In Source View

Complete the following steps:

1. Add a C1Splitter control to your Web project.
2. Add text to Panel1 and Panel2 of the C1Splitter control.
3. Click the Source button to enter Source view.
4. In Source view, place <ResizeSettings Ghost="True" /> between the <cc1:C1Splitter> and </cc1:C1Splitter> tags so that the markup appears similar to the following:

   <cc1:C1Splitter ID="C1Splitter1" runat="server" Height="150px" Width="250px">
      <ResizeSettings Ghost="True" />
   </cc1:C1Splitter>
   

5. Run the program and resize Panel1 by moving the splitter bar to the right. As you move the splitter bar, observe that the text in Panel1 expands to fit the area that you are sizing and overlaps the text of the second panel.

In Code

Complete the following steps:

1. Add a C1Splitter control to your Web project.
2. Add text to Panel1 and Panel2 of the C1Splitter control.
3. Double-click the Web page to enter Code view. Observe that a Page_Load event has been added to the page.
4. Import the following namespace into your project:
   

   To write the code in Visual Basic:

     

   Visual Basic	Copy Code
   Imports C1.Web.Wijmo.Controls.C1Splitter

   To write the code in C#:

     

   C#	Copy Code
   using C1.Web.Wijmo.Controls.C1Splitter;

    

5. Set the ResizeSettings.Ghost property to True by placing the following code in the Page_Load event:

   To write the code in Visual Basic:

     

   Visual Basic	Copy Code
   C1Splitter1.ResizeSettings.Ghost = True

   To write the code in C#:

    

   C#	Copy Code
   C1Splitter1.ResizeSettings.Ghost = true;

6. Run the program resize Panel1 by moving the splitter bar to the right. As you move the splitter bar, observe that the text in Panel1 expands to fit the area that you are sizing and overlaps the text of the second panel.         

This Topic Illustrates the Following:

The images below, Figure 1 and Figure 2, illustrate the final result of this topic. Figure 1 shows the translucent preview that is created when the ResizeSettings.Ghost property is set to True; Figure 2 depicts what the control looks like after the splitter bar is released and Panel1 is resized. Note that the text in Figure 2 adopts the form that was revealed in the preview. 

For a visual comparison of the ResizeSettings.Ghost property's settings, see Panel Previewing.