[原创]FineUI秘密花园（二十五） — 手风琴控件概述

[原创]FineUI秘密花园（二十五） — 手风琴控件概述
手风琴控件是一个用来展示多个面板的控件，这些面板同时只能展开一项（也可以一项都不展开），和选项卡控件TabStrip有异曲同工之妙。本章将会介绍手风琴控件的基本用法，并结合树控件来制作站点菜单。

手风琴控件的基本用法

通过一个示例来展示手风琴控件的用法，先看下最终效果图：

这个手风琴控件由三个面板组成，来看下ASPX标签定义：
```
   1:  <ext:Accordion ID="Accordion1" Title="手风琴控件" runat="server" Width="300px" Height="450px"
```
```
   2:      EnableFill="true" ShowBorder="True" ActiveIndex="1">
```
```
   3:      <Panes>
```
```
   4:          <ext:AccordionPane ID="AccordionPane1" runat="server" Title="面板一" IconUrl="../images/16/1.png"
```
```
   5:              BodyPadding="2px 5px" ShowBorder="false">
```
```
   6:              <Items>
```
```
   7:                  <ext:Label ID="Label1" Text="面板一中的文本" runat="server">
```
```
   8:                  </ext:Label>
```
```
   9:              </Items>
```
```
  10:          </ext:AccordionPane>
```
```
  11:          // 省略其他面板...
```
```
  12:      </Panes>
```
```
  13:  </ext:Accordion>
```
这里有几个属性需要注意：
- EnableFill：子面板是否填充全部空间，否则的所有子面板会堆积在顶部
- ActiveIndex：默认选中的面板索引
而子面板（AccordionPane）和普通的Panel面板没有区别，只不过ShowHeader属性不可用（子面板的标题栏是一定会存在的）。

在来看下后台获取展开面板的代码：
```
   1:  protected void Button1_Click(object sender, EventArgs e)
```
```
   2:  {
```
```
   3:      Alert.ShowInTop(String.Format("当前展开的是第 {0} 个面板", Accordion1.ActiveIndex + 1));
```
```
   4:  }
```
手风琴+树控件

官方示例的左侧菜单使用的是树控件，如下图所示：

其前台标签定义和后台绑定代码如下所示：
```
   1:  <ext:Region ID="Region2" Split="true" EnableSplitTip="true" CollapseMode="Mini" Width="200px"
```
```
   2:      Margins="0 0 0 0" ShowHeader="true" Title="示例" EnableLargeHeader="false" Icon="Outline"
```
```
   3:      EnableCollapse="true" Layout="Fit" Position="Left" runat="server">
```
```
   4:  </ext:Region>
```
```
   5:  <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/menu.xml"></asp:XmlDataSource>
```
```
   1:  protected void Page_Init(object sender, EventArgs e)
```
```
   2:  {
```
```
   3:      InitTreeMenu();
```
```
   4:  }
```
```
   5:   
```
```
   6:  private void InitTreeMenu()
```
```
   7:  {
```
```
   8:      Tree treeMenu = new Tree();
```
```
   9:      treeMenu.ID = "treeMenu";
```
```
  10:      treeMenu.EnableArrows = true;
```
```
  11:      treeMenu.ShowBorder = false;
```
```
  12:      treeMenu.ShowHeader = false;
```
```
  13:      treeMenu.EnableIcons = false;
```
```
  14:      treeMenu.AutoScroll = true;
```
```
  15:      Region2.Items.Add(treeMenu);
```
```
  16:   
```
```
  17:      // 绑定 XML 数据源到树控件
```
```
  18:      treeMenu.DataSource = XmlDataSource1;
```
```
  19:      treeMenu.DataBind();
```
```
  20:  }
```
这里涉及的知识点有：
1. 动态添加树控件，在Page_Init中进行；
2. 将树控件绑定到XML数据源。
简单看下XML文件的内容：
```
   1:  <?xml version="1.0" encoding="utf-8" ?>
```
```
   2:  <Tree>
```
```
   3:    <TreeNode Text="配置信息" SingleClickExpand="true">
```
```
   4:      <TreeNode Text="发布历史" NavigateUrl="~/config/release_history.txt">
```
```
   5:      </TreeNode>
```
```
   6:      <TreeNode Text="版本发布周期" NavigateUrl="~/config/release_time_chart.htm" >
```
```
   7:      </TreeNode>
```
```
   8:      <TreeNode Text="配置 Web.config" NavigateUrl="~/config/modify_webconfig.htm" >
```
```
   9:      </TreeNode>
```
```
  10:      <TreeNode Text="内置图标" NavigateUrl="~/config/icons.htm" >
```
```
  11:      </TreeNode>
```
```
  12:      <TreeNode Text="安装工具箱" NavigateUrl="~/config/install_toolbox.htm" >
```
```
  13:      </TreeNode>
```
```
  14:      <TreeNode Text="IIS6中启用GZIP压缩" NavigateUrl="~/config/enable_gzip_iis6.htm" >
```
```
  15:      </TreeNode>
```
```
  16:      <TreeNode Text="AJAX 属性列表" NavigateUrl="~/config/ajax.aspx" >
```
```
  17:      </TreeNode>
```
```
  18:    </TreeNode>
```
```
  19:    // 省略其他节点...
```
```
  20:  </Tree>
```
后来很多网友希望增加手风琴控件和树控件的组合菜单，效果如下所示：

