逐步解說：建立 Web 伺服器控制項的基本控制項設計工具

更新：2007 年 11 月

這個逐步解說會示範如何建立基本控制項設計工具以為 Web 伺服器控制項提供設計階段使用者介面 (UI)。

當您建立自訂 ASP.NET 伺服器控制項時，可以建立關聯的設計工具以在諸如 Microsoft Visual Studio 2005 的視覺化設計工具 (Visual Designer) 中呈現該控制項。該設計工具可讓主機環境呈現控制項的設計階段 UI，如此開發人員可以輕鬆地設定控制項的屬性和內容。如需設計工具功能和可與自訂控制項相關聯之各種設計工具類別的詳細資訊，請參閱 ASP.NET 控制項設計工具概觀。

在瀏覽這份逐步解說期間，您將瞭解如何：

• 建立標準複合控制項 (Composite Control) 設計工具並將其與複合控制項相關聯。

• 建立可調整大小的複合控制項設計工具並將其與複合控制項相關聯。

• 建立具有可編輯區域的基本容器 (Container) 控制項設計工具，並將其與 WebControl 控制項相關聯。這個設計工具可讓您將文字加入設計介面之可編輯的區域，您還可以將其他控制項拖曳至該區域。

• 參考 Web 網頁上的自訂控制項 (及其關聯的設計工具)。

• 在 Visual Studio 2005 的 [設計] 檢視中處理 Web 網頁。

必要條件

若要完成這個逐步解說，您必須要有：

• Visual Studio 2005，您會用其建立裝載自訂控制項及其關聯之設計工具的 Web 網頁。

• ASP.NET 網站，用於放置裝載控制項的網頁。如果您已經設定了這類的網站，即可使用該網站做為這個逐步解說的起點。否則，如需建立虛擬目錄或站台的詳細資訊，請參閱 HOW TO：在 IIS 5.0 和 6.0 中建立和設定虛擬目錄。

建立自訂控制項和設計工具

在本節中，建立三個基本 Web 伺服器控制項並為每一個 Web 伺服器控制項建立一個相關聯的自訂控制項設計工具。

若要建立程式碼的檔案

1. 在編輯器中，建立名為 SimpleControlDesigners 的新檔案，讓其副檔名適合您使用的語言。例如，在 Visual Studio 2005 中，建立名為 SimpleControlDesigners.vb 或 SimpleControlDesigners.cs 的新類別檔案。

2. 加入使用設計工具類別所需的下列命名空間參考。還要加入包含控制項和關聯之設計工具所需的命名空間。

   Imports System
   Imports System.ComponentModel
   Imports System.ComponentModel.Design
   Imports System.Drawing
   Imports System.Web.UI
   Imports System.Web.UI.Design
   Imports System.Web.UI.Design.WebControls
   Imports System.Web.UI.WebControls
   
   Namespace Samples.AspNet.VB.Controls
   End Namespace
   

   using System;
   using System.ComponentModel;
   using System.ComponentModel.Design;
   using System.Drawing;
   using System.Web.UI;
   using System.Web.UI.Design;
   using System.Web.UI.Design.WebControls;
   using System.Web.UI.WebControls;
   
   namespace Samples.AspNet.CS.Controls 
   {
   }
   

3. 儲存檔案。

現在您準備建立複合 Web 伺服器控制項及關聯的設計工具。設計工具可以與控制項位於同一個組件中，也可以位於其他組件中。在這個逐步解說中，讓您方便使用，將它們建立在同一個程式碼檔案和組件中。

若要建立複合控制項和關聯的設計工具

1. 在 SimpleControlDesigners 檔案中宣告的命名空間內，為繼承自 CompositeControl 之複合控制項類別建立公用 (Public) 宣告，如下列程式碼範例中所示。

       Public Class SimpleCompositeControl
           Inherits CompositeControl
       End Class
   

    public class SimpleCompositeControl : CompositeControl
       {
       }
   

