如何在鼠标悬停时更改按钮的背景

Question

在下面的代码中，我想在鼠标悬停时将蓝色图像背景按钮更改为绿色图像按钮。

我的 XAML 代码如下，但鼠标悬停在按钮上时没有任何反应。 NextButton.png 是原始按钮，nextGreen.png 应该是鼠标悬停时的背景。

问题出在哪里？

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        Content=""
        HorizontalAlignment="Right"
        Margin="0,0,0.2,0"
        VerticalAlignment="Bottom"
        Width="50"
        Height="100"
        Grid.Column="1"
        Click="Next_Click">
    <Button.Background>
        <ImageBrush ImageSource="NextButton.png" />
    </Button.Background>
    <Button.Template>
        <ControlTemplate>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="nextGreen.png" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
            <StackPanel>
                <StackPanel.Background>
                    <ImageBrush ImageSource="Nextbutton.png"/>
                </StackPanel.Background>
            </StackPanel>
        </ControlTemplate>
    </Button.Template>
</Button>

Answer 1

您设置了按钮的背景，但随后覆盖了Template，因此Button.Background 永远不会显示。你应该去掉Button.Background，然后在Template 中命名StackPanel，这样你就可以在Trigger 中更改背景。

 <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Content="" HorizontalAlignment="Right" Margin="0,0,0.2,0" VerticalAlignment="Bottom" Width="50" Height="100" Grid.Column="1" Click="Next_Click">
   <Button.Template>
        <ControlTemplate>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" TargetName="root">
                        <Setter.Value>
                            <ImageBrush ImageSource="nextGreen.png" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
            <StackPanel x:Name="root">
                <StackPanel.Background>
                    <ImageBrush ImageSource="Nextbutton.png"/>
                </StackPanel.Background>
            </StackPanel>
        </ControlTemplate>
    </Button.Template>
</Button>