为WPF按钮设置动画时出现问题 [英] Problem animating a WPF button

问题描述

我有一个按钮，这是一个独特的按钮，他的风格可能与其他所有风格都不匹配.因此，当您将鼠标移到该按钮上时，它将更改其图像.但这不起作用，下面是代码...我从WPF开始，所以如果您能指出我在做什么错，我将不胜感激

I have a button, this is a unique button, and his style should çn't match the style of all the others. So when you pass your mouse over this button, it should change its image. But it is not working, Here is the code... I'm starting at WPF so if you can point me what am I doing wrong would be really appreciated

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

推荐答案

对于CloseActive图像，请使用 Opacity ="0" ，而不要使用 Visibility ="Hidden" .在动画中，您正在调整图像的不透明度，但它仍处于隐藏状态.

For the CloseActive image, instead of using Visibility="Hidden" try Opacity="0". In your animation you're adjusting the opacity of the image, but it's still hidden.

除了删除可见性属性外，请尝试将动画触发器直接放置在 Button.Triggers

In addition to removing the visibility attribute, try putting the animation triggers directly in Button.Triggers

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

因为您不能在从样式调用的情节提要中使用 Storyboard.TargetName .您还必须使用事件触发器而不是常规触发器.您也可以删除 CloseButtonStyle ，因为它不会被使用.

since you can't use Storyboard.TargetName in a storyboard called from a style. You'll also have to use event triggers instead of normal triggers. You can also remove the CloseButtonStyle since it won't be used.

这篇关于为WPF按钮设置动画时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！