Enrich Your Panels

ControlFreak

LANGUAGES: VB.NET | C#

ASP.NET VERSIONS: 2.x

Enrich Your Panels

The AJAX Control Toolkit Comes with Several Extenders that Can Enhance the Boring Old ASP.NET Panel Control with Some Cool New Tricks

By Steve C. Orr

The ASP.NET 2.0 Panel control is a valuable, albeit somewhat plain, control. Although useful, it s difficult to get excited about it until you see all the new functionality with which it can be enhanced by taking advantage of the free, open source ASP.NET AJAX Control Toolkit. Packed with rich functionality, this toolkit is a goldmine for Web developers looking to save AJAX development time. The source code is a boon, as well, for those anxious to develop their own AJAX-enhanced controls. This article will examine in detail four of the more than 30 components that come with this exciting toolkit.

For more information about installing and configuring the ASP.NET AJAX Control Toolkit, see Working with the ASP.NET AJAX Control Toolkit by Daniel N. Egan. For toolkit download details, code samples, and documentation, go to http://ajax.asp.net/ajaxtoolkit/.

Rounded Corners

Over the years there have emerged a variety of techniques for rounding the corners of an otherwise square page element. Most of the techniques involve using a variety of images to represent each corner and side. Most of the techniques also share another thing in common: they were painful. They are far more complicated to implement than one would expect for such a seemingly trivial cosmetic request.

Finally, there s a solution that makes the task as simple as it should be: The ASP.NET AJAX Control Toolkit provides RoundedCornersExtender, which enhances the standard old Panel control (or similar page elements) with the ability to be configured with curvaceous edges (see Figure 1).

Figure 1: RoundedCornersExtender visually enhances page elements with modern-looking curves.

RoundedCornersExtender is declared like this:

ID="RoundedCornersExtender1"

runat="server" Radius="10"

TargetControlID="Panel1">

Once the extender s TargetControlID property is set to the ID of a Panel (or similar control), the extender s remaining properties can be set via the panel s design view Properties window, as shown in Figure 2.

Figure 2: RoundedCornersExtender adds new properties to the standard ASP.NET Panel control.

The Radius property can be used to adjust the corner curves. While the default value of 5 is subtle, the larger this number is set, the more pronounced the curving effect becomes. Experimenting with large values can create some fairly radical effects, such as the one shown in Figure 3.

Figure 3: RoundedCornersExtender s Radius property can create some extreme effects when set to large numbers.

The Color property can optionally be used to adjust the fill color of the corners created by RoundedCornersExtender.

Drop Shadow

RoundedCornersExtender is not the only component in the ASP.NET Control Toolkit that can round the corners of a page element; DropShadowExtender can also do the job because it too has Radius and TargetControlID properties. These properties leap into action whenever the Boolean Rounded property is set to True.

You may have suspected that DropShadowExtender also provides the ability to cast a visual shadow behind the control with which it s associated. You d be right. Figure 4 shows one configuration of DropShadowExtender at run time.

Figure 4: DropShadowExtender enhances other controls with an appealing shadow effect, and it can round their corners, too.

DropShadowExtender provides several other useful properties to adjust the shadow s cosmetic details. For example, the Width property is used to specify how broad of a shadow is cast, and the Opacity property is used to adjust exactly how translucent the shadow will be. The Opacity property accepts values from zero (invisible) to 1 (fully opaque). Figure 5 lists DropShadowExtender s unique properties.

Property	Default Value	Description
Opacity	0.5	Determines how translucent the shadow will be. Valid values range from 0 to 1, with 1 being completely opaque and zero being completely invisible.
Radius	5	Determines how curved the corners should be when the Rounded property is set to True.
Rounded	False	Specifies whether the corners should be square or curved.
TrackPosition	False	Must be set to True when absolute positioning is used (to ensure the shadow position stays in sync with its assigned control).
Width	5	Used to specify how many pixels wide the shadow should be.

Figure 5: DropShadowExtender enhances other controls with alluring new effects configurable through these properties.

Just as with RoundedCornersExtender, these properties can optionally be adjusted in the Visual Studio designer s Properties window, or via the ASPX declaration shown here:

ID="DropShadowExtender2" runat="server"

Opacity="0.75" Radius="15"

Rounded="True" TargetControlID="Panel2">

DragPanel

Also included in the ASP.NET AJAX Control Toolkit is DragPanelExtender. It enhances the standard ASP.NET Panel control with the ability to be dragged around a Web page at run time.

DragPanelExtender is exceptionally easy to work with. Like the previous extenders detailed in this article, it s linked to a particular Panel control through its TargetControlID property. This specifies which Panel control should be dragged. Conversely, DragPanelExtender s unique DragHandleID property is used to specify which element (when clicked) will cause the panel to start dragging. If this optional property is not set, the user will be able to click anywhere in the panel to drag it. These two properties are the only significant properties of DragPanelExtender.

