1.從Blend工具箱中添加一個Button,按住shift,將尺寸調整為125*125;

2.右鍵點擊此按鈕，選擇Edit control parts(template)>Edit a copy...

3.在彈出的Create style resource對話框中，修改新按鈕樣式的名稱

 

4.在左側的Object and timeline面板中選中ContentPresenter元素，按Ctrl+X將此標記臨時保存到內存中

 

5.選中Chrome,按Delete鍵刪除

 

6.選中Template,在工具條中雙擊Grid,添加一個Grid到Template中

 

7.雙擊Grid，按Ctrl+V將之前保存在內存中的ContentPresenter元素粘貼到Grid中

 

8.在Property面板的Layout中修改ContentPresenter的屬性，將HorizontalAllignment和VerticalAllignment設為Center，將Margin屬性Reset為0

 

9.添加一個Ellipse到Grid中，設置其width和Height屬性為Auto,這樣此圓會始終與Grid大小相同

 

10.選中Ellipse，然后在Brushes中選擇GradientBrush

 

11.選中左側的Stop，調整其顏色為深藍色，然后將其向右拖到大約三分之一的位置

 

12.在工具條中選擇Brush Transform工具,然后按住圓上的箭頭調整使其朝向右上角

 

13.選擇Stroke，設置顏色為黃色，StrokeThickness為5

 

14.在Triggers面板中點擊+Property,添加一個PropertyTrigger

 

15.選擇IsMouseOver，然后修改結果為True

 

16.將左側的Stop的顏色設置為淺藍色，並將StrokeThickness設置為8

 

17.點擊ScopeUp按鈕推出Template編輯，然后按F5，即可看到自定義按鈕的實際效果

 

不過這個自定義按鈕還是有點問題：按鈕的Content屬性是字符串"Button",可實際上看不到這個內容。原因是在編輯Template時，ContentPresenter（用於放置Content的元素）和Ellipse的順序不正確，導致Content被Ellipse遮住了，只要進入編輯模式將ContentPresenter的位置調整下就好了

 

修正后的自定義按鈕的行為就很正常了：

 

注意，由於Button是一個Content控件，具有Content屬性，因此可以包含任何WPF控件/元素，比如圖片等，而不僅僅是"Button"這樣的字符串。下篇文章中就為這次制作的自定義按鈕的Content屬性設置為由Expression Design導出的矢量圖。