2. 將下列程式碼範例中顯示的公用屬性加入類別。這些屬性將用於在 Web 網頁上建立部分 UI。

   Dim _prompt As String = "Please enter your date of birth: "
   Overridable Property Prompt() As String
       Get
           Dim o As Object
           o = ViewState("Prompt")
           If o Is Nothing Then
               Return _prompt
           Else
               Return CType(o, String)
           End If
       End Get
       Set(ByVal value As String)
           ViewState("Prompt") = value
       End Set
   End Property
   
   Overridable Property DOB() As DateTime
       Get
           Dim o As Object
           o = ViewState("DOB")
           If o Is Nothing Then
               Return DateTime.Now
           Else
               Return CType(o, DateTime)
           End If
       End Get
       Set(ByVal value As DateTime)
           ViewState("DOB") = value
       End Set
   End Property
   

   private String _prompt = "Please enter your date of birth: ";
   public virtual String Prompt
   {
       get
       {
           object o = ViewState["Prompt"];
           return (o == null) ? _prompt : (string)o;
       }
       set
       {
           ViewState["Prompt"] = value;
       }
   }
   
   public virtual DateTime DOB
   {
       get
       {
           object o = ViewState["DOB"];
           return (o == null) ? DateTime.Now : (DateTime)o;
       }
       set
       {
           ViewState["DOB"] = value;
       }
   }
   
   

3. 建立一個方法，以將子控制項加入複合控制項。下列方法會加入兩個文字方塊和一個分行符號，您可以在 Web 網頁上看到這些項目。

   Protected Overrides Sub CreateChildControls()
       Dim lab As New Label
   
       lab.Text = Prompt
       lab.ForeColor = System.Drawing.Color.Red
       Me.Controls.Add(lab)
   
       Dim lit As New Literal()
       lit.Text = "<br />"
       Me.Controls.Add(lit)
   
       Dim tb As New TextBox()
       tb.ID = "tb1"
       tb.Text = DOB.ToString()
       Me.Controls.Add(tb)
   
       MyBase.CreateChildControls()
   End Sub
   

   protected override void CreateChildControls() 
   {
       Label lab = new Label();
   
       lab.Text = Prompt;
       lab.ForeColor = System.Drawing.Color.Red;
       this.Controls.Add(lab);
   
       Literal lit = new Literal();
       lit.Text = "<br />";
       this.Controls.Add(lit);
   
       TextBox tb = new TextBox();
       tb.ID = "tb1";
       tb.Text = DOB.ToString();
       this.Controls.Add(tb);
   
       base.CreateChildControls();
   }
   

4. 建立衍生自 CompositeControlDesigner 的簡單複合控制項設計工具類別，以與您剛剛建立的複合控制項相關聯。

   儘管您可以將句中 UI 呈現功能加入設計工具，但是下列程式碼範例只會建立該設計工具並在基底類別中覆寫金鑰屬性，以防在設計檢視中調整控制項的大小。

   Public Class SimpleCompositeControlDesigner
       Inherits CompositeControlDesigner
       ' Set this property to prevent the designer from being resized.
       Public Overrides ReadOnly Property AllowResize() As Boolean
           Get
               Return False
           End Get
       End Property
   End Class
   

   public class SimpleCompositeControlDesigner : CompositeControlDesigner
   {
       // Set this property to prevent the designer from being resized.
       public override bool AllowResize 
       {
           get { return false; }
       }
   }
   

5. 就在複合控制項的類別宣告之上，加入與該控制項與您剛剛建立之設計工具類別關聯的 Designer 中繼資料 (Metadata) 屬性 (Attribute)，如下列程式碼範例中所示。

   <Designer(GetType(SimpleCompositeControlDesigner))> _
   Public Class SimpleCompositeControl
       Inherits CompositeControl
   

   [Designer(typeof(SimpleCompositeControlDesigner))]
   public class SimpleCompositeControl : CompositeControl
   

6. 儲存檔案。

既然已經建立自訂複合 Web 伺服器控制項和關聯的設計工具，您就可以建立衍生自第一個控制項的第二個控制項。第二個控制項與第一個控制項的唯一不同在於前者可在設計介面上調整其關聯之設計工具的大小。

若要建立可調整大小的複合控制項及其關聯的設計工具

1. 在 SimpleControlDesigners 檔案中宣告的命名空間內，為繼承自您之前建立之 SimpleCompositeControl 控制項的新複合控制項類別建立公用宣告。在下列程式碼中，示範了新的宣告。

       Public Class SimpleCompositeControl2
           Inherits SimpleCompositeControl
       End Class
   

    public class SimpleCompositeControl2 : SimpleCompositeControl
       {
       }
   

