Share via

How to control the mouse cursor

  • Article

How to set the mouse cursor in one easy step: set the Cursor property. For example, this markup:

 

<Button Cursor="Help">Help</Button>

 

… sets the cursor to be the “Help” cursor, when the mouse is over the button.

 

Note that since Cursor is scoped, it doesn’t apply to other parts of the page (anything other than that button). Also note that if a child and parent both set the Cursor, the child wins. For example, in this markup:

 

<Border Cursor="Hand" Padding="50" Background="LightYellow" >

  <Button Cursor="Help">Help</Button>

</Border>

 

… the cursor is a hand over the Border area, except over the Button it’s overridden to a Help cursor.

 

So by default the child wins over the parent, but the parent gets the final say with the ForceCursor property. When this property is set, the parent’s cursor overrides the child. So add this to the border in the above markup, and the cursor is a Hand, even over the button:

 

<Border Cursor="Hand" ForceCursor="True" Padding="50" Background="LightYellow" >

  <Button Cursor="Help">Help</Button>

</Border>

 

 

 

Here’s an example of Cursor and ForceCursor that you can use to see everything (just paste this into XamlPad):

 

<Page   

    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

    >

  <Page.Resources>

    <!-- Give all the TextBlocks a "hand" cursor -->

    <Style TargetType="TextBlock">

      <Setter Property="Cursor" Value="Hand" />

      <Setter Property="Background" Value="White" />

    </Style>

    <!-- Tell all the borders to give some padding to their child,

         and to have a light blue background. This will

         make it easier to see which part is the border,

         and which part is the child of the border -->

    <Style TargetType="Border">

      <Setter Property="Padding" Value="20" />

      <Setter Property="Background" Value="LightBlue" />

      <Setter Property="Margin" Value="5" />

    </Style>

  </Page.Resources>

  <StackPanel>

    <!-- Demonstrate a simple cursor -->

    <Border>

      <TextBlock>

        Just a text block. This will have a hand cursor over the text block,

        coming from the style. But the light blue border area will have the

        default arrow cursor.

      </TextBlock>

    </Border>

    <!-- Demonstrate a child cursor overriding a parent cursor -->

    <Border Cursor="Cross">

      <TextBlock >

        Same text block, but now the border has a cross cursor set. This will

        still have a hand cursor over the text block, but the light blue border

        will have a cross cursor (the text block's cursor is overriding the

        border's cursor).

      </TextBlock>

    </Border>

    <!-- Demonstrate a parent cursor overriding a child cursor -->

    <Border Cursor="Cross" ForceCursor="True">

      <TextBlock>

        Now the border also has ForceCursor set. So both the border

        area and the text block will have a cross cursor (the border's cursor

        is now winning over the text block's cursor.

      </TextBlock>

    </Border>

  </StackPanel>

</Page>

Comments

  • Anonymous
    February 19, 2007
    it would be interesting to know as well, how to change a cursor during drag+drop operations.