試試看：建立自訂的 WPF 控制項

Microsoft Expression Blend 提供了一些不同的系統控制項及簡單樣式，供您在 Windows Presentation Foundation (WPF) 應用程式中使用。不過，如果這些控制項或樣式不符合您的特定需求，您可以建立自訂控制項，方法便是建立繼承自其中一個 System.Windows.Controls 類別的 Microsoft .NET 類別。

注意事項：
本主題包含 Windows Presentation Foundation 應用程式的資訊。如需有關 Microsoft Silverlight 1.0 的詳細資訊，請參閱 Silverlight 1.0 概觀和 Silverlight 學習中心 (英文)。亦請參閱 Expression Blend 2 所附的 Silverlight 1.0 範例，其中有一些會使用 JavaScript 類別定義可重複使用的物件。在 [說明] 功能表上，按一下 [歡迎畫面]，然後選取 [範例] 索引標籤。[MagnifyingGlass]、[ButtonGallery] 以及 [BlendPlayer] 範例均是 Silverlight 1.0 範例。

下列程序顯示如何建立能夠包括新屬性來保留影像檔路徑 (用以顯示影像) 的自訂按鈕控制項(如需在不使用程式碼情況下 (因此沒有自訂屬性) 建立使用者控制項的範例，請參閱試試看：建立 WPF 使用者控制項)。

如需有關自訂控制項 (包括 XAML 及程式碼範例) 的詳細資訊，請參閱 MSDN 文件庫之 Windows Presentation Foundation 一節的控制項製作概觀及 DependencyProperty 類別 (英文)。

定義自訂控制項

1. 在 [專案] 面板中，找到並展開 [Window1.xaml] 檔案，以顯示專案的程式碼後置檔案 (名為 [Window1.xaml.cs])。(如果選擇 Microsoft Visual Basic 作為用來建立專案的語言，則程式碼後置檔案的名稱會是 [Window1.xaml.vb])。按兩下程式碼後置檔案即可開啟該檔案進行編輯。

   注意事項：
   如果已安裝 Microsoft Visual Studio 2008，便會用以開啟程式碼後置檔案。否則，會使用與程式碼後置檔案副檔名對應的應用程式來開啟程式碼後置檔案。例如，如果您已在記事本中開啟過 .cs 或 .vb 檔案，則 Expression Blend 就會使用記事本開啟該檔案。如需協助開啟程式碼後置檔案，請參閱編輯程式碼後置檔案。

2. 在 Window1.xaml.cs 檔案中，將下列類別定義原始程式碼貼在檔案的最後一個結尾大括號 (}) 的正前方。(如果是 Visual Basic，則請在 [End Namespace] 的正前方或最後一個 [End Class] 的正後方貼上適當的程式碼)。

   public class ImageButton : Button 
   { 
     public ImageSource Source 
     { 
       get { return base.GetValue(SourceProperty) as ImageSource; } 
       set { base.SetValue(SourceProperty, value); } 
     } 
     public static readonly DependencyProperty SourceProperty = 
       DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton)); 
   }
   

   Class ImageButton
     Inherits Button
     Public Property Source() As ImageSource
       Get
         Return CType(MyBase.GetValue(SourceProperty), ImageSource)
       End Get
       Set(ByVal value As ImageSource)
         MyBase.SetValue(SourceProperty, value)
       End Set
     End Property
     Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton))
   End Class
   

3. 儲存修改過的程式碼後置檔案，然後關閉 Visual Studio 或任何您用來編輯檔案的應用程式。

   秘訣：
   [ImageButton] 類別可示範相依性屬性樣式。從外部來看，此類別會公開名為 [Source] 且類型為 [ImageSource] 的一般 Common Language Runtime (CLR，即 .NET) 屬性。此類別也會登錄及公開名為 [SourceProperty] 的唯讀相依性屬性欄位，以及根據相依性屬性來實作 [Source] 屬性的 CLR 存取子。支援具有已登錄相依性屬性的 CLR 屬性，表示 WPF 可以將大量服務提供給您的屬性。這些服務包括樣式、資料繫結、值繼承、預設值及動畫。WPF 也有稱為範本繫結的功能，可用以繫結至控制項範本內的屬性值。此教學課程會顯示進行中的範本繫結。

   秘訣：
   如果您偏好將自訂控制項類別定義原始程式碼保留在不同的原始程式碼檔案中，就可以這麼做。如果不想使用前兩個步驟，您可以建立一個名為 [ImageButton.cs] 的新檔案，並將原始程式碼連同命名空間宣告以及文件程式碼後置檔案中的同一組 using 指示詞一起貼到此檔案中，然後將此新檔案新增至專案中 (在 [專案] 功能表上，按一下 [新增項目])。

