c# - 在 Windows Phone 上制作闪烁/闪烁按钮

Question

我正在尝试学习一些关于故事板和动画的知识，所以我决定做一个简单的闪烁按钮。

经过一番挣扎，我已经能够录制动画，但它没有按预期工作。

动画播放一次，似乎忽略了我的SpeedRatio财产。我什至失去了Pressed动画！

这是我的代码：

XAML

<UserControl x:Class="BPMFlashingButton.BPMFlashingButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<UserControl.Resources>
    <Style x:Key="BPMFlashingButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CustomStates">
                                <VisualState x:Name="Flashing">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="LayoutRoot" RepeatBehavior="Forever">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Button x:Name="FlashingButton" Content="Blink" Style="{StaticResource BPMFlashingButton}" BorderBrush="{StaticResource PhoneBorderBrush}"/>

然后我有这个方法

public void startAnimation()
    {
        VisualStateManager.GoToState(FlashingButton, "Flashing", true);
    }

使动画开始。

但是当我调用它时，按钮变为红色并保持静止，不闪烁！

有什么建议吗？

Answer 1

我认为你应该记录一个独立的故事板而不是使用 VisualStateManager。您将 Storyboard 设置为 RepeatBehavior="Forever" 并使用 Trigger 触发它。