Objects in Silverlight give you a handful of choices for the cursor - none, arrow, ibeam, wait, and hand. It may seem a little limited, but it’s fairly straightforward to make your own custom cursors.
Here’s a bit of XAML that will create a canvas with a gradient fill, and a red ellipse.
<Canvas
xmlns=”http://schemas.microsoft.com/client/2007”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”800″ Height=”600″
x:Name=”rootCanvas”>
<Canvas.Background>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”#FF000000″ Offset=”0″/>
<GradientStop Color=”#FFFFFFFF” Offset=”1″/>
</LinearGradientBrush>
</Canvas.Background>
<Ellipse Width=”25″ Height=”25″ Fill=”#FFFF0000″ Stroke=”#FF000000″ x:Name=”myCursor”/>
<Rectangle Width=”800″ Height=”600″ Stroke=”#FF000000″ Canvas.Left=”0″ Canvas.Top=”0″/>
</Canvas>
This will give you a scene that looks like this:
We want to make the red ellipse element, named “myCursor”, follow the mouse, so add a mouse move event to the main canvas:
<Canvas
xmlns=”http://schemas.microsoft.com/client/2007”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”800″ Height=”600″
x:Name=”rootCanvas”
MouseMove=”mouseMove”>
Now that the event is hooked up, we will need to create the function being called. Edit the <head> portion of the Default.html file to include a JavaScript file that will contain the mouseMove function:
<script type=”text/javascript” src=”Silverlight.js” mce_src=”Silverlight.js”></script>
<script type=”text/javascript” src=”Default_html.js” mce_src=”Default_html.js”></script>
<script type=”text/javascript” src=”Page.xaml.js” mce_src=”Page.xaml.js”></script>
<script type=”text/javascript” src=”cursor.js” mce_src=”cursor.js”></script>
Since you’re in the Default.html file, you may also want to modify the styles so that the height and width styles reflect the size of the root canvas (800×600).
Next, create a new file called cursor.js, and save it in the same directory as the Default.html file. This is where the mouseMove function will live.
The mouseMove function will get the current coordinates of the mouse as it moves, and reposition the red ellipse to those coordinates. The function looks like this:
function mouseMove(sender, mouseEventArgs){
var cursor = sender.findName(”myCursor”);
var mouseX = mouseEventArgs.getPosition(null).x;
var mouseY = mouseEventArgs.getPosition(null).y;
cursor["Canvas.Left"] = mouseX;
cursor["Canvas.Top"] = mouseY;
}
Notice that we’ve set up a variable called “cursor” to give us shorthand access to the “myCursor” element in the XAML file. Instead of having to type out sender.findName(”myCursor”)… each time we want to access that element, it’s simply referenced as cursor.
At this point, if you run the file, you’ll see that as you move the mouse, the red ellipse will follow.
You may notice that there are two problems. First, the red ellipse is positioned such that the mouse pointer is at the top left of the element. This is expected given that we are assigning the top left of the element’s bounding box to the current cursor position. In this case, it really doesn’t matter, but if you were trying to use a crosshair or needed some pinpoint accuracy, it would be a problem. To fix it, you’ll need to move the red ellipse so that the cursor aligns with the middle of the element. To do this, make a simple change to the cursor positioning code:
cursor["Canvas.Left"] = mouseX - cursor.width/2;
cursor["Canvas.Top"] = mouseY - cursor.height/2;
This moves the cursor so that the center point of the ellipse is now positioned over the current mouse coordinates.
The second problem is that the arrow mouse cursor is still showing. Again, this is not a problem here, but if you were using a custom crosshair cursor or something similar, you may not want the default cursor to show. To make this change, the cursor property for the root canvas is set to “none”:
<Canvas
xmlns=”http://schemas.microsoft.com/client/2007”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”800″ Height=”600″
x:Name=”rootCanvas”
MouseMove=”mouseMove”
Cursor=”None”>
Now run the project and you will see that the red dot moves and has become your custom cursor. Download (6.5K ZIP)
Entries (RSS)