Expression Blend Create a custom button

In Expression Blend, we can draw shapes, paths, and controls on the artboard, and then modify their appearance and behavior to visually design the application. Button buttons are also one of the most commonly used controls in Expression Blend and play an important role in the project, but we will find that the button for the default appearance is actually a bit of an unattractive and not attractive one.
So, in this article, I'll show you how to customize the button buttons control in Expression Blend, I've chosen to turn the picture into a button, and then add a custom mouseover mouse-over effect.

The detailed steps are as follows:

1 Start expression Blend, create a new project, create a new project, name the project, and select the project type (Silverlight, WPF, WindowsPhone application,web application). I'm creating a Silverlight app in this article.

2 when the project is created, we drag the image from the system directly into the artboard and adjust the size of the picture to fit your needs. This is a picture of my choice.

3 Next click Tools, make to controls (constituent controls)

4 Pop-Up dialog box, select Controls-> Button, name ButtonStyle1 Myimagebutton, or other name can be.

We can notice that a button icon appears on the image, and we haven't named the image before, so the default text is a button.

5 after the image has changed to button, in the navigation bar at the top of the artboard, click Button>edit Controls part >edit Template. In the appearance appearance panel, you can also add rich effects to our button.

The edit template contains the following content:

We see the grid, which consists of two child elements, one is an image and the other is a ContentPresenter control. ContentPresenter control is the control button text, click ContentPresenter can see the button such text.

The text shown through ContentPresenter also shows that the picture is now a button, and you can delete the control and remove the button text from the picture.

6 Navigate to the states Status Panel, click MouseOver below CommonStates.

There are three main categories of states: Base, Common states and FocusStates. These states allow us to make visual changes in the context of interaction with the button. And base, it's a default state.

7 After adding mouseover, we can process the picture, where I rotate and zoom out the picture.

8 Press the F5 key to preview the animation:

When the mouse slides over the button, the result is as follows:

Finally, when the mouse leaves the picture, the picture will be restored.

Of course, this is a very simple implementation process, and more complex and sophisticated design needs to be constantly tried. Thanks for browsing!

Expression Blend Create a custom button