Step 1 of 3: Adding WijSplitter Controls to the Project

In This Topic

In this topic you will associate two WijSplitter controls with two Panel controls.

Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.

Add a standard Panel control to the main content of your page and within the <div> tags of the first panel, add a second panel. Set the Width and Height for both panels. The markup should look similar to this:

<asp:PanelID="Panel1"runat="server"Width="300"Height="300px">

        <div>Panel1</div>

        <div>

            <asp:PanelID="Panel2"runat="server"Width="200"Height="200px">

                <div>Panel2</div>

            </asp:Panel>

        </div>

</asp:Panel>

While still in Source view, use the following markup to add a WijSplitter control to the page and set the TargetControlID to Panel1.
```
<cc1:WijSplitter ID="Panel1_WijSplitter" runat="server"
```
```
        TargetControlID="Panel1">
```
```
</cc1:WijSplitter>
```
Use the following markup toadd a second WijSplitter control to the page and set the TargetControlID to Panel2.
```
<cc1:WijSplitter ID="Panel2_WijSplitter" runat="server"
```
```
        TargetControlID="Panel2">
```
```
</cc1:WijSplitter>
```
Now you can begin setting properties for the WijSplitters.