Setting the Location of the Splitter
In This Topic
The C1SplitterExtender control allows you to specify the location of the splitter, in pixels, from the left or top edge of the SplitContainer. Simply set the SplitterDistance property to take advantage of this feature.
- Create an ASP.NET Web application.
- Add a standard Panel control to the main content of your page.
- Add a second Panel control within the first panel, Panel1.
- Add markup within each panel so the final markup looks like this:
<asp:Panel runat="server" ID="Panel1">
<h3>SplitterDistance = 200</h3>
<div id="splitter1">
<div>panel1</div>
<div>panel2</div>
</div>
</asp:Panel>
<div class="layout" style="width: 100px;">
</div>
<asp:Panel ID="Panel2" runat="server">
<h3>SplitterDistance = 100</h3>
<div id="splitter2">
<div>
panel1
</div>
<div>
panel2</div>
</div>
</asp:Panel>
-
Click the Panel1 smart tag and select Add Extender from the Tasks menu.
-
In the Extender Wizard, select C1SplitterExtender and click OK. A C1SplitterExtender control is added to the page and the TargetControlID is set to Panel1.
-
Click the Panel2 smart tag and select Add Extender from the Tasks menu.
-
In the Extender Wizard, select C1SplitterExtender and click OK. A C1SplitterExtender control is added to the page and the TargetControlID is set to Panel2.
-
Select View | Properties Window in the Visual Studio menu.
-
Click the drop-down list at the top of the Properties window and select Panel1_C1SplitterExtender.
-
Set the C1SplitterExtender.SplitterDistance property to 200.
-
Click the drop-down list at the top of the Properties window and select Panel2_C1SplitterExtender.
-
Set the C1SplitterExtender.Orientation property to Horizontal.
-
Press F5 to run the application. The splitters will look similar to this:
