Windows Phone Developer Tips

General Windows Phone developer tips including but limited to game programming tips. Also, general Silverlight news and announcements.

Silverlight Tip of the Day #27: How to Change the Mouse Cursor

Silverlight Tip of the Day #27: How to Change the Mouse Cursor

  • Comments 3

Let’s say you want to change the mouse cursor when hovering over a UI element. You can do this directly in the XAML by setting the Cursor property.
For example, if you want to change the cursor to be the Hand image    cursor when hovering over a button the XAML you would use would be something like this:

<Canvas >
    <Button Cursor="Hand" Width="100" Height="50" Content="Hover over me"></Button>
</Canvas>

When running the app you would see, as in the screen shot below, the mouse cursor change from the arrow to the hand.

image

To do this programmatically you could place a MouseEnter and MouseLeave event handler on the button.

<Grid x:Name="LayoutRoot" Background="White">
    <Canvas >
        <Button x:Name="myButton" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" Width="100" Height="50" Content="Hover over me"></Button>
    </Canvas>
</Grid>

Then, in the event handler you could change the cursor this way:

private void Button_MouseEnter(object sender, MouseEventArgs e)
{
    myButton.Cursor = Cursors.Hand;
}
 
private void Button_MouseLeave(object sender, MouseEventArgs e)
{
    myButton.Cursor = Cursors.Arrow;
}

Silverlight provides the following cursors through the Cursor object:

  1. Arrow 
  2. Eraser
  3. Hand 
  4. IBeam
  5. SizeNS
  6. SizeWE 
  7. Stylus
  8. Wait

Thank you,
--Mike Snow

 Subscribe in a reader

Comments
  • Hey mike thanks for the useful info.  I cant wait to turn the cursor into something fun.

  • Link Listing - January 15, 2009

  • ASP.NET Time released content in ASP.NET [Via: Jon Galloway ] Code Camps Roanoke Code Camp 09 - Call...

Page 1 of 1 (3 items)
Leave a Comment
  • Please add 7 and 7 and type the answer here:
  • Post