LANGUAGES: VB.NET | C#
ASP.NET VERSIONS: 2.x
Pimp Out Your Panels | (Part 1 of 2) |
The AJAX Control Toolkit Comes with Several useful Extenders that Can Enhance the Boring Old ASP.NET Panel Control with Some Cool New Tricks
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 several 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
Square corners are so passé.
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're 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:
<ajaxToolkit:RoundedCornersExtender
ID="RoundedCornersExtender1"
runat="server" Radius="10"
TargetControlID="Panel1">
</ajaxToolkit:RoundedCornersExtender>
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 4. 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.
|
DropShadowExtender 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:
<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 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.
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 my free
VisiPanel control. 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).
|
CollapsiblePanel Property
|
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
out 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. (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 & 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. (Supersedes the Panel’s standard Height
property.)
|
|
ExpandedText
|
This optional property may contain text that can be automatically displayed when
the panel is in its expanded state.
|
|
ImageControlID
|
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.
Interested in more ways to pimp out your panels with the ASP.NET AJAX Control Toolkit?
Well then continue on to read Part 2!
The source code for this article is available for
download here.
The original version of this
article was published in the March 2007 issue of
ASP.NET Pro Magazine.