2. 將這個控制項與 CompositeControlDesigner 基底類別相關聯。

   根據預設，這個範例會為複合控制項建立可調整大小的基本設計工具。

   <Designer(GetType(CompositeControlDesigner))> _
   Public Class SimpleCompositeControl2
       Inherits SimpleCompositeControl
   End Class
   

   [Designer(typeof(CompositeControlDesigner))]
   public class SimpleCompositeControl2 : SimpleCompositeControl
   {
   }
   

3. 儲存檔案。

您建立的前兩個控制項為與複合控制項設計工具關聯的複合控制項。現在您將建立衍生自 WebControl 的簡單控制項，並將其與 ContainerControlDesigner 類別相關聯。在您想要將設計工具與單一自訂 Web 伺服器控制項關聯並在設計介面上提供單一可編輯的區域時，此種類型的設計工具將很有用。您在此處建立的自訂控制項不會實作任何實際的功能，它只是為了顯示 ContainerControlDesigner 類別的功能而存在。

注意事項：
您還可以使用複合控制項和設計工具 (諸如之前建立的那些) 提供與此相同的功能。這個範例只用於顯示您如何使用 ContainerControlDesigner 類別並將其與 WebControl 控制項相關聯。

若要建立 Web 伺服器控制項和具有可編輯區域的容器設計工具

1. 在 SimpleControlDesigners 檔案中宣告的命名空間內，為新 Web 伺服器控制項建立公用宣告，如下列程式碼範例中所示。

     Public Class SimpleContainerControl
           Inherits WebControl
           Implements INamingContainer
       End Class
   

    public class SimpleContainerControl : WebControl, INamingContainer
       {
       }
   

2. 建立容器控制項設計工具類別以與自訂控制項相關聯。實作兩個屬性：包含設計工具框架 (Frame) 之樣式的 FrameStyle 屬性和包含框架頁首文字的 FrameCaption 屬性。這些屬性會提供一個框架，以讓控制項在設計介面上可以視覺化方式呈現和選取。設計工具和屬性的程式碼會顯示在下列程式碼範例中。

   注意事項：
   ContainerControlDesigner 類別會自動呈現所有其他方面：在設計階段呈現控制項和提供可編緝的單一區域。

   Public Class SimpleContainerControlDesigner
       Inherits ContainerControlDesigner
   
       Dim _style As Style
   
       ' Add the caption by default.
       Public Overrides ReadOnly Property FrameCaption() As String
           Get
               Return "A Simple ContainerControlDesigner"
           End Get
       End Property
   
       Public Overrides ReadOnly Property Framestyle() As Style
           Get
               If _style Is Nothing Then
                   _style = New Style()
                   _style.Font.Name = "Verdana"
                   _style.Font.Size = New FontUnit("XSmall")
                   _style.BackColor = Color.LightBlue
                   _style.ForeColor = Color.Black
               End If
   
               Return _style
           End Get
       End Property
   
   End Class
   

   public class SimpleContainerControlDesigner : ContainerControlDesigner
   {
       private Style _style = null;
   
       // Add the caption by default. Note that the caption 
       // will only appear if the Web server control 
       // allows child controls rather than properties. 
       public override string FrameCaption
       {
           get
           {
               return "A Simple ContainerControlDesigner";
           }
       }
   
       public override Style FrameStyle
       {
           get
           {
               if (_style == null)
               {
                   _style = new Style ();
                   _style.Font.Name = "Verdana";
                   _style.Font.Size = new FontUnit ("XSmall");
                   _style.BackColor = Color.LightBlue;
                   _style.ForeColor = Color.Black;
               }
   
               return _style;
           }
       }
   }
   

