Question

我是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代码中添加什么内容？

Answer 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的说明：在这里，按钮控件完全重新模板化，您可以根据需要定义自己的内容，此外，按下时也会设置动画（如常规按钮）。动画是按钮的缩放，带有一些参数。

你可以看到它的样子：

问候。

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

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

2 个答案: