To create a collapsed panel, use the SplitterPanel.Collapsed property. In this topic, you will learn how to set the SplitterPanel.Collapsed property in Design view, in Source view, and in code. You can collapse either panel, but this topic will illustrate this setting using Panel1.

For more information on collapsed and expanded panels, see Collapsible and Expandable Panels.

In Design View

Complete the following steps:

1. Add C1Splitter to the Web form.
2. Right-click on the control and select Properties. In the Properties window, expand the Panel1 node and locate the SplitterPanel.Collapsed property.
3. Set the SplitterPanel.Collapsed property to True.
   

In Source View

To make Panel1 a collapsed panel, place <Panel1 Collapsed="True"></Panel1> between the <cc1:C1Splitter> and </cc1:C1Splitter> tags. The final markup will resemble the following:

<cc1:C1Splitter ID="C1Splitter1" runat="server">
<Panel1 Collapsed=True>
</Panel1>
</cc1:C1Splitter>

In Code

Complete the following steps:

1. 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;

2. Add the following code, which sets the SplitterPanel.Collapsed property, to the Page_Load event:

   To write the code in Visual Basic:

     

   Visual Basic	Copy Code
   C1Splitter1.Panel1.Collapsed = True

   To write the code in C#:

     

   C#	Copy Code
   C1Splitter1.Panel1.Collapsed = true;

3. Run the program.

This topic illustrates the following:

Panel1 is collapsed.

To expand the panel, simply click the expand button.