ControlFreak

LANGUAGES:VB.NET | C#

ASP.NETVERSIONS: 2.x

Enrich Your Panels

The AJAX ControlToolkit Comes with Several Extenders that Can Enhance the Boring Old ASP.NETPanel Control with Some Cool New Tricks

By Steve C. Orr

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

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

Rounded Corners

Over the years there have emerged a variety of techniquesfor rounding the corners of an otherwise square page element. Most of thetechniques 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. Theyare far more complicated to implement than one would expect for such aseemingly trivial cosmetic request.

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

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

RoundedCornersExtender is declared like this:

<ajaxToolkit:RoundedCornersExtender

   ID="RoundedCornersExtender1"

   runat="server" Radius="10"

   TargetControlID="Panel1">

</ajaxToolkit:RoundedCornersExtender>

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

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

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

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

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

Drop Shadow

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

You may have suspected that DropShadowExtender alsoprovides the ability to cast a visual shadow behind the control with which it?sassociated. You?d be right. Figure 4 shows one configuration of DropShadowExtenderat run time.

Figure 4: DropShadowExtenderenhances other controls with an appealing shadow effect, and it can round theircorners, too.

DropShadowExtender provides several other usefulproperties to adjust the shadow?s cosmetic details. For example, the Widthproperty is used to specify how broad of a shadow is cast, and the Opacityproperty is used to adjust exactly how translucent the shadow will be. TheOpacity property accepts values from zero (invisible) to 1 (fully opaque). Figure5 lists DropShadowExtender?s unique properties.

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

Just as with RoundedCornersExtender, these properties canoptionally be adjusted in the Visual Studio designer?s Properties window, orvia the ASPX declaration shown here:

<ajaxToolkit:DropShadowExtender

   ID="DropShadowExtender2" runat="server"

   Opacity="0.75" Radius="15"

    Rounded="True"TargetControlID="Panel2">

</ajaxToolkit:DropShadowExtender>

DragPanel

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

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

Figure 6 shows DragPanelExtender in action. A standard Labelcontrol has been placed in the top of a standard Panel control to appear as itsheader. DragPanelExtender?s TargetControlID links to the panel, andDragHandleID links to the Label control inside the panel. Figure 7 lists thesource code for Figure 6.

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

   <title>DragPanel</title>

</head>

<body>

<form id="form1" runat="server">

   <asp:ScriptManagerID="ScriptManager1" runat="server"/>

   <divstyle="width: 435px; height: 306px;">

    <br />

    <asp:PanelID="Panel1" runat="server"

    BackColor="#80FF80" Height="140px"Width="189px">

      <divstyle="text-align: center; cursor: hand;">

        <asp:LabelID="Label1" runat="server"

        Text="DragHeader" Width="100%" BackColor="Lime"/>

      </div>

      <br />

      <divstyle="text-align: center">

          Panel

      </div><br />

    </asp:Panel>

   </div>

   <ajaxToolkit:DragPanelExtender

       ID="DragPanelExtender1" runat="server"

       TargetControlID="Panel1"

       DragHandleID="Label1">

   </ajaxToolkit:DragPanelExtender>

</form>

</body>

</html>

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

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

Collapsible Panel

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

Figure 8: TheCollapsiblePanelExtender is a functionally rich component that can beconfigured in a variety of ways through the many properties shown here.

As usual with extender controls, the TargetControlIDproperty is used to specify which control is to be extended. The propertieslisted in Figure 8 will show up in the Properties window in the Visual StudioDesigner when the specified Panel control is selected.

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

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

Alternatively, the AutoExpand/AutoCollapse Booleanproperties could be set to True to cause the panel to expand and collapse basedon the mouse hovering over it.

Optionally, configurable text and/or images can bedisplayed and automatically toggled as the panel changes between its collapsedand expanded states. The specified text and images are configured via theExpandedImage, CollapsedImage, ExpandedText, and CollapsedText properties. Thecontrols in which they are displayed are configured via the ImageControlID andTextLabelID properties.

Conclusion

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

You may have noticed that all the rich functionalitydemonstrated in this article was implemented without a single line of code; noC#, no VB.NET, no JavaScript. All functionality was configured via propertysettings. Just imagine what you could accomplish if you sprinkle in some codeof your own. Also envision what you might be able to accomplish by combiningthe above extenders in various combinations, or adding some of the many othercontrols in the ASP.NET AJAX Control Toolkit. The possibilities are virtuallyunlimited.

The sample code forthis article is available for download.

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