Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are a handful of mouse-specific events available for Silverlight Elements. These events are tailored to the mouse and they send mouse-exclusive details to your code via the MouseEventArgs parameter. I'm going to show you these events in the DetailingMouseEvents project. I'll start by looking at MouseEvents.xaml. There are three ellipses on this page. This first ellipse uses the MouseEnter and MouseLeave event. Here they are. The second ellipse uses the MouseWheel event. And the third event of course is going to use MouseMove.
Let's go look at the code for these. Press F7 to switch to the code behind. Here's my code for the MouseEnter. When the mouse enters the ellipse, I'm going to generate a solid color brush and assign it to the Fill property of the sender, in this case the ellipse that raised the event. When the MouseLeave event fires, I set the Fill Color to White. In the wheel event, I'm getting mouse-specific information. That's coming in via this MouseWheelEventArgs, through this variable, e. So when I go down into my code, I can say e.Delta and that gives me information about whether the user was using a positive or negative scroll on their mouse wheel.
So I'm changing the width of my ellipse based on which way you roll the mouse. The MouseMove event procedure code is up here. I'm using a little bit of code to get the position of the mouse. Again, I'm using MouseEventArgs and I'm using the e.GetPosition. Now, I have to get to a position relative to something, so I'm getting it relative to the UserControl. So this says go figure out where the mouse is, get its position, store it in this point variable. Now that you have the point variable, get the X coordinate and the Y coordinate and store them in the string, and then send that string to the textBlockResults.
Press F5 to run the application. Here's the MouseEnter and the MouseLeave. Here's the Mouse Wheel, I'll hover my mouse over this and then use my Mouse Wheel. And then over here, as I move my mouse around, you can see my coordinates. There are two sets of coordinates. One is relative to the root element, which is the UserControl and the other one is relative to the moveEllipse itself. The rectangles on the bottom of the page are used to demonstrate mouse cursors. Now, these aren't events but they are affiliated with the mouse and I think it's interesting.
Let me show you what I mean. If I click on this rectangle and scroll down here, I have this cursor property and I've set that to one of the available Silverlight cursors. So when I press F5 and run the application, you can hover your mouse over these different rectangles to see examples of different cursors. Next, I'd like to talk about the drag events that are available in Silverlight. Dragging items on a computer screen with our mouse is second nature to most of us. It's an easy metaphor to learn and mouse- dragging has been around for decades. Silverlight has drag support and it's what I want to explore.
There are two types of drag scenarios that are employed in modern applications. There is the internal model, where you drag within the boundaries of your application. For example, you might drag a product from a product list to a shopping cart. The other model is dragging between applications. The classic example for this model is dragging from a file explorer window into an application window. In this demo, I'll show file drag and drop. To enable applications to support drag and drop, Silverlight has four events: DragEnter, DragLeave, DragOver, and Drop.
These are available on the UIElement class. Consequently, any visual element can be a drop target. To demonstrate this I'm going to open this DragToListbox file, and as you can see I have a listbox here, and then it has a number of event procedures. It has one for Drop. This fires when you drop something on the listbox and it has one for DragEnter and one for DragLeave. I'm going to use this to signal to the user that it's okay to drop on this target.
And then of course I need to enable dropping by saying AllowDrop='True'. Now let's look at the code behind. Here is the code for the DragEnter. When the mouse enters a listbox, I'm going to set my listBox.Background to a Yellow brush and I'm going to change the thickness of my border to a thicker look. When you drag leave, I'll set them back to their original settings. And of course I'm going to do a drop. That code up here is inside the listBox_Drop.
This checks this e object, DragEventArgs to see if I'm actually dragging anything useful. If I am, then I run this code. I create an array of FileInfo objects by calling e.Data.GetData and I tell it the kind of data I'm looking for, a FileDrop. Once I have this array, I can use that as a binding source for my listbox. I discuss binding later. And then I tell it which property on this FileInfo to display.
I'll show you what it looks like. Press F5, click on this Drag to listbox. Now I'm going to go to my hard drive and find some files. I'm in my Assets folder, which is part of the Exercise Files. Of course you can use your own files on your own computer. I'm going to pick this grapes.png file, I'm going to drag it over, and as it enters the listbox, you'll see the DragEnter event fire. It changes the color to yellow and changes the border. When I move my mouse out of the listbox, the DragLeave event fires.
This is supposed to provide a clue to the user that you are in an area where they can drag and drop an item. Now, when I drop this, I'll do the binding. Notice when I drag one file, I get one string. If I drag multiple files, that's the array of FileInfo. I can make this more interesting by dragging an image over and picking the bitmap bits out of it and drawing images instead of strings. That's what the Image Viewer shows. This is an area where I'm going to drag my items.
I'll pick this grapes file up and drop it and now you see I get a more visual approach. I like that. I'll pick this up and drag it around. This is creating an image, reading the bitmap data out of it, applying a border, skewing it, rotating it, and it's also applying a pixel shader, a drop shadow effect to it. Let me show you that code briefly. And it's over here in the ImageViewer.xaml.cs. There's a lot of code in here.
I'll scroll down slowly and then you can stop the video and copy it all into your applications. Essentially, I have a timer that's firing, checking my drop target. And when it detects there's an item in there, then it runs this bit of code, which takes the file information; grabs the bitmap information, in this case, it's creating a new bitmap image; getting the information out of the file stream; setting the image properties. Here I've created an Image control, setting the properties like the Width and the Visibility, adding some drag behavior; rotating it using the transforms, setting some colors on the background, and here this is DropShadow.
Finally, the last thing I do is I take that image and I add it to my LayoutRoot.Children collection. Now you've seen more about drag and drop support. In a few lines of code I was able to drag and drop from the operating system to the Silverlight app. I have no doubt that Silverlight features like this will make developers happy and productive people.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100129 Viewers
56 Video lessons · 113153 Viewers
71 Video lessons · 82024 Viewers
131 Video lessons · 39354 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.