鼠标悬停时 WPF 更改按钮图像

Question

I am new to wpf, and I am trying to change a button's image on mouse hovering with no success (using some methods that mentioned in some answers).

The code is:

<Button x:Name="SignlePlayerButton" Content="Button" HorizontalAlignment="Left" Margin="37,104,0,0" VerticalAlignment="Top" Width="150" Height="57" BorderThickness="0" Click="SignlePlayerButton_Click">
    <Button.Background>
        <ImageBrush ImageSource="Design/singleplayer.jpg"/>
    </Button.Background>   
</Button>

What should I add to this xaml code?

Answer 1

please try to set the next style as a style for your button:

  <Style x:Key="ChangeContentOnMouseOver" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Content">
                    <Setter.Value>
                        <Image Source="Images/RedButtonBackGround.jpg"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Content">
                    <Setter.Value>
                        <Image Source="Images/Koala.jpg"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

A small explanation: Each time you will over your button with the mouse, the content image will be switched.

Update #1 - Style with animation when pressed

<Style x:Key="ChangeContentOnMouseOverWithAnimationWhenPressed" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="{StaticResource RedButtonBackGround}"/>
        <Setter Property="Foreground" Value="Yellow"></Setter>
        <Setter Property="Width" Value="50"></Setter>
        <Setter Property="Height" Value="50"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5 0.5">
                        <Grid.RenderTransform>
                            <ScaleTransform></ScaleTransform>
                        </Grid.RenderTransform>
                        <Border x:Name="MyBorder" CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1"/>
                        <Border x:Name="RectangleVisibleOnMouseMove" Opacity="0" CornerRadius="5" Background="{StaticResource KoalaImageBrushKey}" BorderThickness="1"/>
                        <Border x:Name="RectangleVisibleOnCklick" Opacity="0" CornerRadius="5" Background="Blue" BorderThickness="1"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Button.MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnMouseMove" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Button.MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnMouseMove" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Button.PreviewMouseDown">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" 
                                   Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="0.8" />
                                  </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" 
                                   Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="0.8" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Button.PreviewMouseUp">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" 
                                   Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.8" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="1.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" 
                                   Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.8" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.10" Value="1.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick" 
                                   Storyboard.TargetProperty="(FrameworkElement.Opacity)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.1" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.0" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Foreground" Value="White"></Setter>
            </Trigger>
            <Trigger Property="IsPressed" Value="False">
                <Setter Property="Foreground" Value="Yellow"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

Explanation for Update #1: Here the button control is completely re-templated, you can define your own content as you need , and in addition it is animated when pressed(like a regular button). The animation is a scaling of the button with some parameters.

You can see how it looks like:

Regards.

Answer 2

Please try this. It should work for you.

<Window x:Class="testscroll.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:local="clr-namespace:testscroll"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow"
        Width="525"
        Height="350"
        mc:Ignorable="d">
    <Grid>
        <Button x:Name="SignlePlayerButton"
                Width="150"
                Height="57"
                Margin="37,104,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                BorderThickness="0"
                Click="SignlePlayerButton_Click">
            <Button.Background>
                <ImageBrush ImageSource="Design/singleplayer.jpg" />
            </Button.Background>
            <ControlTemplate TargetType="Button">
                <Border Name="border"
                        Background="Transparent"
                        BorderThickness="0">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="/Design/SOMEOTHERIMAGE.jpg" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="/Design/singleplayer.jpg" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button>
    </Grid>
</Window>