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:
- Arrow
- Eraser
- Hand
- IBeam
- SizeNS
- SizeWE
- Stylus
- Wait
Thank you,
--Mike Snow
Subscribe in a reader