The MouseEnter event is used to determine when the user has moved within the boundaries of an WPF element. Use the MouseLeave event to determine when the mouse has left the boundaries of the element.
- [Instructor] The mouse enter event is one of the simpler mouse events you can work with in WPF. It has a companion event that's often used in conjunction called mouse leave. The idea is that when the user moves within the boundaries of a visible element on the screen, the mouse enter event fires and when they leave the boundaries the mouse leave event fires. There's also a mouse over that some people think of as the same as mouse enter, but the idea that's mouse over is it continuously firing every time you move one pixel difference over the top of an element.
You use mouse enter and mouse leave for things like drawing focus to a section of the screen, drawing attention to part of the screen, or changing the cursor when you move into the boundaries of an element. For my example, I'll be working with this window and I have an image here and I'd like to and I have an image here and I'd like to apply a blur effect to this image when the mouse enters. And also when you enter this image, I'd like to take this grid with its child border and text block and make it visible.
You can't see it on the screen right now because its visibility is set to hidden. I'll go to the image and set two handlers. Now I'm ready to go look at my code. There's a shortcut key you can use to switch over to the code view in Visual Studios, F7. And there's my two empty event handlers so for this first one I'll take the food image and I'll apply an effect. Then I'll go to the header grid, which contains my text block in a border and I'll set its visibility property to visibility.visible. and I'll set its visibility property to visibility.visible.
Then on the leave I'll just copy this code, paste it here, and I will set the effect to a null value. I set this back to hidden. Click the start button. Now as I move around the window nothing is happening. I move my cursor over the border nothing happens. As soon as I move within the boundaries of the image, you see the blue effect applied and the grid shows up and you can see in the grid there is the white background, there's a red border around the edge. Also the words Fresh Hot Pretzels show up.
When I leave, as soon as I get to the edge of the image, and my mouse pointer moves into the border the mouse leave event fires and it goes back to looking crisp and clean. Let's do that again, move in and move out.
- Understanding routed events and event signatures
- Wiring up event handlers
- Event bubbling and tunneling
- Programming mouse events
- Programming keyboard and ink events