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 Ghost property to True. In this topic, you will learn how to set the Ghost property in Design view, in Source view, and in code.
For more information on the 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 ResizeBehaviorSettings class are revealed.
5. Set the 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:
Imports C1.Web.UI.Controls.C1Splitter
• C#
using C1.Web.UI.Controls.C1Splitter;
5. Set the Ghost property to True by placing the following code in the Page_Load event:
C1Splitter1.ResizeSettings.Ghost = True
• C#
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 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 Ghost property's settings, see Panel Previewing.
|
