Enrich Your Panels Further

ControlFreak

LANGUAGES: VB.NET

ASP.NET VERSIONS: 2.x

 

Enrich Your Panels Further

More Enhancements for the ASP.NET Panel Control

 

By Steve C. Orr

 

In the March issue of asp.netPRO we examined several extenders in the AJAX Control Toolkit that are useful for enhancing the standard ASP.NET Panel control (see Enrich Your Panels). Our exploration of the AJAX Control Toolkit continues as we examine several more extenders that can bring new life to the boring old ASP.NET Panel control; we continue the journey by examining the AlwaysVisibleControl and ResizableControl extenders and the Accordion control.

 

Because the source code for these controls is freely available, they are also a great way to learn how to develop your own custom controls with the AJAX Control Toolkit. For more information about installing and configuring the ASP.NET AJAX Control Toolkit, see Daniel N. Egan s article, Working with the ASP.NET AJAX Control Toolkit, in the January 2007 issue of asp.netPRO. For toolkit download details, code samples, and documentation, go to http://ajax.asp.net/ajaxtoolkit/.

 

AlwaysVisibleControl

Have you ever wanted to dock a panel (or some other control) in the corner of a window and make it hover there even when the underlying page content gets scrolled? Using the AlwaysVisibleControl extender you can fulfill this desire and ensure a particular panel is always visible on the page no matter which way it gets scrolled (see Figure 1).

 

Figure 1: Thanks to the AlwaysVisibleControl extender, this panel stays visible at all times at the top-right corner of the window, even when the page is scrolled.

 

AlwaysVisibleControl can extend virtually any existing control with the ability to dock in any corner (or even in the middle) of a Web page. This is great for implementing various kinds of menus or control panels to which users should always have easy access.

 

As with every extender control in the AJAX Toolkit, the TargetControlID property is used to specify which control is to be extended. In the case of AlwaysVisibleControl, the target control will be enhanced with the ability to anchor into a particular position in the browser window. Once the TargetControlID property has been set, the AlwaysVisibleControl properties can be set directly on the target control via the Visual Studio Properties window, as shown in Figure 2.

 

Figure 2: Visual Studio permits a control extender s properties to be set directly on the target control as if they were properties of the target control itself.

 

There are four properties that are used to specify the precise location of the target control (see Figure 3). The HorizontalSide property is used to specify whether the target control should be docked at the left, center, or right side of the window. Similarly, the VerticalSide property is used to specify whether the target control should be docked at the top, middle, or bottom of the page. To get even more precise placement, margins can be specified (in pixels) using the HorizontalOffset and VerticalOffset properties. The documentation recommends the target control be absolutely positioned to avoid any unsightly flashing during scrolling.

 

AlwaysVisibleControl Property	Default Value	Description
HorizontalSide	Left	Specifies to which horizontal side the target control should be docked. Possible values are Left, Center, and Right.
VerticalSide	Top	Specifies to which vertical side the target control should be docked. Possible values are Top, Middle, and Bottom.
HorizontalOffset	0	Specifies how far (in pixels) from the specified horizontal edge of the page that the target control should appear. Some might think of this as the horizontal margin.
VerticalOffset	0	Specifies how far (in pixels) from the specified vertical edge of the page that the target control should appear. Some might think of this as the vertical margin.
ScrollEffectDuration	0.1	Specifies how long (in seconds) the scroll effect should last when relocating the target control.

Figure 3: The AlwaysVisibleControl extender has five unique properties, four of which are used for precisely positioning the target control.

 

Of course, any or all of these properties can be configured at design time in the ASPX page with a declaration such as this:

 

   ID="avce1"

   runat="server"

   TargetControlID="Panel1"

   VerticalSide="Top"

   VerticalOffset="15"

   HorizontalSide="Right"

   HorizontalOffset="15"

   ScrollEffectDuration=".1"

/>

 

The AlwaysVisibleControl extender is the cleanest and simplest way to dock a control to a specific corner of the window and have it remain there, even when the underlying page content is scrolled or resized.

 

ResizableControl

