Download Source Code: DockingPanel.zip - 9.94KB
 |  |  |
| Implements an Animated Collapsible ASP.NET Web Docking Panel, that can dock to any edge of its container: top, bottom, left or right. Shows vertical text for left or right title bar orientation. Collapsing and expanding the docking area can be done with animation. Set the same group name for several panels for an acordion effect: when one panel expands, all other panels with the same group name collapse. It is created by the server as a custom ASP.NET web control but once exposed to the client it has no server-side events or AJAX functionality; collapsing and expanding are performed by JavaScript functions on the client. | ||
 | |  |
Demo
One of my clients asked for a RIA (Rich Internet Application) using dockable panels similar to those from standalone Windows applications, such as Visual Studio. However, most collapsible web panels implemented as ASP.NET controls expand only from the top down and have limited docking functionality. I also provided not long ago a step-by-step implementation of an Animated Collapsible Panel in HTML, with similar functionality.
Here is a possible layout you can get using our own DockingPanel controls. This demo has been fully provided as well in the downloadable project. Remark that everything is functional online, has been tested and works in both Internet Explorer and Firefox. You may expand and collapse panels to change the look:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Some remarks on this kind of UI layout:
- By hiding within initially collapsed areas parts of the screen, you give the user a wider area for its working portion of the screen.
- Same commands can appear in different areas and it makes no sense to have them all expanded. This demo may have similar commands in the top menu bar and in the Navigation bar, but ant of them can be collapsed to get more space for the working area, in the middle.
- In this demo, the three top-down panels from the Navigation bar allow only one expanded in the same time, the others will automatically collapse, in what is called and "accordion" effect. The same way, the Search panel will automatically collapse if the Info panel is expanded. Internally, we used grouping, to group together several panels by the same group name.
- Aligning a panel at the bottom edge of its container it's something tricky and hard to properly implement in HTML. For the Info panel, we used an absolute positioning at "bottom:0;left:0;" within its container, but the expansion will occur over the area it has above. This is however an interesting and usefull design.
The demo project you can download and open as a web site contains the following resources:
- DockingPanel.cs - with actual implementation of the docking panel, as a ASP.NET custom control.
- DockingPanel.js - with client-side functionality for a docking panel. Must be manually included in the HEAD section in each ASPX page using DockingPanel controls.
- DockingPanel.css - alternate styles for all DockingPanel controls. Must be manually included in the HEAD section in each ASPX page using DockingPanel controls. Can be customized and are considered only when DockingPanel.AltStyles static property is set.
- to-top.png, to-bottom.png, to-left.png, to-right.png - transparent images for the chevrons, in images/ folder. Must be manually copied in the images web folder of the web site.
- DynamicImage.aspx - returns vertical text as binary image.
- Default.aspx - demo page, which renders the same screen as here.
Subscribe and Share: 
