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

發行項
10/11/2017

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

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

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

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

定義自訂控制項

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

在 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

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

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

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

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

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

您現在必須建置專案，新的 ImageButton 控制項才會出現在 [資產] 面板中。請在 Expression Blend 的 [專案] 功能表上，按一下 [建置專案] (或按下 CTRL+SHIFT+B)。請確定建置作業已完成，並且未發生錯誤。
在 Expression Blend 中，切換回編輯 [Window1.xaml]。
在 Expression Blend 左側的 [工具] 面板中，按一下 [資產] 。

如此會開啟 [資產] 面板以顯示所有您可以放在文件中的控制項、面板及物件。
從 [專案] 索引標籤的清單中選取 ImageButton 控制項。

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

注意：

除非您已將原始程式碼新增至專案，並且已執行建置 (CTRL+SHIFT+B)，否則自訂控制項不會出現在 [資產] 面板的 [專案] 類別中。
如果已在 [工具] 面板中選取 ImageButton 圖示，請按一下畫板並在文件內繪製週框方塊，以繪製 ImageButton 。

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

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

修改自訂控制項樣式

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

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

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

注意：

控制項範本是包裝在樣式內，因此套用至控制項的樣式，會同時包括控制項的外觀 (組件) 及行為。
在 [定義於] 欄位中，選取 [此文件] 選項按鈕，並確定已選取下拉式清單中的 [Window: Window]。

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

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

按一下 [確定]。

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

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

秘訣：
若要結束範本編輯模式並返回您的文件範圍，請在 ImageButtonStyle 一字旁的物件樹狀目錄上方，按一下 [將範圍傳回] 。若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 面板中以滑鼠右鍵按一下您想要編輯其範本的物件 (在此例中是 [ImageButton] "ImageButton" 物件)，並按一下 [編輯範本]，然後按一下 [編輯目前的項目]。

若要結束範本編輯模式並返回您的文件範圍，請在 ImageButtonStyle 一字旁的物件樹狀目錄上方，按一下 [將範圍傳回] Ff723977.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png 。

若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 面板中以滑鼠右鍵按一下您想要編輯其範本的物件 (在此例中是 [ImageButton] "ImageButton" 物件)，並按一下 [編輯範本]，然後按一下 [編輯目前的項目]。

在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 ContentPresenter 物件，並指向 [群組置入]，然後按一下 Grid 。

ContentPresenter 物件現在已是新 Grid 物件的子物件。由於鉻液態金屬物件只能包含一個子物件，所以如果沒有 Grid 物件，您就無法將第二個子物件新增至範本。
如果已在 [物件與時間軸] 面板中選取 Grid 物件，請在 [屬性] 面板的 [版面配置] 類別中找出 [Width] 及 [Height] 屬性。按一下每個屬性旁邊的 [進階選項] ，然後按一下 [重設]。
若要將格線分割成兩欄，請按兩下 [物件與時間軸] 面板中的 Grid 物件以啟用格線，然後在 [工具] 面板中選取 [選取] 工具，將滑鼠指標移至畫板上 Grid 頂端的深藍色尺規區域。滑鼠指標後面會接著橘色欄尺規，以指出用按一下方式放置新欄分隔線的位置。

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

Grid 內就會出現藍色的欄分隔線。
從 [資產] 面板的 [控制項] 類別選取 [Image] (按一下 [全部] 子類別)。當 Grid 物件在 [物件與時間軸] 面板中仍處於啟用狀態時，在 Grid 右欄內繪製一個新的 Image 。
在 [物件與時間軸] 面板中選取新的 Image 物件後，請查看 [屬性] 面板中的 [一般屬性] 下方。按一下 Source 屬性右側的 [進階選項] ，指向 [範本繫結]，然後按一下 Source 。

您剛才已透過範本繫結方式，將 Image 的 Source 屬性繫結至使用此範本之 ImageButton 的 Source 屬性。
您現在已完成範本的編輯。若要跳至根物件的範圍，請按一下 [物件與時間軸] 面板中的 [選定範圍]。
如果已在 [物件與時間軸] 面板中選取 ImageButton ，請在 [屬性] 面板的 [雜項] 類別中找到 Source 屬性，並將它設定為您電腦上的影像檔路徑。

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

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

從 [資產] 面板的 [專案] 類別選取 ImageButton 控制項。在畫板上繪製一個新的 ImageButton 控制項。

以滑鼠右鍵按一下新的 ImageButton ，並依序按一下 [編輯範本]、[套用資源] 及樣式的名稱 ImageButtonStyle 。

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

注意：
您也可以將已使用範本設定樣式的 ImageButton 新增至畫板中。請從 [資產] 面板的 [樣式] 類別中選取 ImageButtonStyle ，然後在畫板上繪製已設定樣式的 ImageButton 。

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

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

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

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

[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

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

[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 屬性是設定屬性顯示在 [屬性] 面板中的位置。

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

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

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

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

在程式碼後置檔案 (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

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

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

注意：

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