.net - WPF 动画/UI 功能性能和基准测试

Question

我正在为一些业务线的东西和一些奇特的 WPF UI 工作做一个相对较小的概念验证。不用太疯狂，我已经看到在使用许多我认为是首先考虑使用 WPF 构建 UI 的主要原因的功能时性能非常差。我在这里问了一个问题，为什么我的动画在第一次运行时就停止了，最后我发现一个非常简单的 UserControl 只花了将近半秒的时间来构建它的可视化树。我能够解决该症状，但初始化一个简单控件需要那么长时间的事实确实让我很困扰。现在，我正在使用和不使用 DropShadowEffect 测试我的动画，结果是白天和黑夜。细微的阴影使我的控件看起来更漂亮，但它完全破坏了动画的流畅性。让我什至不从字体渲染开始。当控件有一堆渐变画笔和投影时，我的动画计算使文本模糊了大约一整秒，然后慢慢聚焦。

因此，我想我的问题是是否有已知的研究、博客文章或文章详细说明当前版本的 WPF 中哪些功能对业务关键型应用程序有危害。效果(即 DropShadowEffect)、渐变画笔、关键帧动画等是否会对渲染质量(或者可能是这些东西的组合)产生太多负面影响？ WPF 4.0 的最终版本是否会纠正其中的一些问题？我读过 VS2010 beta 有一些相同的问题，它们应该在最终版本中得到解决。这是因为 WPF 本身的改进，还是因为一半的应用程序将使用以前的技术重建？

Answer 1

我还在研究与 WPF 中的 DropShadow 效果相关的性能问题。

基本上，经验法则总是“不要使用它”。 WPF 中的 PixelShader 和位图 DropShadow 效果永远不适用于真实世界的应用程序...除非您的 UI 保持 100% 静态且没有移动部件，否则您的程序将在 95% 的客户群中像垃圾一样运行。

我要做的是伪造它。

这是我刚才想出的一个快速的 'n dirty DropShadow Decorator，它可以作为 PixelShader 投影效果的合理简化。你会想通过缓存画笔等使它更干净，但这应该给你一个想法:

using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows;
using System.Windows.Media;
using System;
using System.ComponentModel; 

namespace SichboPVR
{
    /// <summary>
    /// Emulates the System.Windows.Media.Effects.DropShadowEffect using
    /// rectangles and gradients, which performs a million times better
    /// and won't randomly crash a good percentage of your end-user's 
    /// video drivers.
    /// </summary>
    class FastShadow : Decorator 
    {

        #region Dynamic Properties

        public static readonly DependencyProperty ColorProperty =
                DependencyProperty.Register(
                        "Color",
                        typeof(Color),
                        typeof(FastShadow),
                        new FrameworkPropertyMetadata(
                                Color.FromArgb(0x71, 0x00, 0x00, 0x00),
                                FrameworkPropertyMetadataOptions.AffectsRender));

        /// <summary>
        /// The Color property defines the Color used to fill the shadow region. 
        /// </summary> 
        [Category("Common Properties")]
        public Color Color
        {
            get { return (Color)GetValue(ColorProperty); }
            set { SetValue(ColorProperty, value); }
        }

