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

【问题标题】：WPF change button Image when mouse hover鼠标悬停时WPF更改按钮图像
【发布时间】：2016-05-02 22:05:19
【问题描述】：

我是 wpf 的新手，我试图在鼠标悬停时更改按钮的图像但没有成功（使用某些答案中提到的一些方法）。

代码是：

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

我应该在这个 xaml 代码中添加什么？

【问题讨论】：

你到底尝试了什么？你想让按钮看起来像什么？正如您的 XAML 所建议的那样，它实际上是否应该有文本“按钮”？

标签： c# wpf

【解决方案1】：

请尝试将下一个样式设置为按钮的样式：

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

一个小解释：每次您将鼠标悬停在按钮上时，都会切换内容图像。

更新 #1 - 按下时带有动画的样式

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

更新 #1 的说明：这里的按钮控件完全重新模板化，您可以根据需要定义自己的内容，此外，它在按下时具有动画效果（就像普通按钮一样）。动画是带有一些参数的按钮的缩放。

您可以看到它的样子：

问候。

【讨论】：

【解决方案2】：

请试试这个。它应该适合你。

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

【讨论】：

感谢您的帮助，但它不起作用。悬停时，按钮变为淡蓝色。