包含動作清單和服務的範例控制項設計工具

更新：2007 年 11 月

下列主題將說明使用具有服務和動作清單之 ASP.NET 控制項設計工具，為自訂伺服器控制項提供設計階段使用者介面 (UI) 的範例。

下列各節包含了示範如何建立和使用自訂伺服器控制項之 ASP.NET 控制項設計工具的範例程式碼。具體而言，這個主題 (連同下面列出的相關範例程式碼主題) 會顯示下列使用設計工具所涉及的功能和工作：

建立使用設計工具主機服務和動作清單的設計工具。
將設計工具與自訂控制項相關聯。
將控制項及其關聯的設計工具編譯為組件。
參考 Web 網頁上的控制項。
在 Visual Studio 2005 設計檢視中使用控制項設計工具。

設計工具的範例程式碼有兩個版本：一個是以 Visual Basic 撰寫，另一個是以 C# 撰寫。範例說明使用主機服務和動作清單的自訂控制項設計工具。您可以在主題 HOW TO：以控制項設計工具使用服務和動作清單中找到範例程式碼。程式碼範例中有四個自訂控制項，所有的控制項都很簡單，只是為了說明設計工具的用法而建立的。其中的三個自訂控制項衍生自 Panel 類別，第四個是自訂 Button 控制項。原始程式碼中的每個面板控制項也都具有關聯的自訂設計工具控制項。這些設計工具使用服務以讓控制項與主機環境 (例如，Visual Studio 2005) 進行互動。在視覺化設計環境 (在 Visual Studio 2005 中為 [設計] 檢視) 中，這些設計工具會提供程式碼，讓您建立具有設定控制項之各種工作的設計階段功能表。

編譯範例

Visual Basic 範例和 C# 範例具有相同的功能，因此您可以選擇您想要之程式語言的範例。

若要使用您想要的範例，可以將其做為程式庫進行編譯，並將結果組件置於 Web 應用程式的 Bin 目錄中。

在下列程式碼範例中，示範了從命令提示字元編譯範例的方法。

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

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

編譯該範例後，請記得複製結果 DesignerServicesAndListsVB.dll 或 DesignerServicesAndListsCS.dll 檔至網站的 Bin 資料夾。

必要 XML 檔

除了具有控制項和設計工具的組件之外，該範例還依賴於三個不同的 XML 檔。這些 XML 檔案包含基本樣式資訊，示範設計工具可以何種方式使用主機環境所提供的服務。在這種情況下，設計工具會在設計階段以動態方式從 XML 檔載入樣式資料，並使用該資料變更設計介面上控制項的外觀。這個範例示範如何使用設計工具主機服務，而不是做為實作樣式定義的建議。

這個範例的 XML 檔與您要裝載控制項之 ASP.NET Web 網頁位於相同的資料夾。檔案的內容 RedStyle.xml、BlueStyle.xml 和 GreenStyle.xml 提供如下。

RedStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="red"></style>
    <style name="ForeColor" value="white"></style>
</styles>

BlueStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="blue"></style>
    <style name="ForeColor" value="white"></style>
</styles>

GreenStyle.xml

<?xml version="1.0" encoding="utf-8" ?>
<styles>
    <style name="BackColor" value="green"></style>
    <style name="ForeColor" value="white"></style>
</styles>

在 ASP.NET Web 網頁中使用範例控制項和設計工具

若要使用範例控制項和設計工具，您必須將控制項置於您可在設計工具 (例如，Visual Studio 2005) 中使用的 ASP.NET Web 網頁。對於這個範例，您必須在 Visual Studio 2005 中將 ASP.NET Web 網頁加入您的網站。首先，建立新的 Web 網頁。然後，在 [來源] 檢視中，刪除預設網頁內容，並加入下列程式碼範例中顯示的 Page 和 Register 指示詞。

<%@ page language="VB" %>
<%@ register tagprefix="aspSample" 
    assembly="DesignerServicesAndListsVB" 
    namespace="Samples.AspNet.VB.Controls" %>

<%@ page language="C#" %>
<%@ register tagprefix="aspSample" 
    assembly="DesignerServicesAndListsCS" 
    namespace="Samples.AspNet.CS.Controls" %>