Figure 6 shows DragPanelExtender in action. A standard Label control has been placed in the top of a standard Panel control to appear as its header. DragPanelExtender s TargetControlID links to the panel, and DragHandleID links to the Label control inside the panel. Figure 7 lists the source code for Figure 6.

Figure 6: DragPanelExtender lets users drag and drop panels into virtually any position they choose.

DragPanel

Figure 7: This ASPX is all it takes to implement the draggable panel shown in Figure 6.

It should be noted that the panel cannot be dragged outside the boundaries of the page, and a page may not necessarily fill the entire browser window. Normally this isn t likely to be much of a problem, but if you find yourself faced with a panel that won t remain in the position to which it was dragged, you may want to follow my example: place the panel inside a div element of a fixed size so the panel may roam freely within it.

Collapsible Panel

There are a variety of expanding panel controls provided by third-party and open sources, including the free VisiPanel control I introduced in December 2005. The ASP.NET AJAX Toolkit comes with its own version, in the form of CollapsiblePanelExtender. It enhances the standard ASP.NET Panel control with the ability to expand and contract based on a variety of triggers. This complex extender has quite a few properties that make it highly configurable (see Figure 8).

Property	Description
AutoCollapse	This Boolean property (False by default) determines whether to automatically collapse the panel or not once the mouse is no longer hovering over it.
AutoExpand	This Boolean property (False by default) determines whether to automatically expand the panel or not when the mouse hovers over it.
CollapseControlID	The ID of the control that (when clicked) will trigger the panel to collapse.
Collapsed	This Boolean property (False by default) determines whether the panel will start in its collapsed or expanded state.
CollapsedImage	This optional property may contain the path to an image that can be automatically displayed when the panel is in its collapsed state.
CollapsedSize	The height (in pixels) that the panel should be when in its collapsed state (this supersedes the panel s standard Height property).
CollapsedText	This optional property may contain text that can be automatically displayed when the panel is in its collapsed state.
ExpandControlID	The ID of the control that (when clicked) will trigger the panel to expand.
ExpandDirection	The ExpandDirection property enumeration specifies whether the expansion and contraction should animate vertically or horizontally.
ExpandedImage	This optional property may contain the path to an image that can be automatically displayed when the panel is in its expanded state.
ExpandedSize	The height (in pixels) that the panel should be when in its expanded state (this supersedes the panel s standard Height property).
ExpandedText	This optional property may contain text that automatically can be displayed when the panel is in its expanded state.
ImageControlID	This specifies the ID of the ASP.NET Image control that should display the CollapsedImage and/or ExpandedImage (if any).
ScrollContents	This Boolean property (False by default) specifies whether contents larger than the bounds of the panel should be clipped or whether a scrollbar should appear to allow user access to the full content.
SuppressPostback	When a control that normally causes postbacks (such as a button or hyperlink) is used to trigger the panel expansion/contraction, setting this Boolean property to True will prevent a postback from occurring.
TextLabelID	Specifies the ID of the ASP.NET Label control that should display values of the CollapsedText and/or ExpandedText properties (if any).

Figure 8: The CollapsiblePanelExtender is a functionally rich component that can be configured in a variety of ways through the many properties shown here.

As usual with extender controls, the TargetControlID property is used to specify which control is to be extended. The properties listed in Figure 8 will show up in the Properties window in the Visual Studio Designer when the specified Panel control is selected.

At a minimum you should set the ExpandControlID and CollapseControlID properties to specify which control(s) should cause the panel to expand and collapse. You may set these properties to separate controls or point them both to the same control for a toggle effect. These triggers can be the Panel control itself, controls inside the panel, or even controls located in separate areas of the page. When these trigger controls are clicked by the user at run time, the panel will smoothly expand and contract between the pixel heights specified by the CollapsedSize and ExpandedSize properties. Figure 9 shows some of these options in action.

Figure 9: The Panel control can be configured to collapse or expand in response to a variety of triggers, such as the external button and internal label controls shown here.

Alternatively, the AutoExpand/AutoCollapse Boolean properties could be set to True to cause the panel to expand and collapse based on the mouse hovering over it.

Optionally, configurable text and/or images can be displayed and automatically toggled as the panel changes between its collapsed and expanded states. The specified text and images are configured via the ExpandedImage, CollapsedImage, ExpandedText, and CollapsedText properties. The controls in which they are displayed are configured via the ImageControlID and TextLabelID properties.

Conclusion

The RoundedCorners, DropShadow, DragPanel, and CollapsiblePanel extenders are only a few of the many valuable tools in the ASP.NET AJAX Control Toolkit that can be used to spice up the functionality of ASP.NET 2.0.

You may have noticed that all the rich functionality demonstrated in this article was implemented without a single line of code; no C#, no VB.NET, no JavaScript. All functionality was configured via property settings. Just imagine what you could accomplish if you sprinkle in some code of your own. Also envision what you might be able to accomplish by combining the above extenders in various combinations, or adding some of the many other controls in the ASP.NET AJAX Control Toolkit. The possibilities are virtually unlimited.

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].

Comments

Plain text