在自定义控件的构建(3)中，我们构建了组合控件，实际上，在大部分构建组合控件时，同时会指定其子控件的布局

构建混合控件

  下面的代码是设计为一个登录控件，同时指定其布局

 namespace MyCompositeControls
{    
    /// 

    /// 构建混合控件
   /// 
    public class Login : CompositeControl
    {
        private TextBox txtUserName;
        private TextBox txtPassword;
        public string UserName
        {
            get 
            {
                EnsureChildControls();
                return txtUserName.Text;
            }
            set
            {
                EnsureChildControls();
               txtUserName.Text=value;
            }
        }
        public string Password
        {
            get
            {
                EnsureChildControls();
                return txtPassword.Text;
            }
            set
            {
                EnsureChildControls();
                txtPassword.Text = value;
            }
        }
        protected override void CreateChildControls()
        {
            txtUserName = new TextBox();
            txtUserName.ID = "txtUserName";
            this.Controls.Add(txtUserName);
            txtPassword = new TextBox();
            txtPassword.ID = "txtPassword";
            this.Controls.Add(txtPassword);
        }
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtUserName.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("User Name:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            txtUserName.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtPassword.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("Password:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            txtPassword.RenderControl(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
        }
        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Table; }
        }
}
    }

 可以看到RenderContents()内部被重写为两个TextBox的布局顺序，TextBox是通过调用各自的RenderContents()生成的

运行后查看界面源码

 <table id="Login1">
  <tr>
    <td><label for="Login1_txtUserName">User Name:label>td><td><input name="Login1$txtUserName" type="text" id="Login1_txtUserName" />td>
  tr><tr>
    <td><label for="Login1_txtPassword">Password:label>td><td><input name="Login1$txtPassword" type="text" id="Login1_txtPassword" />td>
  tr>
table>    

可见TextBox是生成在一个表格中的。

默认的RenderContents()只调用每个子控件的RenderContents()，通过重写控件的RenderContents()可以对子控件的布局进行更多的控制

下面的代码对RenderContents()进行了改写，实现

 //重写布局
        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.AddStyleAttribute("float", "left");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtUserName.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write("User Name:");
            writer.RenderEndTag();
            writer.RenderEndTag();       
           
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddAttribute(HtmlTextWriterAttribute.For, txtPassword.ClientID);
            writer.RenderBeginTag(HtmlTextWriterTag.Label);
            writer.Write(" Password:");
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.RenderEndTag();
           
            writer.AddStyleAttribute("float", "left");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            txtUserName.RenderBeginTag(writer);        
            writer.RenderEndTag();
           
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            writer.AddStyleAttribute(HtmlTextWriterStyle.Padding, "3px");
            writer.RenderBeginTag(HtmlTextWriterTag.Div);
            txtPassword.RenderBeginTag(writer);
            writer.RenderEndTag();
            writer.RenderEndTag();
            writer.Write("
");
        }
        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Div; }
        }
看看页面的Html生成

 
<div id="LoginStandard1">
  <div style="float:left;">
    <div style="padding:3px;">
      <label for="LoginStandard1_txtUserName">User Name:label>
    div><div style="padding:3px;">
      <label for="LoginStandard1_txtPassword"> Password:label>
    div>
  div>
<div style="float:left;">
       <div style="padding:3px;">
      <input name="LoginStandard1$txtUserName" type="text" id="LoginStandard1_txtUserName" /><div>
        <div style="padding:3px;">
          <input name="LoginStandard1$txtPassword" type="text" id="LoginStandard1_txtPassword" />
        div>
<br style='clear:left'/>
  div>
尽管如此，在标准控件中Ms还是采用了Html表格布局方式。