4. 您現在必須建置專案，新的 [ImageButton] 控制項才會出現在 [資產庫] 中。請在 Expression Blend 的 [專案] 功能表上，按一下 [建置專案] (或按下 CTRL+SHIFT+B)。請確定建置作業已完成，並且未發生錯誤。

5. 在 Expression Blend 中，切換回編輯 [Window1.xaml]。

6. 在 Expression Blend 左側的 [工具箱] 中，按一下 [資產庫] 按鈕 。

   如此會開啟 [資產庫] 以顯示所有您可以放在文件中的控制項、面板及元素。

7. 從 [自訂控制項] 索引標籤的清單中，選取 [ImageButton] 控制項。

   [資產庫] 按鈕上方的 [工具箱] 圖示現在會設定為 [ImageButton] 控制項，而且也會選取此控制項，讓您可以在畫板上繪製此控制項。

   注意事項：
   除非您已將原始程式碼新增至專案，並且已執行建置 (CTRL+SHIFT+B)，否則自訂控制項不會出現在 [資產庫] 的 [自訂控制項] 索引標籤中。

8. 如果已在 [工具箱] 中選取 [ImageButton] 圖示，請按一下畫板並在文件內繪製週框方塊，以繪製 [ImageButton]。

   [ImageButton] 會呈現在畫板上，而且在 [互動] 面板的 [物件與時間軸] 下名為 [ImageButton] "ImageButton" 的 [ImageButton] 元素會列為 [LayoutRoot] 的子元素。

回到頁首

修改自訂控制項樣式

1. 若要建立所有 [ImageButton] 元素的控制項範本，請以滑鼠右鍵按一下新的 [ImageButton]，再按一下 [編輯控制項組件 (範本)]，然後按一下 [編輯複本]。

   [建立樣式資源] 對話方塊會隨即顯示。

2. 在 [建立樣式資源] 對話方塊的 [資源名稱 (索引碼)] 欄位中，於第一個選項按鈕旁的文字方塊中輸入 [ImageButtonStyle]。

   如此會在資源字典中設定您的範本名稱，讓您可以將該範本設定為任何 [ImageButton] 元素的範本。

   注意事項：
   控制項範本是包裝在樣式內，因此套用至控制項的樣式，會同時包括控制項的外觀 (組件) 及行為。

3. 在 [定義於] 欄位中，選取 [此文件] 選項按鈕，並確定已選取下拉式清單中的 [Window: Window]。

   [定義於] 欄位會指出要在其中定義新範本的資源字典。選取 [Window: Window] 表示視窗中的所有 [ImageButton] 控制項都可以看到此範本。

4. 按一下 [確定]。

   您現在已複製所有 [ImageButton] 元素的預設控制項範本，而且已將該複本儲存為名為 [ImageButtonStyle] 的新 [ControlTemplate]。新的範本已置於資源字典中，您可以在 [資源] 面板的 [Window] 節點中檢視。

   使用建立的新範本，Expression Blend 會進入您可以檢視和編輯新範本的模式。在 [互動] 面板的 [物件與時間軸] 下，新元素樹狀目錄上方的 [範本] 該字會指出您目前正在編輯的範圍。此範本包括 [ContentPresenter] 元素，而該元素會自動顯示使用此範本之 [ImageButton] 的 Content 屬性值。

   秘訣：
   若要結束範本編輯模式並返回您的文件範圍，請在 [ImageButtonStyle] 這個字旁的元素樹狀目錄上方，按一下 [選定範圍] 按鈕 。 若要返回現有範本的範本編輯模式，請在 [互動] 面板的 [物件與時間軸] 下以滑鼠右鍵按一下您想要編輯其範本的元素 (在此情況下，是 [ImageButton] "ImageButton" 元素)，並按一下 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。

5. 在 [物件與時間軸] 下，以滑鼠右鍵按一下 [ContentPresenter] 物件，並指向 [群組置入]，然後按一下 [格線]。

   [ContentPresenter] 物件現在已是新 [格線] 物件之子元素。由於鉻液態金屬物件只能包含一個子元素，所以如果沒有格線物件，您就無法將第二個子元素新增至範本。

6. 如果已在 [物件與時間軸] 下選取 [格線] 物件，請在 [屬性] 面板的 [版面配置] 類別中找出 [Width] 及 [Height] 屬性。按一下每個屬性旁邊的 [進階屬性選項] 按鈕，然後按一下 [重設]。

7. 若要將格線分割成兩欄，按兩下 [物件與時間軸] 下的格線物件以啟動格線，然後在 [工具箱] 中選取 [選取] 工具 ，將滑鼠指標移至畫板上 [格線] 頂端的深藍色尺規區域。滑鼠指標後面會接著橘色欄尺規，以指出用按一下方式放置新欄分隔線的位置。

   按一下以在 [格線] 中間建立新的欄分隔線。

   [格線] 內就會出現藍色的欄分隔線。

