c# - 如何在设置颜色变化动画时更新 UI

Question

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

我正在使用 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 对象的某种属性或特性，它是 Foreground SolidColorBrush 或与 SolidColorBrush 关联的 Color。

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

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

Answer 1

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

我可以重现这个问题，并且我已经和团队讨论过，这是一个错误，我刚刚向相关团队报告了它。您还可以使用 Windows 反馈中心应用程序发布此内容。

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

更新

这并不理想，因为它涉及 2 个动画和 2 个独立的 BitmapIcons，我们可以通过仅使用 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();
}