The ResizableControl extender allows a panel (or virtually any other control) to be resized by the user at run time (see Figure 4). A familiar drag handle metaphor is used, appearing at the bottom-right corner of the target control. As is common in windowed applications, when the user clicks on the drag handle and drags the mouse, the target control resizes. Not only that, but the content inside the target control can be resized to fit neatly inside the newly sized container. That is, images can shrink or grow on demand, and text size can be increased or decreased as needed.

 

Figure 4: The ResizableControl extender allows panels (and other ASP.NET controls) to be resized by the user at run time.

 

Maximum and minimum sizes can be specified, and the appearance of the drag handle can be customized via CSS (see Figure 5). Sizing information is automatically maintained between postbacks, and this sizing data can be programmatically accessed via client-side or server-side code. Further customization is enabled by means of the OnClientResizing and OnClientResize events.

 

ResizableControl Members	Member Type	Description
HandleCssClass	Property (string)	Specifies which CSS class should be applied to the drag handle.
ResizableCssClass	Property (string)	Specifies which CSS class should be applied to the target control during resizing.
MinimumWidth	Property (integer)	Specifies how small the target element should be allowed to get horizontally.
MinimumHeight	Property (integer)	Specifies how small the target element should be allowed to get vertically.
MaximumWidth	Property (integer)	Specifies how large the target element should be allowed to get horizontally.
MaximumHeight	Property (integer)	Specifies how large the target element should be allowed to get vertically.
HandleOffsetX	Property (integer)	Specifies the offset location of the drag handle.
HandleOffsetY	Property (integer)	Specifies the offset location of the drag handle.
OnClientResizing	Event	This client-side event is fired as the target element is resizing.
OnClientResize	Event	This client-side event is fired after the target element has been resized.

Figure 5: The ResizableControl extender has several unique members that allow a good deal of customization.

 

Maximum and minimum sizes can be specified via the MinimumHeight, MaximumHeight, MinimumWidth, and MaximumWidth properties. Using these properties it also is possible to specify that the target control should only be allowed to be resized horizontally and not vertically (or vice versa). For example, setting both the MinimumHeight and MaximumHeight properties to the same positive integer value will prevent vertical resizing.

 

The client-side OnClientResizing event is useful for modifying the appearance or behavior of the target content as it is being resized. Similarly, the OnClientResize event is useful for ensuring the content looks good once the resize operation is complete.

 

The appearance of the drag handle can be modified via CSS (using the HandleCssClass property) and via the HandleOffsetX and HandleOffsetY properties. Of course, all these properties can be set at design time with an ASPX declaration such as that shown in Figure 6.

 

   ID="rce1"

   runat="server"

   TargetControlID="Panel1"

   HandleCssClass="HandleCss"

   ResizableCssClass="PanelCss"

   MinimumWidth="25"

   MinimumHeight="25"

   MaximumWidth="500"

   MaximumHeight="500"

   OnClientResize="MyClientSideResizedFunction"

   OnClientResizing="MyClientSideResizingFunction"

   HandleOffsetX="1"

   HandleOffsetY="1"

/>

Figure 6: Set properties at design time with an ASPX declaration.

 

The robust ResizableControl extender makes it easy to allow users to resize a panel (or similar control) dynamically at run time.

 

Accordion

The Accordion control is effectively a set of stacked collapsible panel controls. (You may remember the collapsible panel control from last month s column.) Only one panel in the accordion is expanded at a time; all others remain collapsed down to their headers. When the user clicks on the header of one of the accordion panes, that pane expands and the previously expanded pane collapses with an attractive, configurable animation.

 

The Accordion control is great for containing navigational menus and various kinds of control panels. It has an instantly familiar user interface that most users should find easy to grasp. Figure 7 shows the Accordion control in action. It s highly configurable via CSS and the set of unique properties listed in Figure 8.

 

Figure 7: The Accordion control presents a familiar user interface.

 

Accordion Property	Description
AutoSize	Used to specify in which ways (if any) the accordion should be allowed to grow or shrink when switching between panes.
DataSource	Used to specify an optional data source for data binding.
DataSourceID	The ID of the data source to use when data binding.
DataMember	Specifies the field to which the control should be bound when data binding.
SelectedIndex	Used to numerically declare which pane should be initially expanded.
HeaderCssClass	Specifies the CSS class that defines how the header should look.
ContentCssClass	Specifies the CSS class that defines how the content region should look.
FadeTransitions	This Boolean property specifies whether content translucence should fade in and out during the pane transition animation.
TransitionDuration	Specifies how long (in milliseconds) the transition animation should last.
FramesPerSecond	Specifies the number of frames that should be drawn during each second of the animation.
Panes	A collection of AccordionPanes. Each AccordionPane contains a HeaderTemplate and a ContentTemplate, which contain the header and content sections for each pane, respectively.