下面看下具体的实现代码：
```
   1:  protected void Page_Init(object sender, EventArgs e)
```
```
   2:  {
```
```
   3:      InitAccordionMenu();
```
```
   4:  }
```
```
   5:   
```
```
   6:  private Accordion InitAccordionMenu()
```
```
   7:  {
```
```
   8:      Accordion accordionMenu = new Accordion();
```
```
   9:      accordionMenu.ID = "accordionMenu";
```
```
  10:      accordionMenu.EnableFill = true;
```
```
  11:      accordionMenu.ShowBorder = false;
```
```
  12:      accordionMenu.ShowHeader = false;
```
```
  13:      Region2.Items.Add(accordionMenu);
```
```
  14:   
```
```
  15:      XmlDocument xmlDoc = XmlDataSource1.GetXmlDocument();
```
```
  16:      XmlNodeList xmlNodes = xmlDoc.SelectNodes("/Tree/TreeNode");
```
```
  17:      foreach (XmlNode xmlNode in xmlNodes)
```
```
  18:      {
```
```
  19:          if (xmlNode.HasChildNodes)
```
```
  20:          {
```
```
  21:              AccordionPane accordionPane = new AccordionPane();
```
```
  22:              accordionPane.Title = xmlNode.Attributes["Text"].Value;
```
```
  23:              accordionPane.Layout = Layout.Fit;
```
```
  24:              accordionPane.ShowBorder = false;
```
```
  25:              accordionPane.BodyPadding = "2px 0 0 0";
```
```
  26:              accordionMenu.Items.Add(accordionPane);
```
```
  27:   
```
```
  28:              Tree innerTree = new Tree();
```
```
  29:              innerTree.EnableArrows = true;
```
```
  30:              innerTree.ShowBorder = false;
```
```
  31:              innerTree.ShowHeader = false;
```
```
  32:              innerTree.EnableIcons = false;
```
```
  33:              innerTree.AutoScroll = true;
```
```
  34:              accordionPane.Items.Add(innerTree);
```
```
  35:   
```
```
  36:              XmlDocument innerXmlDoc = new XmlDocument();
```
```
  37:              innerXmlDoc.LoadXml(String.Format("<?xml version=\"1.0\" encoding=\"utf-8\" ?><Tree>{0}</Tree>", xmlNode.InnerXml));
```
```
  38:   
```
```
  39:              // 绑定AccordionPane内部的树控件
```
```
  40:              innerTree.DataSource = innerXmlDoc;
```
```
  41:              innerTree.DataBind();
```
```
  42:          }
```
```
  43:      }
```
```
  44:  }
```
来分析一下这段代码的逻辑：
1. 首先创建一个手风琴控件，并添加到父容器中（Region2.Items.Add）；
2. 从Xml数据源获取XmlDocument对象；
3. 选取XmlDocument对象中第一层TreeNode节点集合（其XPath路径为/Tree/TreeNode）；
4. 遍历第一层TreeNode节点集合，并生成手风琴控件的子面板（new AccordionPane），注意这些子面板的Layout属性为Fit；
5. 向手风琴子面板中加入新创建的树控件（accordionPane.Items.Add）；
6. 读取当前Xml节点的内部标签（xmlNode.InnerXml），并创建新的XmlDocument对象并绑定到树控件上。
通过上面的几个步骤，我们创建了一个手风琴控件，每个手风琴控件子面板中创建了一个树控件，从而完成这个任务。

小结

本章我们讲解了手风琴控件的基本用法，以及如何结合手风琴和树控件来创建站点菜单。下一篇文章我们会介绍和手风琴控件比较类似的选项卡控件。

注：《FineUI秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录官方论坛
相关阅读:
什么是test-time argument（测试数据增强）
在k3d上快速安装Istio，助你在本地灵活使用K8S！
IoT设备实践丨如果你也在树莓派上部署了k3s，你也许需要这篇文章
 k3s原理分析丨如何搞定k3s node注册失败问题
 仅需60秒，使用k3s创建一个多节点K8S集群！
手把手实操教程！使用k3s运行轻量级VM
k3s首季在线培训来袭！本周四晚，线上见！
k3s新版本发布！支持Helm3！还有其他重要更新Highlight！
如何优雅地使用containerd？这里有一份必读的技巧攻略
 图解拥塞控制，这应该是把拥塞控制讲的最通俗易懂的文章了
原文地址：https://www.cnblogs.com/sanshi/p/2799002.html

[原创]FineUI秘密花园（二十五） — 手风琴控件概述

手风琴控件的基本用法

手风琴+树控件

小结