8. 從 [資產庫] 的 [控制項] 索引標籤，選取 [影像] 工具 (選取 [全部顯示] 核取方塊)。如果 Grid 元素在 [互動] 面板的 [物件與時間軸] 下仍為啟動狀態，請在 [Grid] 的右欄內繪製新的 [Image]。

9. 如果已在 [物件與時間軸] 下選取新的 [Image] 元素，請查看 [屬性] 面板中的 [一般屬性]。按一下 [Source] 屬性右側的 [進階屬性選項] 按鈕 ，指向 [範本繫結]，然後按一下 [Source]。

   您剛才已透過範本繫結方式，將 [Image] 的 [Source] 屬性繫結至使用此範本之 [ImageButton] 的 [Source] 屬性。

10. 您現在已完成範本的編輯。若要跳至根元素的範圍，請按一下 [物件與時間軸] 之下的 [選定範圍]。

11. 如果已在 [物件與時間軸] 下選取 [ImageButton]，請在 [屬性] 面板的 [雜項] 類別中找到 [Source] 屬性，並將它設定為您電腦上的影像檔路徑。

    此影像會顯示在 [ImageButton] 控制項的右側。

回到頁首

將樣式套用至另一個自訂控制項

1. 從 [資產庫] 的 [自訂控制項] 索引標籤，選取 [ImageButton] 控制項。請在畫板上繪製新的 [ImageButton] 控制項。

2. 以滑鼠右鍵按一下新的 [ImageButton]，並依序按一下 [編輯控制項組件 (範本)]、[套用資源] 及樣式的名稱 (ImageButtonStyle)。

   [ImageButtonStyle] 已套用至新的 [ImageButton] 控制項。在 [屬性] 面板的 [雜項] 類別中找到 [Source] 屬性，並將它設定為您電腦上的影像檔路徑。

   注意事項：
   您也可以將 [ImageButton] 新增至已使用範本設定樣式的畫板中。請從 [資產庫] 的 [本機樣式] 索引標籤中選取 [ImageButtonStyle]，然後在畫板上繪製具有樣式的 [ImageButton]。

回到頁首

進階：套用自訂屬性的描述

1. 在程式碼後置檔案 (Window1.xaml.cs) 的頂端，新增 System.ComponentModel 命名空間的參照。

   下面要使用的 Description 及 Category 屬性是定義在該命名空間中。

2. 在類別定義前貼上以下行 (粗體)：

   [Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")]
   public class ImageButton : Button
   

   <Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")> _
   Class ImageButton
   

3. 在自訂屬性定義前貼上以下行 (粗體)：

   [Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")] 
       public ImageSource Source
   

   <Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")> _ 
       Public Property Source() As ImageSource
   

   Category 屬性是設定屬性顯示在 [屬性] 面板中的位置。

4. 重新建置專案 (CTRL+SHIFT+B)。

   現在，[ImageButton] 的 Source 屬性會顯示在 [屬性] 面板的 [一般屬性] 類別中，而將滑鼠指標移至該屬性上方及 [資產庫] 中的控制項上方時，描述就會出現在工具提示中。

回到頁首

進階：設定控制項以顯示預設影像

您可以將程式碼新增至任何自訂控制項的建構函式中，而在畫板上繪製控制項時 (即進入設計模式)，此建構函式會將屬性設定為預設值。如果使用下列程序設定屬性，則只會影響您在畫板上看到的樣子，並不會影響您在執行應用程式時看到的樣子。如果在設計模式中無法取得控制項的內容，但是可以在執行應用程式時取得控制項的內容 (例如，當內容來自資料庫或 Web 服務時)，這就十分有用。在此情況下，除非明確設定 [ImageButton] 的 Source 屬性，否則在畫板上會先將該屬性設定為專案中的影像檔名稱。

1. 在程式碼後置檔案 (Window1.xaml.cs) 中，將下列程式碼行 (粗體) 貼到屬性定義的後面：

   注意事項：
   將下列程式碼中的檔案名稱 (Sunset.jpg) 變更為專案中的影像檔名稱。若要將影像檔新增至專案中，請以滑鼠右鍵按一下 [專案] 面板中 [檔案] 下的專案名稱，再按一下 [新增現有項目]。

   public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton));
   
   // Constructor:public ImageButton(){   if (DesignerProperties.GetIsInDesignMode(this))   {      this.Source = new BitmapImage(new Uri("Sunset.jpg", UriKind.Relative));   }}
   

   Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton))
   
   Public Sub New()    If DesignerProperties.GetIsInDesignMode(Me) Then        Me.Source = New BitmapImage(New Uri("Sunset.jpg", UriKind.Relative))    End IfEnd Sub
   

2. 重新建置專案 (CTRL+SHIFT+B)。

   現在，如果將 [ImageButton] 新增至使用所建立之樣式的畫板中，按鈕中就會出現預設影像。

   注意事項：
   如果是設計模式，則無法將 Source 屬性設定為其他任何值。

回到頁首