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


    \^_^/

    Wednesday, May 14, 2014 12:23 AM

Answers

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

    Wednesday, May 14, 2014 1:43 AM
    Moderator
  • 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.

    Thursday, May 15, 2014 12:56 AM
    Moderator
  • You can use control template to implement this. 

    Or see:Change Button Image On Hover or Click

    Thursday, May 15, 2014 2:50 AM
  • 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>


    \^_^/

    Thursday, May 15, 2014 4:22 PM

All replies

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

    Wednesday, May 14, 2014 1:43 AM
    Moderator
  • Is there no simpler way?

    \^_^/

    Wednesday, May 14, 2014 12:32 PM
  • 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.

    Thursday, May 15, 2014 12:56 AM
    Moderator
  • You can use control template to implement this. 

    Or see:Change Button Image On Hover or Click

    Thursday, May 15, 2014 2:50 AM
  • 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>


    \^_^/

    Thursday, May 15, 2014 4:22 PM
  • 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.

    Friday, May 16, 2014 6:44 AM
    Moderator