注意事項：
Visual Basic 和 C# 指示詞的唯一差別在於，Page 指示詞中的語言屬性以及 Register 指示詞中組件名稱的副檔名。

您還必須複製 Register 指示詞下的下列標記程式碼 (無論您使用的是 Visual Basic 還是 C#，這段程式碼的內容都一樣)。

<!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 id="Head1" >
    <title>Designer Samples</title>
</head>
<body>
  <form id="form1" >
      <p style="font-family:tahoma;font-size:larger;
      font-weight:bold">
        Using Action Lists and Designer Host Services</p>
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #1 (ControlWithStyleTasksDesigner):
        PanelContainerDesigner using a DesignerActionList, which
        obtains a list of XML files in the project and sets 
        the style using the XML element
        definitions.</span><p />
      </div>
      <aspSample:ControlWithStyleTasks id="ctl1" 
         
        backcolor="Red" forecolor="White">
          Hello there.</aspSample:ControlWithStyleTasks>
      <br />
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #2 (ControlWithConfigurationSettingDesigner):
        PanelContainerDesigner using configuration settings
        to obtain 
        the FrameCaption value.</span><p />
      </div>
      <aspSample:ControlWithConfigurationSetting 
        id="ctl2" >
        Hello There
      </aspSample:ControlWithConfigurationSetting>
      <br />
      <div style="font-family:tahoma;font-size:x-small">
        <span style="font-size: 10pt">Control #3 (ControlWithButtonTasksDesigner):
        PanelContainerDesigner using a smart-task action 
        item to insert a new button on the Web Forms page.</span><p />
      </div>
      <aspSample:ControlWithButtonTasks 
        id="ctl3" >
        Hello There
      </aspSample:ControlWithButtonTasks>
      &nbsp; &nbsp;
  </form>
</body>
</html>

範例的組態設定

這個範例的其中一個設計工具使用組態檔項目，以動態方式顯示其中一個自訂控制項上 [設計] 檢視的標題。您必須開啟網站的 Web.config 檔，或者其不存在時建立一個 Web.config 檔，並將索引鍵加入 <appSettings> 項目，如下列程式碼範例中所示。

<appSettings>
  <add key="ContainerControlTitle" value="Title from Config File"/>
</appSettings>

在 Visual Studio 2005 中測試控制項設計工具

將已編譯的組件 .dll 檔加入網站的 Bin 資料夾、加入 XML 檔、加入具有在其上參考之自訂控制項的裝載頁面並在 Web.config 檔中建立項目後，您可以在設計工具中使用控制項。請確定已在 Visual Studio 2005 之 [設計] 檢視中開啟該網頁。請注意，網頁上有三個面板控制項。如果您按一下控制項，則會顯示您可以編輯的區域。

測試設計工具服務和動作清單

您可以藉由將滑鼠指標放置在控制項的右上角，然後按一下動作清單按鈕，以測試第一個控制項的設計工具。下列螢幕擷取畫面顯示已顯示動作清單的控制項。

已顯示動作清單的控制項

您可以在動作清單上的 [設定 XML] 文字方塊中，從之前建立的 XML 檔中選取。選取其中一個現有的 XML 檔就會以該 XML 檔的樣式資訊，更新設計階段樣式的控制項。您可以使用其他 XML 檔的名稱嘗試相同的技術。

按一下第三個控制項的動作清單按鈕所顯示的動作清單，與下列螢幕擷取畫面顯中顯示的相同。

第三個控制項動作清單

[加入按鈕] 命令將 Button 控制項加入設計階段檢視。[加入自訂按鈕] 命令將自訂按鈕控制項的執行個體加入網頁。

測試設計工具服務和可編輯的區域

第二個控制項會顯示標題 [從 Config 加入的標題]。設計工具使用設計工具服務從 Web.config 檔擷取這個設定，並將其加入設計階段檢視中。

該控制項還顯示控制項上可編輯的區域。您可以按一下可編輯的區域以輸入新的內容，然後內容會自動保存到網頁的原始程式碼中。

請參閱

工作

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

HOW TO：以控制項設計工具使用服務和動作清單

概念

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

Last updated on 2014-10-22

共用方式為