用户控件动画仅适用于最后声明的控件实例

Question

我正在制作一个（Windows 10 通用应用程序）UI 的原型并构建了一个非常 simple/rough 的用户控件来充当 'badge'，即显示一个圆圈中的数值，并为值的变化设置动画。我的问题是，如果应用程序页面中只有一个控件实例，控件就可以正常工作。如果有多个实例（即使其他实例不可见），则只有最后声明的实例有动画效果。

我已经尝试在用户控件的 XAML 和代码隐藏中声明动画，以确保没有 cross-over/mix 共享动画。我还向正在动画的属性添加了一个更改回调，它使用 Debug.WriteLine 写出属性值。对于正确设置动画的控件实例，值会按预期更改，即如果我们从 10 变为 20，则属性设置为 10、11、12、13 .... 20。对于不正确设置的实例工作，该值每次都设置为来自属性，即 10, 10, 10, 10, 10.

下面是用户控件的示例，然后是使用它的三个实例的示例页面。放置这两个是一个新的 Windows 10 名为 App3 的通用应用程序应该会重现该问题。在示例页面中，前两个徽章在其按钮被单击时没有正确动画，但最后一个可以。

有谁能指出我做错了什么，以及为什么页面上出现多个实例时会中断？

谢谢。

注意：代码已经变得相当粗糙，因为我已经破解了一些东西试图找出问题所在，而且它只是开始的原型代码，所以我为混乱表示歉意。

<UserControl
x:Class="App3.BadgeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="20"
d:DesignWidth="20">
<Grid>
    <Ellipse x:Name="Border" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{Binding BadgeBorderBrush}" />
    <Ellipse x:Name="BadgeInner" Margin="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{Binding BadgeFillBrush}" />
    <TextBlock x:Name="BadgeValue" Margin="5" HorizontalAlignment="Center" FontSize="10" VerticalAlignment="Center" TextAlignment="Center" TextTrimming="CharacterEllipsis" Foreground="White" Text="{Binding DisplayValue}" />
</Grid>

public sealed partial class BadgeView : UserControl
{

    public DependencyProperty BadgeBorderBrushProperty = DependencyProperty.Register("BadgeBorderBrush", typeof(Brush), typeof(BadgeView), new PropertyMetadata(new SolidColorBrush(Windows.UI.Colors.Yellow)));
    public DependencyProperty BadgeFillBrushProperty = DependencyProperty.Register("BadgeFillBrush", typeof(Brush), typeof(BadgeView), new PropertyMetadata(new SolidColorBrush(Windows.UI.Colors.Orange)));

    public DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(BadgeView), new PropertyMetadata(0, new PropertyChangedCallback(ValueChanged)));
    public DependencyProperty DisplayValueProperty = DependencyProperty.Register("DisplayValue", typeof(int), typeof(BadgeView), new PropertyMetadata(0, DisplayValueChanged));

    private static void DisplayValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        System.Diagnostics.Debug.WriteLine(((BadgeView)d).DisplayValue);
    }

    private Storyboard AnimateBadgeValueCount;
    private DoubleAnimation BadgeValueAnimation;

    public BadgeView()
    {
        this.InitializeComponent();
        this.BadgeValue.DataContext = this.BadgeInner.DataContext = this.Border.DataContext = this;

        AnimateBadgeValueCount = new Storyboard(); ;
        AnimateBadgeValueCount.Duration = TimeSpan.FromSeconds(0.5);
        Storyboard.AllowDependentAnimations = true;
        BadgeValueAnimation = new DoubleAnimation();
        BadgeValueAnimation.Duration = TimeSpan.FromSeconds(0.5);
        BadgeValueAnimation.EnableDependentAnimation = true;
        BadgeValueAnimation.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut };

        this.AnimateBadgeValueCount.FillBehavior = FillBehavior.Stop;
        this.BadgeValueAnimation.FillBehavior = FillBehavior.Stop;
        AnimateBadgeValueCount.Children.Add(BadgeValueAnimation);

        Storyboard.SetTarget(AnimateBadgeValueCount, this);
        Storyboard.SetTargetProperty(AnimateBadgeValueCount, "DisplayValue");

        this.AnimateBadgeValueCount.Completed += AnimateBadgeValueCount_Completed;
    }

    private void AnimateBadgeValueCount_Completed(object sender, object e)
    {
        this.DisplayValue = this.Value;
    }

    private static void ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var badgeView = (BadgeView)d;

        badgeView.AnimateValue();
    }

    private void AnimateValue()
    {
        if (Value != DisplayValue)
        {
            this.BadgeValue.DataContext = this.BadgeInner.DataContext = this.Border.DataContext = this;

            this.AnimateBadgeValueCount.Stop();
            this.BadgeValueAnimation.From = this.DisplayValue;
            this.BadgeValueAnimation.To = this.Value;
            this.BadgeValueAnimation.FillBehavior = FillBehavior.Stop;
            //Storyboard.SetTarget(this.AnimateBadgeValueCount, this);
            //Storyboard.SetTargetProperty(this.AnimateBadgeValueCount, "DisplayValue");
            this.AnimateBadgeValueCount.Begin();
        }
    }

    public Brush BadgeBorderBrush
    {
        get { return (Brush)this.GetValue(this.BadgeBorderBrushProperty); }
        set
        {
            this.SetValue(this.BadgeBorderBrushProperty, value);
        }
    }

    public Brush BadgeFillBrush
    {
        get { return (Brush)this.GetValue(this.BadgeFillBrushProperty); }
        set
        {
            this.SetValue(this.BadgeFillBrushProperty, value);
        }
    }

    public int Value
    {
        get { return (int)this.GetValue(ValueProperty); }
        set
        {
            this.SetValue(ValueProperty, value);
        }
    }

    public int DisplayValue
    {
        get { return (int)this.GetValue(DisplayValueProperty); }
        set
        {
            this.SetValue(DisplayValueProperty, value);
        }
    }

}

