Typps Slide pane

The slide pane is a very simple templated control that allows you to make regions within your page collapsible and fits in nicely with the flow of your pages, reclaiming empty space during an expansion and vice versa. By default there are 3 themes supported and in addition you can customize all areas yourself with minimum effort modifying the developer friendly css to your liking.

The above pane is collapsible. Collapsing panes gives you more screen estate. What you see above is the SlidePane Control in it's default mode, where the toggle button is displayed horizontally.

You simply specify what you want in the collapsible template ( serverside) and it just works.

ASP.NET

<t:SlidePane ID="slidepane1" Skin="Classic" runat="server">
            <PaneTemplate>
		<h1>The content you want in the pane..</h1>
            </PaneTemplate>
        </t:SlidePane>

The toggle button vertical and position it to the far right edge or left edge. This is accomplished by setting ToggleButtonOrientation="Vertical".We can also state that by default the pane should be collapsed by setting Expanded="false".

ASP.NET

<t:SlidePane ID="slidepane2" Expanded="false" 
ToggleButtonOrientation="Vertical" Skin="Classic" runat="server">
            <PaneTemplate>
		<h1>The content you want in the pane..</h1>
            </PaneTemplate>
        </t:SlidePane>

Definition list: Etiam commodo iaculis tincidunt. Etiam dignissim quam id diam posuere mollis. Praesent vulputate tortor arcu. Cras sed leo enim, vitae venenatis felis.
Lorem ipsum dolor sit amet: Vestibulum quis nulla id odio faucibus feugiat a non nibh. Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

We can further position the toggle button to the far right by setting ToggleButtonFloat="Right" ; Note how unused space is reclaimed as the control slides in and out of view.

ASP.NET

<t:SlidePane ID="slidepane3" ToggleButtonFloat="Right" 
	ToggleButtonOrientation="Vertical" 
                Skin="Classic" runat="server">
            <PaneTemplate>
		<h1>The content you want in the pane..</h1>
            </PaneTemplate>
        </t:SlidePane>

You can very well disable the special effects. And easily float it to the left as the current pane positioned to the left. These are all merrily simple settings. As for appearance you work with a basic css file containing some very simple css class definitions to customize the toggle button and the pane in general.

ASP.NET

<t:SlidePane ID="slidepane4" EnableEffects="false" Float="Left" 
	ToggleButtonOrientation="Vertical" Skin="Classic"
                runat="server">
     <PaneTemplate>
	<div>Content you want displayed in the slide pane..</div>
     </PaneTemplate>
</t:SlidePane>