LANGUAGES: VB.NET | C#
ASP.NET VERSIONS: 2.x
Pimp Out Your Panels | (Part 2 of 2) |
More Enhancements for the ASP.NET Panel Control Courtesy of the ASP.NET AJAX Control
Toolkit
<< Read Part 1
In part 1 we examined several extenders in the AJAX Control Toolkit that are
useful for enhancing the standard ASP.NET Panel control.
Our exploration of the AJAX Control Toolkit now 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 Magazine.
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.
|
AlwaysVisible 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:
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.
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.
Figure 9: The Accordion control’s rich functionality is most easily configured via source (ASPX) view in Visual Studio.
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
and its related open-source AJAX Control Toolkit. In addition to containing cutting-edge components,
they can help you ramp up for the future and become a better AJAX Web developer.
<< Read Part 1
The source code for this article is available for
download here.
The original version of this
article was published in the April 2007 issue of
ASP.NET Pro Magazine.