<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<StackPanel Orientation="Vertical">
    <Button Content="Do it" x:Name="DoIt1" Click="DoIt1_Click" />
    <local:BadgeView x:Name="Badge1" Width="20" Height="20" BadgeFillBrush="Blue" />

    <Button Content="Do it" x:Name="DoIt2" Click="DoIt2_Click" />
    <local:BadgeView x:Name="Badge2" Width="20" Height="20" />

    <Button Content="Do it" x:Name="DoIt3" Click="DoIt3_Click" />
    <local:BadgeView x:Name="Badge3" Width="20" Height="20" />

</StackPanel>

    public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void DoIt1_Click(object sender, RoutedEventArgs e)
    {
        this.Badge1.Value += 10;
    }

    private void DoIt2_Click(object sender, RoutedEventArgs e)
    {
        this.Badge2.Value += 10;
    }

    private void DoIt3_Click(object sender, RoutedEventArgs e)
    {
        this.Badge3.Value += 10;
    }
}

Answer 1

我所做的是简化代码并简化和移动构造函数内加载事件内的数据上下文：

this.Loaded += (s, e) =>
        {
            this.DataContext = this;

            AnimateBadgeValueCount = new Storyboard(); ;
            AnimateBadgeValueCount.Duration = TimeSpan.FromSeconds(0.5);
            BadgeValueAnimation = new DoubleAnimation();
            BadgeValueAnimation.Duration = TimeSpan.FromSeconds(0.5);
            //BadgeValueAnimation.EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut };
            AnimateBadgeValueCount.Children.Add(BadgeValueAnimation);

            Storyboard.SetTarget(AnimateBadgeValueCount, this);
            Storyboard.SetTargetProperty(AnimateBadgeValueCount, "DisplayValue");

            this.AnimateBadgeValueCount.Completed += AnimateBadgeValueCount_Completed;
        };


private async void AnimateValue()
    {
        if (Value != DisplayValue)
        {
            this.AnimateBadgeValueCount.Stop();
            this.BadgeValueAnimation.From = this.DisplayValue;
            this.BadgeValueAnimation.To = this.Value;
            BadgeValueAnimation.EnableDependentAnimation = true;

            await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, () =>
             {
                 this.AnimateBadgeValueCount.Begin();
             });
        }
    }

我评论了 EasingFunction，它可以工作，但在我看来更合适。这很好奇，因为如果我只在构造函数中设置数据上下文，它会工作得很糟糕，但内部运行正常。如果你尝试告诉我。

用户控件动画仅适用于最后声明的控件实例

User Control Animation Only Works On Last Declared Control Instance

xaml

animation

user-controls

windows-10

win-universal-app