C# 如何在UWP中为自定义控件上的属性设置动画？

我想在自定义控件中设置笔刷动画。笔刷的不透明度绑定到笔刷，如下所示：

<Style TargetType="trrfc:CustomControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="trrfc:PriceControl">
                <Grid>
                    <Border Background="Red"
                            Opacity="{TemplateBinding MaskOpacity"}/>
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

namespace ThetaRex.Radar.Forms.Controls
{
    using System;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Hosting;
    using Windows.UI.Xaml.Media;

    public class CustomControl : ContentControl
    {
        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
            "Value",
            typeof(decimal),
            typeof(CustomControl),
            new PropertyMetadata(default(decimal), new PropertyChangedCallback(CustomControl.OnValuePropertyChanged)));

        public static readonly DependencyProperty MaskBackgroundProperty = DependencyProperty.Register(
            nameof(CustomControl.MaskBackground),
            typeof(Brush),
            typeof(CustomControl),
            new PropertyMetadata(default(Brush)));

        public static readonly DependencyProperty MaskOpacityProperty = DependencyProperty.Register(
            nameof(CustomControl.MaskOpacity),
            typeof(float),
            typeof(CustomControl),
            new PropertyMetadata(default(float)));

        public CustomControl()
        {
            // This allows the control to pick up a template.
            this.DefaultStyleKey = typeof(CustomControl);
        }

        public decimal Value
        {
            get => (decimal)this.GetValue(CustomControl.ValueProperty);
            set => this.SetValue(CustomControl.ValueProperty, value);
        }

        public Brush MaskBackground
        {
            get => this.GetValue(CustomControl.MaskBackgroundProperty) as Brush;
            set => this.SetValue(CustomControl.MaskBackgroundProperty, value);
        }

        public float MaskOpacity
        {
            get => (float)this.GetValue(CustomControl.MaskOpacityProperty);
            set => this.SetValue(CustomControl.MaskOpacityProperty, value);
        }

        private static void OnValuePropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
        {
            CustomControl priceControl = dependencyObject as CustomControl;
            var priceControlVisual = ElementCompositionPreview.GetElementVisual(priceControl);
            var compositor = priceControlVisual.Compositor;

            // Start a new animation that will flash an opaque background, then slowly fade to transparent.
            var opacityAnimation = compositor.CreateScalarKeyFrameAnimation();
            opacityAnimation.Duration = TimeSpan.FromSeconds(10.0);
            opacityAnimation.InsertKeyFrame(0.0f, 1.0f, compositor.CreateLinearEasingFunction());
            opacityAnimation.InsertKeyFrame(1.0f, 0.0f, compositor.CreateLinearEasingFunction());
            priceControlVisual.StartAnimation(nameof(priceControl.MaskOpacity), opacityAnimation);
        }
    }
}

运行此操作时，我得到一个错误：

参数不正确。找不到指定的属性或无法设置其动画。上下文：MaskOpacity表达式：MaskOpacity开始位置：0，结束位置：11

如果我通过在StartAnimation调用中指定priceControl.opacity来设置整个控件的不透明度的动画，那么这段代码的效果与预期的一样。是否有人知道如何在自定义控件（如MaskOpacity）上设置属性动画的示例或线索

如何在UWP中为自定义控件上的属性设置动画

我们无法将合成api用于动画自定义属性。根据您的需要，更好的方法是使用

情节提要

以

MaskOpacity

值为特定边界控件设置动画。请参考以下代码

public static Border RootBorder { get; set; }
protected override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    // give the border x:Name RootBorder.
    RootBorder = GetTemplateChild("RootBorder") as Border;

}
private static void OnValuePropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
    var duration = new Duration(TimeSpan.FromSeconds(10));
    var ease = new CubicEase { EasingMode = EasingMode.EaseOut };
    var animation = new DoubleAnimation
    {
        EasingFunction = ease,
        Duration = duration
    };

    var conStoryboard = new Storyboard();
    conStoryboard.Children.Add(animation);
    animation.From = 1.0f;
    animation.To = (double)dependencyObject.GetValue(MaskOpacityProperty);
    animation.EnableDependentAnimation = false;
    Storyboard.SetTarget(animation, RootBorder);
    Storyboard.SetTargetProperty(animation, "Opacity");
    conStoryboard.Begin();
}

---

我试过这么做一次。从我所记得的，你不能用合成API制作自定义属性的动画。看看表达式动画吧。您可以将一些内容组合在一起，在某些虚拟控件上设置属性动画，表达式设置自定义属性动画。