WPF learning notes-use Expression Blend to create a custom button

1. Add a Button from the Blend toolbox, hold down shift, and adjust the size to 125*125;

2. Right-click this button and choose Edit control parts (template)> Edit a copy...

3. In the Create style resource dialog box that appears, modify the style name of the new button.

 

4. Select the ContentPresenter element in the Object and timeline panel on the left, and press Ctrl + X to temporarily Save the tag to the memory.

 

5. Select Chrome and press Delete to Delete it.

 

6. Select a Template and double-click Grid in the toolbar to add a Grid to the Template.

 

7. Double-click the Grid and press Ctrl + V to paste the ContentPresenter element in the memory to the Grid.

 

8. Modify the ContentPresenter attributes in Layout on the Property panel, set HorizontalAllignment and VerticalAllignment to Center, and set the Margin attribute Reset to 0.

 

9. Add an Ellipse to the Grid and set its width and Height to Auto, so that the circle will always be the same size as the Grid.

 

10. Select Ellipse and then select GradientBrush in Brushes

 

11. Select Stop on the left, adjust the color to dark blue, and drag it to the Right to about 1/3.

 

12. Select the Brush Transform tool in the toolbar, and press and hold the arrow on the circle to adjust it to the upper right corner.

 

13. Select Stroke and set the color to yellow and StrokeThickness to 5.

 

14. Click + Property on the Triggers panel to add a PropertyTrigger.

 

15. Select IsMouseOver and change the result to True.

 

16. Set the Stop color on the left to light blue and StrokeThickness to 8.

 

17. Click the ScopeUp button to launch Template editing. Then press F5 to see the actual effect of the Custom button.

 

However, this custom Button still has a problem: the Content attribute of the Button is the string "Button", which is not actually visible. The reason is that the order of ContentPresenter (the element used to place Content) and Ellipse is incorrect during Template editing, and the Content is overwritten by Ellipse, you only need to change the ContentPresenter position in edit mode.

 

The modified Custom button is normal:

 

Note: Because the Button is a Content control with the Content attribute, it can contain any WPF control/element, such as slice, not just a string like "Button. In the next article, set the Content attribute of the Custom button to the vector image exported by Expression Design.