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

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     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.

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

• Anonymous
  January 14, 2009
  The comment has been removed

• Anonymous
  January 15, 2009
  Link Listing - January 15, 2009

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

• Anonymous
  August 06, 2015
  Thank you!