Figure 8: Accordion is a functionally rich control that is configurable via many useful properties.

 

The AutoSize property can be set to any of these three values:

• None. There are no restrictions on the sizing of the control. It may freely resize itself as it sees fit when changing between panes. Controls around the Accordion control may be repositioned as a result.
• Limit. The content will never grow larger than the value of the Height property. Scrollbars will appear, if necessary.
• Fill. The Accordion control will never change size. It will be locked at the size specified by the Height property. As a result, content may grow or shrink to fit.

 

The Accordion control optionally can be data bound, using the DataSource, DataSourceID, and DataMember properties. The look and feel can be adjusted via CSS. The HeaderCssClass and ContentCssClass properties are used to specify which CSS classes should be used to display the header and content regions, respectively. Alternatively, each individual AccordionPane can be configured with its own unique CSS classes to give different looks to different sections of the Accordion control.

 

The animation that occurs when switching between panes at run time can be modified with the FadeTransitions, TransitionDuration, and FramesPerSecond properties. The boolean FadeTransitions property (when set to its non-default value of True) causes the content of the expanded panel to fade away as it collapses while fading in the content of the newly activated pane. TransitionDuration specifies (in milliseconds) how long each animation should last.

 

The Panes collection contains one or more AccordionPanes. AccordionPanes are used to declare each expandable section within the Accordion control. Each AccordionPane includes header and content templates. Each AccordionPane may also optionally include HeaderCssClass and ContentCssClass properties to specify a unique look and feel for each AccordionPane. When used, these two properties override the Accordion s identically named properties.

 

Like many templated controls, Accordion isn t entirely useful in the design view of Visual Studio. The designer does a dreadful job of persisting Accordion s properties into the very specific ASPX syntax that s required. Instead, the source view tends to work better for directly configuring the Accordion control s ASPX declaration, which is shown in Figure 9.

 

   ID="Accordion1"

   runat="server"

   Width="100px"

   BorderStyle="Ridge"

   HeaderCssClass="accordionpaneheader"

   ContentCssClass="accordionpanecontent"

   SelectedIndex="0"

   AutoSize="None"

   FadeTransitions="true"

   TransitionDuration="250"

   FramesPerSecond="40">

 

   

       ID="AccordionPane1"

       runat="server">

       

First Header

       Content Item 1

   

   

       ID="AccordionPane2"

       runat="server">

       

Second Header

       Content Item 2

          

 

Figure 9: The Accordion control s rich functionality is most easily configured via source (ASPX) view in Visual Studio.

 

As you can see, the Accordion control s properties are listed first, followed by the Panes collection. Nested within the Panes collection are one or more AccordionPanes. Each AccordionPane includes Header and Content template sections to define what will appear in the Accordion control at run time.

 

Conclusion

The AlwaysVisibleControl extender is fantastic for docking a control to a corner of the window so it will stay put even while underlying page content is scrolled. The ResizableControl extender is handy for allowing users to resize pieces of content at run time. The Accordion control is a complex and functionally rich component that provides a familiar, space-saving user interface.

 

But we ve only scratched the surface; the AJAX Control Toolkit contains more than 30 useful, interesting, and time-saving components. I encourage you to download the free ASP.NET AJAX Framework (http://ajax.asp.net) and its related open-source AJAX Control Toolkit (http://ajax.asp.net/ajaxtoolkit/). In addition to containing cutting-edge components, they can help you ramp up for the future and become a better AJAX Web developer.

 

The sample code for this article is available for download.

 

Steve C. Orr is an ASPInsider, an MCSD, a Certified ScrumMaster, a Microsoft MVP in ASP.NET, and author of the book Beginning ASP.NET 2.0 AJAX (Wrox Press). He s been developing software solutions for leading companies in the Seattle area for more than a decade. When he s not busy designing software systems or writing about them, he often can be found loitering at local user groups and habitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net or e-mail him at mailto:[email protected].