Naveen's Weblog

Bridge to future

Zooming In WPF

Posted by codingsense on May 17, 2009


Hi,

Today we shall see how we can zoom an image on hovering a mouse over it.
I will guide you the steps in this sample to acheive zooming in Expression blend.

Download Project 780KB

First, create a new project -> In project window (Window menu -> Project) right click on the project -> Add existing item -> browse a image file and add it.
Click on the image and it will get placed in the window.

Create Project and Add Image

Create Project and Add Image

From here i will be showing many steps in a single image, i will be marking the parts where modification is required with a circle, and numbers have been given next to the ovals to follow them in order.
Next, in interaction window ( Window Menu -> Interaction)

  1. select the image
  2. Cilck “+” button in objects and timeline. Enter OnMouseEnter in Name(Key) TextBox and Click Ok.
  3. Move the timeline to 3 milliseconds
  4. In Property window, select Transform tab, in it select scale tab
  5. Set x to 1.5
  6. set y to 1.5

OnMouseEnterTimeLine

For better understanding, move the yellow timeline from 0 to 3 ms and check how the image scales.
So we have created a timeline for what has to happen when the mouse enters in the image area. Next we have to create one more timeline to zoom out the image when the mouse is moved out of the image area. Lets see how we can do it.

  1. select the image
  2. Cilck “+” button in objects and timeline. Enter OnMouseLeave in Name(Key) TextBox and Click Ok.
  3. In Property window, select Transform tab, in it select scale tab
  4. Set x to 1.5
  5. set y to 1.5
  6. Move the timeline to 3 milliseconds
  7. In Property window, select Transform tab, in it select scale tab
  8. Set x to 1
  9. set y to 1

OnMouseLeaveTimeLine

Now we have timeline for mouse enter and mouse leave events, now we just need to bind this timelines to the actual events, here it goes

  1. Open the triggers window
  2. Click -trigger to remove the default event
  3. Click +Event and a new event is created
  4. Select image from the drop down (if image is not available select the image in object and timeline window)
  5. Select MouseEnter event from the dropdown
  6. Click +
  7. Select the timeline to attach the event ( OnMouseEnter)

By this we have attached the mouse enter event with our time line, now we need to attach the mouse leave event with the other timeline.

  1. Open the triggers window
  2. Click +Event and a new event is created
  3. Select image from the drop down (if image is not available select the image in object and timeline window)
  4. Select MouseLeave event from the dropdown
  5. Click +
  6. Select the timeline to attach the event ( OnMouseLeave)

AttachTimeLineToEvent
Now save the project and run it. when mouse enters the image area the image zooms in and when mouse leaves the image zooms out.

Hope you got the steps right. For any queries feel free to post a comment.

Happy Learning 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: