Microsoft AjaxToolkits之10. CollapSibePanel控件
CollapSibePanel控件是多个折叠面板的组合，实现一个Panel的显示和隐藏并定义一些样式。提供两种方式：一种是按钮方式，一种是图片方式。
属性列表：
TargetControlID :
该属性指定一个Panel，该Panel就是CollapsiblePanel要扩展显示或折叠的内容面板。
CollapsedSize/
ExpandedSize :该属性指定控制折叠/扩展的控件大小。
Collapsed
: 默认是否折叠
AutoCollapse/
AutoExpand : 鼠标移上/移出时候是否自动显示(不点击)
ScrollContents
: 是否显示滚动条
ExpandControlID/CollapseControlID
: 该属性指定控制折叠/扩展的控件ID。
TextLabelID
: 指定一个控件，可以在扩展或折叠Panel时显示CollapsedText/ExpandedText中的内容。
CollapsedText/
ExpandedText :Panel折叠/扩展时的文本。
ImageControlID
: 指定一个控件，在扩展时显示ExpandedImage中的图像;在折叠时显示CollapsedImage中的图像。
CollapsedImage/
ExpandedImage :在扩展/折叠时显示不同的图像。
ExpandDirection
：指定Panel的扩展方向。
实例解析一、使用按钮控制折叠面板
1.UI界面
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="26px" Width="316px">
<asp:LinkButton ID="LinkButton1"
runat="server">LinkButton</asp:LinkButton></asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="142px" Width="315px"
BorderWidth="1">面板内容
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="Panel2" CollapsedSize="0"
Collapsed="false" ExpandControlID="LinkButton1" CollapseControlID="LinkButton1"
AutoCollapse="false" ScrollContents="false" TextLabelID="LinkButton1"
CollapsedText="显示面板"
ExpandedText="隐藏面板" ExpandDirection="Horizontal">
</cc1:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
</form>
2.后台
实例解析二、使用图片控制折叠面板
1.UI界面
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server"></asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="26px" Width="316px">
<asp:Image ID="Image1" runat="server" /> </asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="142px" Width="315px"
BorderWidth="1">面板内容
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="Panel2" CollapsedSize="0"
Collapsed="false" ExpandControlID="Image1" CollapseControlID="Image1"
AutoCollapse="false" ScrollContents="false" ImageControlID="Image1"
CollapsedText="显示面板"
ExpandedText="隐藏面板" ExpandDirection="Horizontal" CollapsedImage="user_32.gif"
ExpandedImage="user_32.gif">
</cc1:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
</form>
