WPF按钮内容图像Onmouserover更改

Posted 2021-03-27

我使用Button的内容（不是背景）作为图像，并希望在鼠标上设置另一个图像。我试图将内容设置如下，但失败了。

<Button x:Name="Test" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="40,40,0,0" Height="120" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" BorderThickness="0" Click="Test_Click">
<Button.Content>
    <Image Source="Images/Test.png"></Image>                    
</Button.Content>
<Button.Style>
    <Style>
        <Style.Triggers>
            <Trigger Property="Button.IsMouseOver" Value="True">
                <Setter Property="Button.Content" Value=" <Image Source='Images/TestHover.png'></Image> " />
            </Trigger>
        </Style.Triggers>
    </Style>
</Button.Style>

答案

这很容易！检查图像的IsMouseover事件不是按钮。另外检查this有不同的方法来改变MouseOver事件上的图像。

<Button Name="testBtn" Margin="10 0 0 0" Click="TestBtn_OnClick">
    <Button.Content>
        <Image>
            <Image.Style>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Source" Value="Resources/Apps-Dialog-Close-icon.png"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Source" Value="Resources/basic-grid-with-center-lines-png-14.png"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </Button.Content>
</Button>

另一答案

你能试试控制模板吗？

<Button Width="100" Height="100">
        <Button.Template>
            <ControlTemplate>
                <Image Name="image" Source="pack://application:,,,/images/1.png"/>
                <ControlTemplate.Triggers>
                    <Trigger  Property="Button.IsMouseOver" Value="true">
                        <Setter Property="Source" TargetName="image" Value="pack://application:,,,/images/2.png"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>