試試看:建立 WPF 使用者控制項

本頁僅適用 WPF 專案

如果想要設計可以新增至畫板的可重複使用元件 (就和系統控制項一樣),則可以在 Microsoft Expression Blend 中建立使用者控制項。使用者控制項可以包含其他控制項、資源和動畫時間軸,與 Windows Presentation Foundation (WPF) 應用程式相同。唯一的差異在於使用者控制項的根元素是 [UserControl],而不是 [Window] 或 [Page]。

下列程序顯示如何建立含有一些動畫的使用者控制項,以及如何在另一份文件中具現化該使用者控制項。(如需透過撰寫程式碼並根據現有系統控制項來建立自訂控制項的範例,請參閱試試看:建立自訂的 WPF 控制項)。

您可以在 Expression Blend 隨附的範例中找到更多使用者控制項範例。在 [說明] 功能表中,按一下 [歡迎畫面],並選取 [範例] 索引標籤,然後按一下範例名稱 (如 [SmoothBlends])。如需有關使用者控制項 (XAML 及程式碼範例) 的詳細資訊,請參閱 MSDN 文件庫Windows Presentation Foundation 一節的控制項製作概觀 (英文)。

Cc294992.alert_note(zh-tw,Expression.10).gif注意事項:

Microsoft Silverlight 1.0 不支援使用者控制項。不過,您可以建立能以程式設計方式具現化的自訂 JavaScript 類別。其中一個例子就是可從 [歡迎畫面] 的 [範例] 索引標籤 (位於 [說明] 功能表上) 使用的 [ButtonGallery] 範例中的 [按鈕] 類別。

Silverlight 2 支援使用者控制項。如需詳細資訊,請參閱在 Silverlight 2 專案中建立新的使用者控制項

