自定义Template，向其中添加新的panel

参考网站：https://www.devexpress.com/Support/Center/Example/Details/E2690

思路：

新建一个DefaultTemplate:

     

在新建的Template中进行自定义，在需要自定义的位置，加入PlaceHolder控件，这里加入的是XafUpdatePanel。这里以在右边加入一个XafUpdatePanel为例。

 <td id="Right" width="250px" style="vertical-align: top">
       <cc3:XafUpdatePanel ID="UPRight" runat="server"/>
 </td>

界面如下：

为了实现能隐藏/显示Panel的功能，可以在Panel的左边加入一个分隔符。代码加入分隔符。

 <td id="RS" style=" 6px; border-bottom-style: none; border-top-style: none"  class="dxsplVSeparator_<%= BaseXafPage.CurrentTheme %> dxsplPane_<%=BaseXafPage.CurrentTheme %>">
     <div id="RSB" class="dxsplVSeparatorButton_<%=BaseXafPage.CurrentTheme%>" onmouseover="OnMouseEnter('RSB')" onmouseout="OnMouseLeave('RSB')" onclick="OnClick('Right','RSI')">
              <div id="RSI" style=" 8px;" class="dxWeb_splVCollapseForwardButton_<%=BaseXafPage.CurrentTheme %>">
               </div>
      </div>
</td>

这里介绍下该段语句的简单用法，onMouseEnter()和OnMouseLeave()传入的是id号为“RSB"的div元素的id，OnClick()第一个参数记录的是要隐藏的td元素的id号，在本例中，XafUpdatePanel位于id号为"Right"的元素中，通过隐藏该元素，即可隐藏Panel。ID为”RSI"的div元素放置的时隐藏/显示符号。“〉"为dxWeb_splVCollapseForwardButton。"<"为dxWeb_spVCollapseBackwardButton。请根据分隔符的位置设置。

同理，设置左边的PlaceHolder的代码如下：

<td id="leftPanel" width="250px" style="vertical-align: top">
     <cc3:XafUpdatePanel ID="UPLeft" runat="server"/>
</td>
 4 <td id="RL" style=" 6px; border-bottom-style: none; border-top-style: none"
    class="dxsplVSeparator_<%= BaseXafPage.CurrentTheme %> dxsplPane_<%= BaseXafPage.CurrentTheme %>">
   <div id="RLT" class="dxsplVSeparatorButton_<%= BaseXafPage.CurrentTheme %>" onmouseover="OnMouseEnter('RLT')"
        onmouseout="OnMouseLeave('RLT')" onclick="OnClick('leftPanel', 'RLI',true)">
           <div id="RLI" style=" 8px;" class="dxWeb_splVCollapseBackwardButton_<%= BaseXafPage.CurrentTheme %>">
           </div>
   </div>
</td>

完成Template的自定义工作后，要通过属性将新添加的XafUpdatePanel暴露出来。在CustomMainGISTemplate.ascx.cs中的类中添加代码如下：

        #region Expose DefineControls
        public System.Web.UI.Control RightPlaceHolder
        {
            get { return UPRight; }
        }
        public System.Web.UI.Control LeftPlaceHodler
        {
            get { return UPLeft; }
        }
        #endregion

注意，ASP.NET与WinForm在引用自定义模板的时候，有些许区别。在应用程序初始化时，默认页面就是Default.aspx。模板页（.ascx）是通过嵌入到Default.aspx中来实现的。因此，外部方法一般得通过Default.aspx文件的访问来获取customTemplate.ascx中的控件。这一点得注意。

接下来就是要定义一个外部访问接口，供XAF自动调用。

    public interface InterfaceCustomGISTemplate:IFrameTemplate
    {
        Control RightPlaceHolder { get; }
        Control LeftPlaceHodler { get; }
    }

因为上一段讨论的原因，需要在Default.aspx.cs文件中，实现该接口，才可以让其它方法访问自定义的XafUpdatePanel。从而实现初始化等工作。

public partial class Default : BaseXafPage,InterfaceCustomGISTemplate
{
//......
    #region Expose CustomControl 
    public Control RightPlaceHolder
    {
        get { return TemplateContent is customMainGISTemplate ? ((customMainGISTemplate)TemplateContent).RightPlaceHolder : null; }
    }
    public Control LeftPlaceHodler
    {
        get { return TemplateContent is customMainGISTemplate ? ((customMainGISTemplate)TemplateContent).LeftPlaceHodler : null; }
    }
    #endregion
}

接下来，就可以通过实现一个controller来完成在对应的XafUpdatePanel上添加控件并初始化等操作。XAF提供了一个CustomizeTemplateViewControllerBase<T>类，以帮助用户完成对自定义模板的初始化工作。用户只需继承该基类，并实现对应的接口即可。

具体代码如下：

public partial class GISInfoController : CustomizeTemplateViewControllerBase<InterfaceCustomGISTemplate>
{
//......
protected override void AddControlsToTemplateCore(InterfaceCustomGISTemplate template)
        {
            Control rightPlaceHolder = template.RightPlaceHolder;
            if (rightPlaceHolder == null) return;
            this.rightPanel = CreatePanel("rightPanel","InformationPanel");
            licMsg = new LiteralControl("Used to show information or other related operation");
            this.rightPanel.Controls.Add(licMsg);
            rightPlaceHolder.Controls.Add(rightPanel);

            Control leftPlaceHolder = template.LeftPlaceHodler;
            if (leftPlaceHolder == null) return;
            this.leftPanel = CreatePanel("leftPanel", "DeviceSelectPanel");
            mainTV = new DevExpress.Web.ASPxTreeView.ASPxTreeView();
            mainTV.Nodes.Add("Add node");
            leftPanel.Controls.Add(mainTV);
            leftPlaceHolder.Controls.Add(leftPanel);


        }

        protected override void RemoveControlsFromTemplateCore(InterfaceCustomGISTemplate template)
        {
            Control rightPlaceHolder = template.RightPlaceHolder;
            if (rightPlaceHolder == null) return;
            rightPlaceHolder.Controls.Remove(rightPanel);
            rightPanel = null;
            licMsg = null;

            Control leftPlaceHolder = template.LeftPlaceHodler;
            if (leftPlaceHolder == null) return;
            leftPlaceHolder.Controls.Remove(leftPanel);
            leftPanel = null;
            mainTV = null;
        }

        protected override void UpdateControls(View view)
        {
            licMsg.Text = licMsg.Text+string.Format("
Current View Caption is:{0}", view.Caption);
        }

        protected override void UpdateControls(object currentObject)
        {
 
        }

}

最后，就是要把当前使用的默认模板替换成当前模板，具体在Global.asax中完成。

public class Global : System.Web.HttpApplication
{
//......
 protected void Session_Start(Object sender, EventArgs e)
        {
            WebApplication.SetInstance(Session, new RMFSystemAspNetApplication());
            WebApplication.Instance.Settings.DefaultVerticalTemplateContentPath = "Template/customMainGISTemplate.ascx";
//......

            WebApplication.Instance.Setup();
            WebApplication.Instance.Start();
        }
}

生成界面如下：