c# - 如何在动画颜色更改时更新 UI

Question

我正在用 C# 编写一个 UWP WinRT 应用程序。我发现了非常有用的 BitmapIcon 类，并将它用于我的应用程序主页上的图标网格。 BitmapIcon 类有一个 Foreground 画笔，可用于覆盖原始位图的颜色，当某些东西控制图标颜色与图片本身分开时(如服务器指示图标为红色以表明它很重要)，这很方便.

我正在使用 Storyboard动画来更改图标颜色(对于我知道这些天不喜欢但我被迫这样做的闪烁效果)。这是代码:

        ColorAnimationUsingKeyFrames colorAnimation = new ColorAnimationUsingKeyFrames();
        colorAnimation.Duration = TimeSpan.FromSeconds( 3 );
        colorAnimation.EnableDependentAnimation = true;

        IconImage.Foreground = new SolidColorBrush( iconColor ?? AppSettings.appColor );

        DiscreteColorKeyFrame key1 = new DiscreteColorKeyFrame();
        key1.Value = finishColor;
        key1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds( 0 ) );
        colorAnimation.KeyFrames.Add( key1 );

        LinearColorKeyFrame key2 = new LinearColorKeyFrame();
        key2.Value = startColor;
        key2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds( 3.0 ) );
        colorAnimation.KeyFrames.Add( key2 );

        colorAnimation.RepeatBehavior = RepeatBehavior.Forever;

        Storyboard.SetTargetProperty( colorAnimation, "(BitmapIcon.Foreground).Color" );
        Storyboard.SetTarget( colorAnimation, IconImage );

        // Create a storyboard to apply the animation.
        //Storyboard myStoryboard = new Storyboard();
        animationStoryboard.Children.Add( colorAnimation );
        animationStoryboard.Duration = colorAnimation.Duration;
        animationStoryboard.RepeatBehavior = colorAnimation.RepeatBehavior;
        animationStoryboard.Begin();

这似乎有点奏效。我没有异常(exception)，颜色确实发生了变化。问题是更改没有显示在窗口中。如果我调整应用程序窗口的大小，可以看到颜色在我拖动窗口边缘时发生变化。当我停下来时，他们停止显示变化，但变化似乎仍然在后台无形地发生。我可以看出背景中的数字正在发生变化，因为当我暂时停止更改窗口大小时会发生颜色跳跃。

自从我使用 C# UWP WinRT 代码以来已经有一段时间了，我想我缺少 Imageicon 对象的某种属性或属性，它是前景 SolidColorBrush，或与 SolidColorBrush 关联的颜色。

在我的代码的其他地方，我使用类似的方法来为窗口上的打开和关闭侧边栏设置动画。正如预期的那样，效果很好，动画也很流畅。

我需要弄清楚为什么颜色似乎发生了变化，但 UI 没有不断更新。

Answer 1

How can I get the UI to update when animating a color change

我可以重现这个问题，我已经和团队讨论过，这是一个错误，我刚刚报告给相关团队。您也可以使用 Windows 反馈中心应用发布此信息。

如果我收到有关此的任何信息，我会在下面更新。谢谢!

更新

这并不理想，因为它涉及 2 个动画和 2 个独立的 BitmapIcon，我们可以通过仅使用 1 个动画并在 BitmapIcon 后面放置一个静态图像来根据自己的喜好调整它。请检查以下代码。

<Grid>
    <BitmapIcon
        x:Name="IconImageOne"
        Foreground="Red"
        UriSource="ms-appx:///Assets/StoreLogo.png">
        <BitmapIcon.Resources>
            <Storyboard x:Name="animationStoryboard">
                <DoubleAnimation
                    AutoReverse="True"
                    RepeatBehavior="Forever"
                    Storyboard.TargetName="IconImageOne"
                    Storyboard.TargetProperty="Opacity"
                    From="1.0"
                    To="0.0"
                    Duration="0:0:3" />
                <DoubleAnimation
                    AutoReverse="True"
                    RepeatBehavior="Forever"
                    Storyboard.TargetName="IconImageTwo"
                    Storyboard.TargetProperty="Opacity"
                    From="0.0"
                    To="1.0"
                    Duration="0:0:3" />
            </Storyboard>
        </BitmapIcon.Resources>
    </BitmapIcon>

    <BitmapIcon
        x:Name="IconImageTwo"
        Foreground="Green"
        Tapped="IconImage_Tapped"
        UriSource="ms-appx:///Assets/StoreLogo.png" />
</Grid>

隐藏代码

private void StatAnimation()
{

    animationStoryboard.Begin();
}

private void IconImage_Tapped(object sender, TappedRoutedEventArgs e)
{
    StatAnimation();
}