IT工程師數位筆記本

來源：http://www.cnblogs.com/iChina/archive/2011/11/25/2262854.html

Expression Blend制作自定義按鈕

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"這樣的字符串。