设置WPF按钮的动画时出现问题

我有一个按钮，这是一个独特的按钮，他的风格不应该匹配所有其他的风格。所以当你把鼠标放在这个按钮上时，它应该会改变它的图像。但它不起作用，这是代码。。。我从WPF开始，如果你能告诉我我做错了什么，我将非常感激

<Button Name="RemoveButton" ClickMode="Press"  BorderThickness="0" Background="Transparent" Style="{StaticResource ButtonStyle1}">
        <Button.Content>
            <Grid>
                <Image x:Name="CloseActive" x:FieldModifier="public" Height="12" VerticalAlignment="Center" Source="/HTFS.Atlas.Portfolio.PortfolioClient.WCF.Controls;component/Images/tab-close.png" Visibility="Hidden" />
                <Image x:Name="CloseInactive" x:FieldModifier="public" Height="12" VerticalAlignment="Center" Source="/HTFS.Atlas.Portfolio.PortfolioClient.WCF.Controls;component/Images/tab-close-inactive.png" />
            </Grid>
        </Button.Content>
        <Button.Resources>
            <Storyboard x:Key="MouseOverAnimation">
                <DoubleAnimation Storyboard.TargetName="CloseActive" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5" />
                <DoubleAnimation Storyboard.TargetName="CloseInactive" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5" />
            </Storyboard>
            <Storyboard x:Key="MouseOutAnimation">
                <DoubleAnimation Storyboard.TargetName="CloseInactive" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5" />
                <DoubleAnimation Storyboard.TargetName="CloseActive" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5" />
            </Storyboard>
            <Style x:Key="CloseButtonStyle" TargetType="{x:Type Control}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Resources>
    </Button>

---

对于关闭的活动图像，不要使用

Visibility=“Hidden”

尝试

Opacity=“0”

。 在动画中，您正在调整图像的不透明度，但它仍然是隐藏的

除了删除可见性属性外，还可以尝试将动画触发器直接放入

按钮中。触发器

        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
            </EventTrigger>
        </Button.Triggers>

因为不能在从样式调用的故事板中使用

故事板.TargetName

。您还必须使用事件触发器而不是普通触发器。

---

您还可以删除

CloseButtonStyle

，因为它不会被使用。

我更新了答案，将触发器移动到Button.triggers中，在那里它们可以正常工作。网格中图像的顺序很重要。把最接近的那个放在末尾。@Alex Paven:在这种情况下，顺序应该无关紧要，因为他正在淡出一个图像，而淡出另一个图像。