        /// <summary>
        /// Distance from centre, why MS don't call this "distance" beats
        /// me.. Kept same as other Effects for consistency.
        /// </summary>
        [Category("Common Properties"), Description("Distance from centre")]
        public double ShadowDepth
        {
            get { return (double)GetValue(ShadowDepthProperty); }
            set { SetValue(ShadowDepthProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ShadowDepth.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ShadowDepthProperty =
            DependencyProperty.Register("ShadowDepth", typeof(double), typeof(FastShadow), 
            new FrameworkPropertyMetadata(
                5.0, FrameworkPropertyMetadataOptions.AffectsRender,
                    new PropertyChangedCallback((o, e) => {
                        FastShadow f = o as FastShadow;
                        if ((double)e.NewValue < 0)
                            f.ShadowDepth = 0;
                    })));


        /// <summary>
        /// Size of the shadow
        /// </summary>
        [Category("Common Properties"), Description("Size of the drop shadow")]
        public double BlurRadius
        {
            get { return (double)GetValue(BlurRadiusProperty); }
            set { SetValue(BlurRadiusProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BlurRadius.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BlurRadiusProperty =
            DependencyProperty.Register("BlurRadius", typeof(double), typeof(FastShadow), 
            new FrameworkPropertyMetadata(10.0, 
                FrameworkPropertyMetadataOptions.AffectsRender,
                    new PropertyChangedCallback((o, e) => {
                        FastShadow f = o as FastShadow;
                        if ((double)e.NewValue < 0)
                            f.BlurRadius = 0;
                    })));


        /// <summary>
        /// Angle of the shadow
        /// </summary>
        [Category("Common Properties"), Description("Angle of the shadow")]
        public int Direction
        {
            get { return (int)GetValue(DirectionProperty); }
            set { SetValue(DirectionProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Direction.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty DirectionProperty =
            DependencyProperty.Register("Direction", typeof(int), typeof(FastShadow), 
            new FrameworkPropertyMetadata(315, FrameworkPropertyMetadataOptions.AffectsRender));


        #endregion Dynamic Properties

        #region Protected Methods

        protected override void OnRender(DrawingContext drawingContext)
        {

            double distance = Math.Max(0, ShadowDepth);
            double blurRadius = Math.Max(BlurRadius, 0);
            double angle = Direction + 45; // Make it behave the same as DropShadowEffect

            Rect shadowBounds = new Rect(new Point(0, 0),
                             new Size(RenderSize.Width, RenderSize.Height));

            shadowBounds.Inflate(blurRadius, blurRadius);

            Color color = Color;

            // Transform angle for "Direction"
            double angleRad = angle * Math.PI / 180.0;
            double xDispl = distance;
            double yDispl = distance;
            double newX = xDispl * Math.Cos(angleRad) - yDispl * Math.Sin(angleRad);
            double newY = yDispl * Math.Cos(angleRad) + xDispl * Math.Sin(angleRad);

            TranslateTransform translate = new TranslateTransform(newX, newY);
            Rect transformed = translate.TransformBounds(shadowBounds);

            // Hint: you can make the blur radius consume more "centre"
            //       region of the bounding box by doubling this here
            // blurRadius = blurRadius * 2;

            // Build a set of rectangles for the shadow box
            Rect[] edges = new Rect[] { 
                new Rect(new Point(transformed.X,transformed.Y), new Size(blurRadius,blurRadius)), // TL
                new Rect(new Point(transformed.X+blurRadius,transformed.Y), new Size(Math.Max(transformed.Width-(blurRadius*2),0),blurRadius)), // T
                new Rect(new Point(transformed.Right-blurRadius,transformed.Y), new Size(blurRadius,blurRadius)), // TR
                new Rect(new Point(transformed.Right-blurRadius,transformed.Y+blurRadius), new Size(blurRadius,Math.Max(transformed.Height-(blurRadius*2),0))), // R
                new Rect(new Point(transformed.Right-blurRadius,transformed.Bottom-blurRadius), new Size(blurRadius,blurRadius)), // BR
                new Rect(new Point(transformed.X+blurRadius,transformed.Bottom-blurRadius), new Size(Math.Max(transformed.Width-(blurRadius*2),0),blurRadius)), // B
                new Rect(new Point(transformed.X,transformed.Bottom-blurRadius), new Size(blurRadius,blurRadius)), // BL
                new Rect(new Point(transformed.X,transformed.Y+blurRadius), new Size(blurRadius,Math.Max(transformed.Height-(blurRadius*2),0))), // L
                new Rect(new Point(transformed.X+blurRadius,transformed.Y+blurRadius), new Size(Math.Max(transformed.Width-(blurRadius*2),0),Math.Max(transformed.Height-(blurRadius*2),0))), // C
            };

            // Gradient stops look a lot prettier than
            // a perfectly linear gradient..
            GradientStopCollection gsc = new GradientStopCollection();
            Color stopColor = color;
            stopColor.A = (byte)(color.A);
            gsc.Add(new GradientStop(color, 0.0));
            stopColor.A = (byte)(.74336 * color.A);
            gsc.Add(new GradientStop(stopColor, 0.1));
            stopColor.A = (byte)(.38053 * color.A);
            gsc.Add(new GradientStop(stopColor, 0.3));
            stopColor.A = (byte)(.12389 * color.A);
            gsc.Add(new GradientStop(stopColor, 0.5));
            stopColor.A = (byte)(.02654 * color.A);
            gsc.Add(new GradientStop(stopColor, 0.7));
            stopColor.A = (byte)(0);
            gsc.Add(new GradientStop(stopColor, 0.9));

            gsc.Freeze(); 

            Brush[] colors = new Brush[]{
                // TL
                new RadialGradientBrush(gsc){ Center = new Point(1, 1), GradientOrigin = new Point(1, 1), RadiusX=1, RadiusY=1},
                // T
                new LinearGradientBrush(gsc, 0){ StartPoint = new Point(0,1), EndPoint=new Point(0,0)},
                // TR
                new RadialGradientBrush(gsc){ Center = new Point(0, 1), GradientOrigin = new Point(0, 1), RadiusX=1, RadiusY=1},
                // R
                new LinearGradientBrush(gsc, 0){ StartPoint = new Point(0,0), EndPoint=new Point(1,0)},
                // BR
                new RadialGradientBrush(gsc){ Center = new Point(0, 0), GradientOrigin = new Point(0, 0), RadiusX=1, RadiusY=1},
                // B
                new LinearGradientBrush(gsc, 0){ StartPoint = new Point(0,0), EndPoint=new Point(0,1)},
                // BL
                new RadialGradientBrush(gsc){ Center = new Point(1, 0), GradientOrigin = new Point(1, 0), RadiusX=1, RadiusY=1},
                // L
                new LinearGradientBrush(gsc, 0){ StartPoint = new Point(1,0), EndPoint=new Point(0,0)},
                // C
                new SolidColorBrush(color), 
            };

            // This is a test pattern, uncomment to see how I'm drawing this
            //Brush[] colors = new Brush[]{
            //    Brushes.Red,
            //    Brushes.Green,
            //    Brushes.Blue,
            //    Brushes.Fuchsia,
            //    Brushes.Gainsboro,
            //    Brushes.LimeGreen,
            //    Brushes.Navy,
            //    Brushes.Orange,
            //    Brushes.White,
            //};
            double[] guidelineSetX = new double[] { transformed.X,
                                                    transformed.X+blurRadius,
                                                    transformed.Right-blurRadius,
                                                    transformed.Right};

            double[] guidelineSetY = new double[] { transformed.Y,
                                                    transformed.Y+blurRadius,
                                                    transformed.Bottom-blurRadius,
                                                    transformed.Bottom};

            drawingContext.PushGuidelineSet(new GuidelineSet(guidelineSetX, guidelineSetY)); 
            for (int i = 0; i < edges.Length; i++)
            {
                drawingContext.DrawRoundedRectangle(colors[i], null, edges[i], 0.0, 0.0);
            }
            drawingContext.Pop();
        }

        #endregion

    }
}

Soo.. 用法是这样的；

<Sichbo:FastShadow Color="Black" ShadowDepth="0" BlurRadius="30">
<Grid>.. content here ..</Grid>
</Sichbo:FastShadow>

.. 输出应该非常接近 PS dropshadow 所做的.. 显然只适用于“四四方方”的元素，但运行时的速度差异应该是白天和黑夜，动画在高分辨率下应该如丝般顺滑，并且您可以让您的 UI 看起来很漂亮。