如何使鼠标悬停时按钮的背景改变

本文关键字：背景 改变 按钮 何使 鼠标 悬停 | 更新日期: 2023-09-27 18:19:13

在下面的代码中，我想使一个蓝色的图像背景按钮变为绿色的图像按钮，鼠标在上面。

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

如何使鼠标悬停时按钮的背景改变

您设置了按钮的背景，但随后您覆盖了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>
相关文章：