Creating a Custom Button from an Image in Expression Blend

Creating a Custom Button

Buttons play an important role in the project, apart from providing functionality to the events buttons become the subject of attraction. Changing color, bulging and shrinking of buttons is not just enough to give a dynamic and attractive feel to the project.

Here in this article I will focus on how to make buttons attractive and noticeable in the project i.e I will show you how you can turn an image into a button and how to add custom rollover and pressed transitions when you interact with it. In the end, you will create something with all of the functionality of a button, but it will not resemble a button in any way, shape, or form.

The following application shows effects when mouse moves over the image turned button

The above effect is simple to create with the following steps:

1. Launch Expression Blend, begin with the New Project name it as "mycustombutton":
   
   
2. Don't forget to select a Silverlight, WPF, or Windows Phone Application or web application and the Language as Visual C# before naming the project.
   
   Now you enters into the designing part of Expression Blend
   
   
3. You will see your Artboard, now insert an image into your artboard, in this case I have used the image shown below.
   
   
4. Just drag and drop the image from the storage on your computer and into your artboard resize the image according to you
   
   
5. Resize your image using the adorners that surround it on the artboard. Hold down your Alt key and just begin resizing to preserve your image's aspect ratio:
   
   
   

Now you will learn how to use this image to act as a button and add the functionality same as that of a button.

What we need to do is first make the image act as a button and then add mouseover effect on it.

The following steps shows you how to transform an image into button.

1. Select the image and go to Tools --> Make into controls.
   
   Note : Some versions of Expression Blend have Tools--> Make Button instead of Tools --> Make into controls, both are same.
   
   
    
2. After this Create Style Resource dialog will appears. Change the name of the button from ButtonStyle1 to "myimagebutton" or whatever you like.
   
   
   
   This control now changes the image into button and this also appears at your object tree and your image now has a button icon next to it. If you didn't give your image a name originally, the default name [Button] text displayed instead of [Image].
   
   
   
   
3. Now your image is converted into a button so With your button now selected, go to the breadcrumb bar (shown in the fig. below) found towards the top of your artboard.
   
   Click on the [Button] and from the menu that appears, go to Edit Control Parts (Template) | Edit Template.
   
   
    
4. You can now edit your Button's template, the name referring to all of the various things that make up the internals of your control.
   
   The Button, your template's contents look as follows.
   
   
   
   You will find that Grid that controls the layout contains two children -one your Image and the other ContentPresenter control
    
5. To know what is ContentPresenter control, Select your ContentPresenter control you will find that the Button text that appeared on your image.
   
   
   

This text displayed via your ContentPresentershows that the image is now a button, you can also select and delete this ContentPresenter control button written on the image.

Now after completing this we start with adding effects to this newly created button. we'll learn only the mouseover effect and rest effect you can implement easily knowing the know how of this effect.

We begin with Adding States, for this go to the STATES panel as shown in the image below.

There are basically Three main category of states, Base, Common States and FocusStates. These states allows to make visual changes that appear when you interact with your button. Each such visual change is represented by what is known as a State. You can view the states your button currently has defined by looking at your States panel found in the Interaction pane:

        

You also have a state known as Base, which shows how the control would look like if you do nothing to it. It is the default state.

We are interested in MouseOver state. click on the MouseOver entry in your States panel:

        

When you click on it you will find the selected mode appears in the designing screen. This is to show that any changes you make to your artboard will only be reflected in the state you are currently editing. In this case, any modifications you make will only be visible when your button is in the MouseOver state.

Now suppose I want that the image rotate and shrink on MouseOver. For this effect select your image on the artboard,with the image selected, make changes to it as you want, here I will rotate the image and make it smaller by resizing it using the adorners

        

That's it we wanted to do with the image turned into button.

If you hit F5 and preview the animation, you'll find that your image is displayed as this:

        

Now when the mouse is hovered over the button it changes like this:

        

Finally when the mouse leaves the button it looks like this: