首先看一个示例:
1)新建一个ASP.NET AJAX-Enabled Web Project工程项目,命名为CollapsiblePanel1。
2)在Default.aspx中拖放两个Panel。其ID分别为CollapsibleHeaderPanel和CollapsibleContentPanel。视图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6dbc9bcb1bd994fd0a4f421942952eae.gif)
3)在CollapsibleHeaderPanel中添加一个Label和ImageButton,用于提示可以展开或折叠。视图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/aaa3d9e07459ec79ac311b5d49fc78f5.gif)
4)在页面中添加一个CollapsiblePanel。并对其的一些属性进行设定。视图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/fd83e8d3b8672752eeb0b1ff972ceb1d.gif)
CollapsiblePanel的代码如下:
1
<
cc1:CollapsiblePanelExtender
ID
="CollapsiblePanelExtender1"
TargetControlID
="CollapsibleContentPanel"
CollapseControlID
="CollapsibleHeaderPanel"
ExpandControlID
="CollapsibleHeaderPanel"
ExpandDirection
="Vertical"
2
TextLabelID
="label1"
CollapsedText
="Hide Details
"
ExpandedText
="Show Details
"
Collapsed
="true"
3
ImageControlID
="imageButton1"
CollapsedImage
="expand_blue.jpg"
ExpandedImage
="collapse_blue.jpg"
SuppressPostBack
="true"
runat
="server"
>
4
</
cc1:CollapsiblePanelExtender
>
下面对其代码进行一点解释:
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
3
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
a)TargetControlID:该属性指定一个Panel,该Panel就是CollapsiblePanel要扩展显示或折叠的内容面板。
b)CollapseControlID/ExpandControlID:该属性指定控制折叠/扩展的控件ID。
c)ExpandDirection:指定Panel的扩展方向。
d)TextLabelID:指定一个控件,可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容。
e)CollapasedText/ExpandedText:Panel折叠/扩展时的文本。
f)Collapsed:指定页面导入时Panel是折叠还是扩展。
g)ImageControlID:指定一个控件,在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像。
h)ExpandedImage/CollapsedImage:在扩展/折叠时显示不同的图像。
i)SuppressPostBack:禁止回传。
页面所有代码如下:
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
效果预览:
![](https://i-blog.csdnimg.cn/blog_migrate/96cc0ac02b77d01f2a18c6f51e8e73f5.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/79eb5cafd18bc5b0e54c7fb6c637bf6f.gif)