Adding a Mouse Over Effect to a Button

WPF allows you to create effects on your controls that react to user input. For instance, buttons in Windows get a slightly different appearance when the mouse is over them, to indicate to the user that something is going to happen when they click there. In this tutorial, we're going to take a design taken from Expression Design, bring it over to Blend, convert it to a button and add a Mouse Over effect.

If you don't have Expression Design, a trial version can be downloaded from here.

First, we need to get the shopping cart from Design. Open the Fabirkam_Main_Design.design document in Expression Design.

Select the shopping cart button. The button is just below and to the right of the VPR-1000 model .

Now, either press Ctrl+C to copy the shopping cart, or select Copy from the Edit Menu.

Switch over to your Blend project, and press Ctrl-V or Paste. The little shopping cart button is pasted in the same relative position it was at in the Design document, so it will end up below the bottom of your artboard. If you can't see the shopping cart, try panning down a bit until you see it.

To make it easier to work with, you may want to drag the shopping cart button to the artboard and make it larger. If you hold down the SHIFT key when you resize, it will maintain the aspect ratio, and stay round.

Now, we need to convert this design into a button. There are several ways to do this, but the easiest is just to go into the Tools menu, and select Make Button. You need to have the Group selected when you do this. As soon as you call Make Button, a dialog will come up asking for a name for your button. Feel free to name it whatever you like. I named the button "ShoppingCart" for ease.

As soon as you're done with this, you now have a button on your artboard. Since we've got some more work to do, we need to edit the template of the button. So, right click the button, select Edit Control Parts and then Edit Template. This will switch Blend so that we're editing the button specifically, and not the entire scene. You can tell if you've done this correctly if the Scope of the document (which is where my arrow is pointing on the next screen shot) says "ShoppingCart (Button Template)"

If you look carefully, you'll see the word "Button" in the middle of your button. This is because a ContentPresenter got created for you as a side effect of making the button. We don't want that, so we'll need to delete it. Select the ContentPresenter in the Object Tree, and press the Delete key to delete it. The word Button should go away.

Now, we need to add a Property Trigger. A property trigger explains to the control how it should behave based on properties. In this case, we want the appearance to change when the "IsMouseOver" property is true or false. Click the + Property button in the Triggers panel.

We need to specify our property and the desired value. So, in the region where it says "Activated When", change it so that it reads "target-element IsMouseOver = True". It should look like this:

Now, since we're in Trigger recording mode, any changes we make to the Button will only be displayed when IsMouseOver is true. We're going to lighten up the background of the button, so expand the Object Tree, until you find the Path element that represents the background of the button. It should be named simply "Path". Select it.

Now, switch to the property inspector, and you'll see the properties of the path element. If the Fill in the Brush Editor isn't already selected, select it. Now, you'll see the three gradient stops that make up the path. You can set the color to anything you want, but if you're just lightening the color, it's easiest to switch from the RGB color space to the HLS color space, and just increase the lightness. To switch from one color space to another, just click either the R, the G or the B in the color editor, and in the menu that comes up, select HLS.

Now, select the leftmost gradient stop, and set its lightness to 100%. Then select the middle gradient stop, and set its lightness to 85%. It should look like this:

Changing the color is one way to give the user feedback, but another way is to make the outer border more solid. Select the Stroke in the Brushes inspector, and set the Alpha channel (The A) value to 100%.

Now, press F5 and look at your application. The button is present, and when you move the mouse over it, it brightens up, and the outer stroke gets darker. As soon as you move the mouse away, it returns to its normal state. This control could then be handed off to another team, for use.