Adding a mouse over effect to an image

Expression Blend is a powerful tool. It will write the necessary code for you. It is very easy to add mouse over behavior to any kind of control with silverlight. In the below example, Our goal is to add "MouseOver" and "MouseLeave" behavior to an image. Here are the steps;

1.Write click over the file that you want to add behavior and select "Open in Expression blend..."

2.In the "States" tab of Expression Blend, click on "add states group" icon to create a visual state of the control.

3.Give a name to Visual State Group and specify the Default Transition

4. Click on Add State icon right next to Visual state group that you ve created and give a name to the state. If you notice, VisualState state recording is on. What ever the style you apply on the image is recorded in this period. When you done styling the image (ex: making the border thicker, making it invisible etc.) click on Base at the top to finish.

5. At the end we ll have two states defined (NormalSearch, MouseOverSearch)

6.Switch to Assets tab and in the Behaviors menu select "Go to State Action"

7. Drag and drop "Go to state action" over the image that you want to add behavior

8.Do the same thing for imgExpandHover image.

9.When [GoToStateAction] for imgExpand is selected go to properties at right side of the screen and select "MouseEnter" for event name and "MouseOverSearch" for State Name

10. For imgExpandHover  image,select "MouseLeave" as event name and "NormalSearch" for State Name

It will add all the necessary code automatically in .xaml file. We ve just created two states for two images. Initially, imgExpand is visible and imgExpandHover is invisible. In [GotoStateAction] part, events are defined for mouse enter and mouse leave behavior. What it does is, when you hover over the imgExpand, it ll be invisible and imgExpandHover image will be visible. When you do mouse leave from the image, imgExpand will be visible again and imgExpandHover will be invisible. imgExpandHover image has a border around it.So, when you mouse over the image you ll see that its border get thichker. That is basically what we wanted achieve.