3. 將設計工具與控制項相關聯。就在 Web 伺服器控制項的類別宣告之上，加入 Designer 中繼資料屬性。請注意，在這種情況下，您還要加入具有 false 參數的 ParseChildren 屬性，如下列程式碼範例中所示。這會讓設計階段剖析器 (Parser) 將控制項的內部內容視為子控制項而非屬性。在這種情況下，您要將這個控制項的內部內容視為子控制項，如此您可以在設計階段真正地將其他伺服器控制項拖曳至可編輯的區域中，並可以編輯其屬性。

   <Designer(GetType(SimpleContainerControlDesigner))> _
   <ParseChildren(False)> _
   Public Class SimpleContainerControl
       Inherits WebControl
       Implements INamingContainer
   End Class
   

   [Designer (typeof(SimpleContainerControlDesigner))]
   [ParseChildren (false)]
   public class SimpleContainerControl : WebControl, INamingContainer
   {
   }
   

4. 儲存檔案。

您已建立三個自訂控制項和將控制項設計工具與它們相關聯。所有保留的項目都會將控制項編譯為組件，然後在視覺化設計工具中使用它們。

若要編譯自訂控制項和設計工具

1. 開啟命令提示字元以找到建立 SimpleControlDesigners 檔案的資料夾。從此提示字元，您可以將原始程式碼編譯為組件。

   注意事項：
   若要從這個位置執行 .NET Framework 編譯器，則您必須已將 .NET Framework 安裝的路徑加入電腦的 PATH 變數中。通常，這個路徑都位於 Windows 安裝目錄 \Microsoft.NET\Framework\<version number> 下。如果您尚未更新 PATH 變數，請以滑鼠右鍵按一下 [我的電腦]，選取 [內容]，並依序按一下 [進階] 索引標籤和 [環境變數] 按鈕。在 [系統變數] 清單中，按兩下 PATH 變數。在 [變數值] 文字方塊中，將分號加在文字方塊中現有值的結尾，然後輸入 .NET Framework 安裝的路徑。按一下 [確定] 關閉每個對話方塊。

2. 使用下列編譯命令，將 SimpleControlDesigners 檔案中的控制項編譯為組件。

   csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersCS.dll simplecontroldesigners.cs
   

   vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersVB.dll SimpleControlDesigners.vb
   

3. 為您要裝載控制項的網頁將結果組件檔移至網站的 \Bin 資料夾。

   注意事項：
   對於想要編譯控制項和設計工具的 Visual Studio 使用者必須在 System.Design.dll 中加入參考。如需詳細資訊，請參閱 HOW TO：加入參考至網站中的 .NET 或 COM 元件。

建立裝載控制項的 Web 網頁

既然使用自訂控制項及其關聯控制項設計工具建立了組件，您便會在 Visual Studio 2005 中建立 Web 網頁以參考控制項，查看這些控制項如何出現在 [設計] 檢視中，並在瀏覽器中載入網頁。

若要建立裝載控制項的 Web 網頁

1. 在 Visual Studio 2005 中開啟網站，可以建立稱為 ControlDesigners.aspx 的新網頁。在網頁頂端，就在網頁宣告之下，加入 Register 指示詞以參考您之前建立的組件和控制項，如下列程式碼範例中所示。

   <%@ Page Language="VB" %>
   <%@ register tagprefix="aspSample" 
     assembly="SimpleControlDesignersVB" 
     namespace="Samples.AspNet.VB.Controls" %>
   

   <%@ Page Language="C#" %>
   <%@ register tagprefix="aspSample" 
     assembly="SimpleControlDesignersCS" 
     namespace="Samples.AspNet.CS.Controls" %>
   