定義使用者控制項

  1. 在 Expression Blend 中執行下列一項動作:

    • 若要在 .dll 檔案中建立使用者控制項,請按一下 [檔案] 功能表上的 [新增專案],選取 [WPF 控制項程式庫] 專案類型並提供專案名稱,接著選取主文件的程式碼後置檔案語言,然後按一下 [確定]。將使用者控制項提供給其他人時,希望隱藏該使用者控制項的實作,或是在其他程式中繪製使用者控制項時,想要建立範本以變更使用者控制項的外觀,請使用此選項。

    • 若要在現有專案的 .xaml 檔案中建立使用者控制項,請按一下 [檔案] 功能表上的 [新增項目] (CTRL+N),選取 [UserControl] 範本並提供檔案名稱,然後按一下 [確定]。這個選項會比較容易變更,因為您的使用者控制項與它的使用位置是同一個專案。因此,您可以略過將參照更新為 .dll 的步驟。

    Expression Blend 會開啟使用者控制項供您進行編輯。

  2. 決定您想用於根元素的面板類型。根據預設,會使用名稱為 [LayoutRoot] 的 [格線],此項目可以在於另一份文件中繪製使用者控制項時調整任何動畫的大小。您可以將此項目變更為 [畫布] 或其他面板控制項,方法是以滑鼠右鍵按一下 [物件與時間軸] 之下的 [LayoutRoot] 元素,並指向 [變更版面配置類型],然後按一下面板名稱。

  3. 從 [工具箱] 中,選取使用者控制項中需要的控制項及繪圖工具,並在畫板上加以繪製。請使用 [屬性] 面板中的屬性來修改它們。使用者控制項可以包含 WPF 應用程式所包含的任何項目。

  4. 在 [物件與時間軸] 之下,建立想要的任何動畫時間軸。如需範例,請參閱建立簡單動畫

    Cc294992.alert_note(zh-tw,Expression.10).gif注意事項:

    設定主要畫面格時,請考慮應用程式中所有動畫的時間,以及使用者控制項中動畫的執行時間。例如,假設有個應用程式會先以動畫顯示開頭顯示畫面,再以動畫淡入顯示使用者介面。您可以將每個動畫各置於一個使用者控制項中,但是在第二個動畫的開頭保留足夠的時間,讓開頭顯示畫面動畫完成。

    Cc294992.alert_tip(zh-tw,Expression.10).gif秘訣:

    如果要讓動畫可以重複執行多次,請在 0 秒標記上設定主要畫面格。例如,如果您建立的動畫時間軸可將物件從左到右移動,且是由按兩下滑鼠所觸發,但您卻未在 0 秒標記設定主要畫面格。後續按兩下滑鼠的動作不會執行多次動畫,因為它是遞移式動畫。如需有關遞移式動畫的詳細資訊,請參閱動畫概觀中的「使用多個及重疊的動畫時間軸」。

  5. 在 [觸發程序] 之下,設定任何讓應用程式回應使用者互動的屬性或事件觸發程序。如需範例,請參閱新增或移除觸發程序

    Cc294992.alert_note(zh-tw,Expression.10).gif注意事項:

    決定想要在使用者控制項中設定的觸發程序時,請考慮想要用於使用者控制項的所有屬性及觸發程序。例如,假設有個應用程式含有一個按鈕,以及一個包含在使用者控制項中的動畫。在 Expression Blend 中,除非按鈕也是使用者控制項的一部分,否則您無法將按一下按鈕時會啟動動畫時間軸的觸發程序新增至使用者控制項。此外,只有在兩個屬性都是位在相同使用者控制項中,才能在這兩個屬性值之間進行資料繫結。您可以利用程式碼後置檔案以程式設計方式來解決此問題,而在將使用者控制項新增至文件之後,建立具有該使用者控制項之觸發程序及動畫時間軸的範本,也可以解決此問題。如需含程式碼後置檔案的使用者控制項範例,請參閱 MSDN 文件庫Windows Presentation Foundation 一節的控制項製作概觀 (英文)。如需有關如何從 Expression Blend 修改程式碼後置檔案的詳細資訊,請參閱編輯程式碼後置檔案

  6. 當您建立好使用者控制項時,請一定要變更文件的根元素大小,使其符合您所需的大小。在 [物件與時間軸] 之下,選取文件根目錄,然後使用 [選取] Cc294992.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-tw,Expression.10).png 工具,利用畫板上的藍色提示來調整文件視窗大小。

  7. 如果使用者控制項是取決於使用者控制項中空白區域的按一下滑鼠動作或互動,則需要將根元素背景設定為實心筆刷,這樣當使用者控制項在新增至另一份文件時,就會使用畫板上的空白處。在 [屬性] 面板的 [筆刷] 類別中,將根元素的 [Background] 屬性變更為 [單色筆刷] Cc294992.3a66ec96-47bb-47fc-8876-6b9456feec3a(zh-tw,Expression.10).png。如果想要隱藏背景,請將 Alpha 子屬性變更為 0。

  8. 如果使用者控制項取決於特定高度或寬度,請在 [屬性] 面板的 [版面配置] 類別中,設定 [進階] Cc294992.81e110f1-4068-4299-957d-0693cea95088(zh-tw,Expression.10).png 區段的 [MinHeight] 及 [MinWidth] 屬性。

  9. 如果想要在文件中繪製使用者控制項時調整大小,請確定使用者控制項中所有物件的 [Width] 及 [Height] 屬性都重設為 [Auto]。

  10. 按一下 [檔案] 功能表上的 [全部儲存],以儲存檔案及專案。

  11. 如果專案是控制項程式庫,請按一下 [專案] 功能表上的 [建置專案] (CTRL+SHIFT+B),以建置專案來建立 .dll 檔案。.dll 檔案會建置並儲存在與專案相同位置的 \bin\Debug 資料夾中。

Cc294992.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

在另一份文件中具現化使用者控制項

  1. 如果已建立 [控制項程式庫],請在想要使用使用者控制項的專案中新增 .dll 參照。在 [專案] 功能表上,按一下 [新增參照],然後在 [新增參照] 視窗中瀏覽至使用者控制項的 .dll 檔案,再按一下 [開啟]。

  2. 建置目前專案 (CTRL+SHIFT+B),這樣才可以在 [資產庫] 中選取該使用者控制項。

  3. 從 [資產庫] Cc294992.0224cabd-5da1-4e01-bddd-4a647401a098(zh-tw,Expression.10).png 的 [自訂控制項] 索引標籤中,選取您的使用者控制項。[資產庫] 按鈕上方會顯示已經選取之使用者控制項的圖示。

  4. 使用滑鼠,在畫板上繪製使用者控制項。

  5. 測試專案 (F5) 以查看使用中的使用者控制項。

Cc294992.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

將使用者控制項新增至另一份文件之後進行編輯

如果建立的是使用者控制項文件,而不是控制項程式庫 (.dll),則可以使用快顯功能表進入控制項的編輯模式。

  1. 在畫板或 [物件與時間軸] 下,以滑鼠右鍵按一下使用者控制項,然後按一下 [編輯控制項]。Expression Blend 會開啟使用者控制項文件供您進行編輯。

  2. 進行變更之後,請儲存檔案,然後切換回主文件。

如果已在控制項程式庫專案中建立使用者控制項,則需要編輯原始控制項程式庫專案,然後重新建置 .dll。

Cc294992.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首