title: ASP.NET Custom Control XML
body: <p>I'm creating a custom control as a kind of wrapper for a popular jQuery plugin.  However, I'm new to custom controls and I'm having a bit of a problem with how things work and I'm afraid I don't even know enough to properly phrase my Google searches.</p>
  
  <p>I need to have the control look a certain way in ASP.NET's XML for ease of use later.  Right now it looks like this:</p>
  
  <pre><code>&lt;js:jsTree ID="what" runat="server"&gt;
     &lt;jsTreeNode ID="node_1" Title="node_1v" runat="server" /&gt;
     &lt;jsTreeNode ID="node_2" Title="node_2v" runat="server" /&gt;
     &lt;jsTreeNode ID="node_3" Title="node_3v" runat="server"&gt;
        &lt;jsTreeNode ID="subnode_1" Title="subnode_1v" runat="server" /&gt;
        &lt;jsTreeNode ID="subnode_2" Title="subnode_2v" runat="server" /&gt;
     &lt;/jsTreeNode&gt;
  &lt;/js:jsTree&gt;
  </code></pre>
  
  <p>I want it to look like:</p>
  
  <pre><code>&lt;js:jsTree ID="what" runat="server"&gt;
     &lt;Types&gt;
        &lt;js:Type ID="default" Rules="whatever" runat="server" /&gt;
     &lt;/Types&gt;
     &lt;Nodes&gt;
        &lt;js:TreeNode ID="node_1" Title="node_1v" runat="server" /&gt;
        &lt;js:TreeNode ID="node_2" Title="node_2v" runat="server" /&gt;
        &lt;js:TreeNode ID="node_3" Title="node_3v" runat="server"&gt;
           &lt;js:TreeNode ID="subnode_1" Title="subnode_1v" runat="server" /&gt;
           &lt;js:TreeNode ID="subnode_2" Title="subnode_2v" runat="server" /&gt;
        &lt;/js:TreeNode&gt;
     &lt;/Nodes&gt;
  </code></pre>
  
  <p></p>
  
  <p>What can I do to layout the objects so they appear this way?  Can anyone point me at a tutorial where someone has done something similar?</p>
  
  <p>Thanks!</p>