界面折叠

第一步：建立AJAX Control Toolkit Website
  
在这个例子里我们主要需要两个Panel控件和一个CollapsiblePanelExtender组件，另外还有一些辅助控件，这里就不一一列出了。如下所示：
  
  <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanelHeader">
              <asp:Image ID="Image1" runat="server" ImageUrl="~/images/expand.jpg" />&nbsp;&nbsp;
              <asp:Label ID="Label1" runat="server">显示内容…… </asp:Label>
  </asp:Panel>
以上是Panel1的代码，Panel1是控制区域，它负责控制Panel2的状态。在Panel1里我们定义了一个Image控件和一个Label控件。这两个控件能根据Panel2的状态显示不同的图片和文字。
  
注意：这里一定要用服务器控件，否则CollapsiblePanelExtender会找不到相关控件。
  
Panel2的内容只要一篇文章就可以了，这里就不再列出。
  
附上相关CSS样式：
  
.collapsePanel {
      
     background-color:white;
     overflow:hidden;
}
   
.collapsePanelHeader{     
     width:100%;        
     height:30px;
     background:#666;
     color:#FFF;
     font-weight:bold;
}
注意：上面的CSS样式中，collapsePanel是Panel2使用的样式，在这个样式中我们不能指定高度，否则Panel2就不能正常显示和隐藏了，大家可以自行测试。
  
第二步：设置CollapsiblePanelExtender
  
由于要设置的属性太多，请参考如下代码：
  
  <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
             CollapseControlID="Panel1"  
             ExpandControlID="Panel1"  
             TargetControlID="Panel2"
             ImageControlID="Image1"  
             TextLabelID="Label1"  
             CollapsedText="显示内容……"
             ExpandedText="隐藏内容……"
             ExpandedImage="~/images/collapse.jpg"  
             CollapsedImage="~/images/expand.jpg">
  </ajaxToolkit:CollapsiblePanelExtender>
CollapseControlID是指控制隐藏的控件ID，ExpandControlID是指控制显示的控件ID，由于本例子只有一个控制区域，因此它们的值都是Panel1。如果大家有两个控制区域，可以分别指定它们的值。TagetControlID是指需要控制的目标控件ID，这里是Panel2。ImageControlID是指显示状态图片的控件ID，这里是Image1，如果没有可以不指定。TextLabelID是指显示状态文字的控件ID，这里是Label1，如果没有也可以不指定。接下来的CollapsedText、ExpandedText、CollapsedImage和ExpandedImage就是指定不同状态下所显示的文字和图片了，大家根据实际情况设置。