Image buttons in Windows Store XAML app (hover mode)

Question

When I hover over or click an image button it goes white. Can I keep the original image or have a differenet image when I hover over it?

Here is the XAML:

 <Button x:Name="iTunesButton" Content="" HorizontalAlignment="Right" Margin="0,380,69,0" VerticalAlignment="Top"  Width="175" BorderBrush="{x:Null}" Height="58" Foreground="{x:Null}" Click="iTunesButton_Click">
            <Button.Background>                
<ImageBrush ImageSource="Assets/itunes-button-1.png" Stretch="Uniform"/>            
</Button.Background>        
</Button>

---

\^_^/

Answer 1

Hi zenanimator,

Read this before you continue: Button styles and templates

The mouse hover event is "PointerOver", you can do something with PointerOver section. For instance modify the image background image and etc.

                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Is there no simpler way?

---

\^_^/

Answer 3

Or you can define a PointerEntered and PointerExited event. This could be much easier to implement.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

You can use control template to implement this. 

Or see:Change Button Image On Hover or Click

Answer 5

Hi in the end I just did this:

<Button x:Name="iTunesButton" Content="" HorizontalAlignment="Right" Margin="0,380,69,0" VerticalAlignment="Top"  Width="175" BorderBrush="{x:Null}" Height="58" Foreground="{x:Null}" Click="iTunesButton_Click">
             <Button.Template>
                <ControlTemplate>
                    <Image Source="Assets/itunes-button-1.png"/>
                </ControlTemplate>
            </Button.Template>
        </Button>

---

\^_^/

Answer 6

Alright, since you use the word "in the end", I will just consider you will not continue working on this question.

I will mark some answers to close this question. And if you still have something unclear, reply on the forum, we are always willing to help :)

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.