Question

任何人都可以检查我的代码并告诉我它有什么问题吗？这是我一直在研究的代码，我无法弄清楚为什么在点击按钮后鼠标悬停事件不会再触发。请帮助，谢谢！

更新：我尝试删除IsPressed事件，不知何故代码完美运行，与IsMouseover＆amp; IsPressed，我不知道如何解决它。

    <Style x:Key="MediaControls" TargetType="{x:Type Button}">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="FadeIn">
                            <DoubleAnimation Duration="0:0:0.15" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="0.8" />
                        </Storyboard>
                        <Storyboard x:Key="FadeOut">
                            <DoubleAnimation Duration="0:0:0.15" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="1" />
                        </Storyboard>
                        <Storyboard x:Key="ClickIn">
                            <DoubleAnimation Duration="0:0:0.20" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="0.5" />
                        </Storyboard>
                        <Storyboard x:Key="ClickOut">
                            <DoubleAnimation Duration="0:0:0.20" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="1" />
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <Border x:Name="ImageContainer" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource FadeIn}" x:Name="FadeIn_BeginStoryboard" />
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource FadeOut}" x:Name="FadeOut_BeginStoryboard" />
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ClickIn}" x:Name="ClickIn_BeginStoryboard" />
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource ClickOut}" x:Name="ClickOut_BeginStoryboard" />
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

使用visual states：

简化您的ControlTemplate

<ControlTemplate TargetType="{x:Type Button}">
    <Border Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="Disabled"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.15"
                            Storyboard.TargetProperty="Opacity" To="0.8" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.20"
                            Storyboard.TargetProperty="Opacity" To="0.5" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ContentPresenter x:Name="contentPresenter"
            Focusable="False" RecognizesAccessKey="True"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            Margin="{TemplateBinding Padding}"
            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    </Border>
</ControlTemplate>

Answer 2

您可以将 FillBehavior 设置为停止，以便动画在完成后停止覆盖该属性。使用以下代码修改资源部分。

<ControlTemplate.Resources>
    <Storyboard x:Key="FadeIn">
        <DoubleAnimation Duration="0:0:0.15"  Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="0.8" />
    </Storyboard>
    <Storyboard x:Key="FadeOut">
        <DoubleAnimation Duration="0:0:0.15" FillBehavior="Stop" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="1" />
    </Storyboard>
    <Storyboard x:Key="ClickIn">
        <DoubleAnimation Duration="0:0:0.20"  Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="0.5" />
    </Storyboard>
    <Storyboard x:Key="ClickOut">
        <DoubleAnimation Duration="0:0:0.20" FillBehavior="Stop" Storyboard.TargetName="ImageContainer" Storyboard.TargetProperty="Opacity" To="1" />
    </Storyboard>
</ControlTemplate.Resources>

WPF故事板只触发一次

2 个答案: