Download Source Code: DockingPanel.zip - 9.94KB
Structure and Appearance
Our custom DockingPanel web control will provide the following functionality:
- Content area that can expand and collapse from top-down, but also from bottom-up, left to right and right to left.
- The title bar contains a clickable chevron icon that triggers the expand/collapse client-side events, implemented in JavaScript.
- The text on the title bar must appear on vertical orientation for left and right docking.
- Collapse and expand can occur with JavaScript implementation of animation.
- No server-side functionality required, once the control is created and rendered in the browser.
The panel will contain the following areas, internally implemented as DIV panels:
- The panel of the control itself, to isolate it from other surrounded HTML elements.
- A title bar, with the title text and the chevron icon.
- The collapsible content area, exposed as a <Content> property.
- A container for the collapsible area, that included the title bar and the content area.
- A fixed content area, exposed as a <FixedContent> property, to be filled with optional elements on the opposite side of the collapsing area.
Here is one of the most simple declarations of such control in ASPX pages, with the default property values and built-in styles:
<xpro:DockingPanel ID="myDockingPanel" Docking="Top"
Text="Title Bar" Width="100%" runat="server">
<Content>Content Area</Content>
<FixedContent>Fixed Content Area</FixedContent>
</xpro:DockingPanel>Which, at runtime, is rendered as below:
When you click the chevron icon and the panel collapses, the Content area disapears and the eventual FixedContent area (and all other panel that follow) will cover up.
Most similar controls do not provide a "fixed" content area, because HTML elements can be arranged in sequence one below the other. However, for left and right docking, the elements added to the fixed content area saves you from the trouble of dealing with float:right/left styles and the right dimensions. If you don't use it, just leave it empty or totaly exclude FixedContent property from control's declaration.
DockingPanel exposes a static AltStyles property. By default false, it will consider external alternate CSS classes for some internal elements when it is set. For a consistent design, it makes sense to eventually provide one single external theme for all dock panels of a page. In the demo project, just set this property at the beginning of the Default.aspx page and you'll see how your custom STYLE declarations from DockingPanel.css are applied. When set, DockingPanel will consider the following externally defined custom CSS classes:
- dock-control - for the main container.
- dock-titlebar - alternative background-color and border for the title bar.
- dock-content - optional background-color, border, alignment options for the Content area.
- dock-fixed-content - optional background-color, border, alignment options for the FixedContent area.
Here are all specific properties exposed by the control:
- Text - Title of the docking panel. Appears in the upper corner or the bottom edge (in vertical orientation, as dynamicaly generated image) of the title bar.
- Docking - Docking orientation, of enum DockingStyle { Top, Left, Bottom, Right } type.
- Collapsed - Set to initially hide the Content area. Remark the actual collapse/expand functionality is implemented in JavaScript, not in the ASP.NET control.
- Group - Optional name, to provide an "accordion" effect to multiple docking panels from the same page.
- Content - Markup of the collapsible area (exposed as placeholder).
- FixedContent - Optional markup of the fixed area (exposed as placeholder).
- Animation - By default true, reset if you want instantaneous collapse/expand.
- Interval - By default 30ms, it is considered as interval for each animation iteration.
- Step - By default 5 pixels, this is the additional value the collapsible edge is expanded with or reduced in each animation iteration.
Subscribe and Share: 
