时间戳

首页 > 解决方案 > WPF 按钮内容图像 Onmouserover 更改

wpf - WPF 按钮内容图像 Onmouserover 更改

问题描述

我正在使用 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>

标签： wpfimagebuttonmouseover

解决方案

这很容易！检查IsMouseover图像的事件而不是按钮。另外检查这个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>

推荐阅读