Change cursor to hand when I hover over a button

Question

I want to change the cursor to hand when hovering over a button, for example, I have this button :

<Button Content="" HorizontalAlignment="Left" Margin="229,128,0,0" VerticalAlignment="Top" Height="107" Width="170" Grid.RowSpan="2">
     <Button.Template>
         <ControlTemplate TargetType="Button">
             <Grid>
                 <Grid.Background>
                     <ImageBrush ImageSource="africa/picture17.png"/>
                 </Grid.Background>
                 <ContentPresenter/>
             </Grid>
         </ControlTemplate>
     </Button.Template>
</Button>

How to change the cursor to hand when I hover over the button? I'm using Visual Studio 2013 for Windows Store 8 and C#-XAML.

score 134 · Answer 1 · answered Apr 16 '14 at 18:59

134

You can do this by changing the Cursor property:

<Button Cursor="Hand" .../>

answered Apr 16 '14 at 18:59

gleng

6,185
4
21
35

2

Works just fine for me in VS 2013, version 12.0.31101.00 Update 4 – Jagd Nov 12 '15 at 20:10
1

Perfect answer. – Shariful Islam Mubin Dec 19 '19 at 10:17
Great, but it could (should) be done in styles. What if I want this on al the buttons. – ed22 May 11 '21 at 11:58

score 21 · Answer 2 · edited Jul 25 '17 at 13:19

21

You need to use Style for buttons, could you write in window resource or in button's style:

<Style>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Cursor" Value="Hand"/>
    </Trigger>
  </Style.Triggers>
</Style>

edited Jul 25 '17 at 13:19

Paul Roub

36,322
27
84
93

answered Jul 25 '17 at 13:09

yosef_maj

211
2
2

3

You'll need to set the target type on the style for this to work. eg ` – Adam H Jun 01 '18 at 10:18

score 12 · Answer 3 · answered Apr 16 '14 at 19:02

12

You need to use Mouse.OverrideCursor:

myButton.MouseEnter += (s,e) => Mouse.OverrideCursor = Cursors.Hand;

myButton.MouseLeave += (s,e) => Mouse.OverrideCursor = Cursors.Arrow;

answered Apr 16 '14 at 19:02

Brian Driscoll

19,373
3
46
65

By some reason, this was the way to go... so thank you very much! – nrod Apr 20 '20 at 15:22

123 456 789 0 · Answer 4 · 2014-04-16T19:23:15.263

9

Use Visual State Manager

Update your XAML to be like this

<Button Content="Beh}"  Style="{StaticResource ButtonHover}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                    <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(FrameworkElement.Cursor)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                            <DiscreteObjectKeyFrame.Value>
                                <Cursor>Hand</Cursor>
                            </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Button>

edited Apr 16 '14 at 19:23

answered Apr 16 '14 at 19:07

123 456 789 0

10,565
4
43
72

i'm really sorry but i didn't use triggers before .. can you please explain more how to do it by triggers ? – Lamawy Apr 16 '14 at 19:15
@user3542555 Sorry, didn't see it was WinRT. Updated my answer. Use `VSM` – 123 456 789 0 Apr 16 '14 at 19:23
no it is ok .. ok then where do i put my button template inside your code ? – Lamawy Apr 16 '14 at 19:35
`` Either before `VisualStateManager` or after – 123 456 789 0 Apr 16 '14 at 19:59

Change cursor to hand when I hover over a button

4 Answers4