試試看：建立含有自訂屬性的自訂控制項

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

下列程序顯示如何建立能夠包括新屬性來保留影像檔路徑 (用以顯示影像) 的自訂按鈕控制項

如需在不使用程式碼之情況下 (因此沒有自訂屬性) 建立使用者控制項的範例，請參閱建立空白使用者控制項。

如需有關自訂控制項的詳細資訊 (包括 XAML 及程式碼範例)，請參閱 MSDN 上 Windows Presentation Foundation 一節的控制項撰寫概觀與 DependencyProperty 類別。

定義自訂控制項

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

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), null); 
   }
   

   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), nothing)
   End Class
   

3. 儲存修改的程式碼後置檔案，然後關閉檔案。

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

   秘訣：
   如果您偏好將自訂控制項類別定義原始程式碼保留在不同的原始程式碼檔案中，就可以這麼做。如果不想使用前兩個步驟，您可以建立一個名為 [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. 如果已在 [物件與時間軸] 面板中選取 [Grid] 物件，請在 [屬性] 面板的 [版面配置] 類別中找出 [Width] 及 [Height] 屬性。按一下每個屬性旁邊的 [進階屬性選項] ，然後按一下 [重設]。

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

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

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

8. 從 [資產] 面板的 [控制項] 類別選取 [Image] (按一下 [全部] 子類別)。如果 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 If  
   End Sub  
   

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

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

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