2. 如下列程式碼範例中所示，完成網頁的其餘部分，以參考您先前建立之三個控制項中的任何一個：SimpleCompositeControl、SimpleCompositeControl2 和 SimpleContainerControl。請注意，若要參考每個控制項，您可以使用 Register 指示詞中指定的 aspSample 前置詞。

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" >
   <head >
       <title>Designers Page</title>
   </head>
   <body>
       <form id="form1" >
       <div>
           <p style="font-family:tahoma;font-size:large;
               font-weight:bold">
               Simple Control Designers
           </p>
           <div style="font-family:tahoma;font-size:x-small;">
               <span style="font-size: 14pt">
               Composite, no-resize</span>
           </div>
           <aspSample:SimpleCompositeControl id="SimpleControl1"  />
           <br /><br />
           <div style="font-family:tahoma;font-size:x-small;">
               <span style="font-size: 14pt">
               Composite, resize</span>
           </div>
           <aspSample:SimpleCompositeControl2 id="SimpleControl2"   
               height="87px" width="238px" />
           <br /><br />
           <div style="font-family:tahoma;font-size:x-small;">
               <span style="font-size: 14pt">
                   Container</span>
           </div>
           <aspSample:SimpleContainerControl id="SimpleControl3"  
               height="57px">
               Type some content here.
           </aspSample:SimpleContainerControl>
           <br /><br />
       </div>
       </form>
   </body>
   </html>
   

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" >
   <head >
       <title>Designers Page</title>
   </head>
   <body>
       <form id="form1" >
       <div>
           <p style="font-family:tahoma;font-size:large;
               font-weight:bold">
               Simple Control Designers
           </p>
           <div style="font-family:tahoma;font-size:x-small;">
               <span style="font-size: 14pt">
               Composite, no-resize</span>
           </div>
           <aspSample:SimpleCompositeControl id="SimpleControl1"  />
           <br /><br />
           <div style="font-family:tahoma;font-size:x-small;">
               <span style="font-size: 14pt">
               Composite, resize</span>
           </div>
           <aspSample:SimpleCompositeControl2 id="SimpleControl2"   
               height="87px" width="238px" />
           <br /><br />
           <div style="font-family:tahoma;font-size:x-small;">
               <span style="font-size: 14pt">
                   Container</span>
           </div>
           <aspSample:SimpleContainerControl id="SimpleControl3"  
               height="57px">
               Type some content here.
           </aspSample:SimpleContainerControl>
           <br /><br />
       </div>
       </form>
   </body>
   </html>
   

3. 儲存 Web 網頁。

現在您可以在 [設計] 檢視中測試網頁以查看控制項設計工具如何運作。

若要示範控制項的設計階段呈現

1. 切換至網頁的 [設計] 檢視。

   控制項應該與它們在下列螢幕擷取畫面中所顯示的一樣。請注意，第二個複合控制項可調整大小，而第一個不可以。

   [設計] 檢視中的 ControlDesigners.aspx 網頁
   

2. 按一下容器控制項的內容區域，並輸入控制項的部分文字內容。

3. 切換至 [來源] 檢視，並搜尋原始程式碼的容器控制項。確認您在區域中所輸入的文字現在出現在原始程式碼中。

4. 切換回 [設計] 檢視。

5. 按一下控制項的框架、將滑鼠指標放置在其中一個可調整大小的圖示上，並調整容器控制項的大小。

6. 在文字內容的結尾按一下控制項的可編輯區域，並按 ENTER 加入分行符號。

7. 將 Button 控制項從 [工具箱] 拖曳至您輸入之文字下的可編輯區域。將 Label 控制項從 [工具箱] 拖曳至按鈕旁邊。這說明您可以將子控制項拖曳至可編緝的區域。如果您願意，可以在設計階段設定子控制項上的屬性，並且可以在執行階段加入 Button 控制項的程式碼以更新 Label 控制項的 Text 屬性。

   具有您剛剛加入之控制項的網頁應該看起來與下列螢幕擷取畫面類似。

   具有子控制項的容器控制項
   

8. 儲存 Web 網頁。

若要在執行階段檢視網頁

• 將網頁載入瀏覽器。

  控制項應該與它們在 [設計] 檢視中自訂時所顯示的一樣。您的網頁應該看起來與下列螢幕擷取畫面類似。

  完整的控制項設計工具 Web 網頁
  

後續步驟

這個逐步解說示範了建立與複合或容器控制項設計工具關聯之自訂控制項中涉及的基本工作。您建立自訂控制項所使用的設計工具可讓您調整控制項的大小，並可在 Visual Studio 2005 之設計檢視中的可編輯區域中加入文字。另外，建議您再深入研究的重點包括：

• 檢查控制項設計工具所具有的其他強大新功能。如需詳細資訊，請參閱 ASP.NET 控制項設計工具概觀。

• 嘗試建立進階設計工具案例，在這些案例中，您會建立特定的設計階段呈現並利用功能，例如，動作清單。如需詳細資訊，請參閱包含動作清單和服務的範例控制項設計工具。

請參閱

概念

ASP.NET 控制項設計工具概觀