win10 uwp 进度条 WaveProgressControl

昨天看到了有个大神做出好看的进度条样式，于是我就去抄袭他的代码，但是发现看不懂，于是本文主要翻译就是大神说这个控件如何做。

本文翻译 https://stackoverflow.com/a/46057193/6116637 来这 liu xin 大神的控件。

上面的控件实际就是两个圆，然后 Compositor 让背景显示在里面的圆。因为可以使用下面图片的方式，看起来就是从一个圆里出现背景。实际就是背景移动图片，可以看到图片移动的时候，看里面的圆的背景，就是上面那张图的样子。

win10 uwp 进度条 WaveProgressControl

也就是在图片的上移就是进度，可以用 Percent 来知道现在的进度，然后计算显示的高度，很容易就计算出上移。然后图片可以通过 Adobe Illustrator 工具来做，打开 Zig Zag 效果就可以做出这个图片。

win10 uwp 进度条 WaveProgressControl

注意图片从左到右播放再重新播放，看起来不会出现断的图片。

下面就是代码，如果现在 UWP 可以做出随意裁剪，就不需要使用 Compositor 为了使用 Compositor 需要使用字段 Compositor ，而且需要一个 double 的属性，用于做进度。

因为使用 LoadedImageSurface 下面的代码需要在 15063 才可以跑，如果你的代码是跑在 14393 那么无法使用。

界面代码

<UserControl x:Class="WaveProgressControlRepo.WaveProgressControl"
             Height="160"
             Width="160">

    <Grid x:Name="Root">
        <Ellipse x:Name="ClippedImageContainer"
                 Fill="White"
                 Margin="6" /> 这个圆白色，里面背景就是放图片
        <Ellipse x:Name="CircleBorder"
                 Stroke="#FF0289CD"
                 StrokeThickness="3" />
        <TextBlock Foreground="#FF0289CD"
                   FontSize="36"
                   FontWeight="SemiBold"
                   TextAlignment="Right"
                   VerticalAlignment="Center"
                   Width="83"
                   Margin="0,0,12,0">
                   显示现在进度
            <Run Text="{x:Bind Percent, Mode=OneWay}" />
            <Run Text="%"
                 FontSize="22" />
        </TextBlock>
    </Grid>
</UserControl>

 using System;
using System.Numerics;
using Windows.UI.Composition;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Hosting;
using Windows.UI.Xaml.Media;

namespace WaveProgressControlRepo
{
    public sealed partial class WaveProgressControl : UserControl
    {
        private readonly Compositor _compositor;
        private readonly CompositionPropertySet _percentPropertySet;

        public WaveProgressControl()
        {
            InitializeComponent();

            _compositor = Window.Current.Compositor;

            _percentPropertySet = _compositor.CreatePropertySet();
            _percentPropertySet.InsertScalar("Value", 0.0f);

            Loaded += OnLoaded;
        }

        public double Percent
        {
            get => (double)GetValue(PercentProperty);
            set => SetValue(PercentProperty, value);
        }
        public static readonly DependencyProperty PercentProperty =
            DependencyProperty.Register("Percent", typeof(double), typeof(WaveProgressControl),
                new PropertyMetadata(0.0d, (s, e) =>
                {
                    var self = (WaveProgressControl)s;
                    var propertySet = self._percentPropertySet;
                    propertySet.InsertScalar("Value", Convert.ToSingle(e.NewValue) / 100);
                }));

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            CompositionSurfaceBrush imageSurfaceBrush;

            SetupClippedWaveImage();//裁剪图片，显示圆
            SetupEndlessWaveAnimationOnXAxis();//图片从左到右，这样看起来就不会断
            SetupExpressionAnimationOnYAxisBasedOnPercentValue();//如果进度修改了，那么移动图片

            //把背景设置到控件
            void SetupClippedWaveImage()//
            {
                // Note LoadedImageSurface is only available in 15063 onward.
                var imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri(BaseUri, "ms-appx:///Assets/wave.png"));
                //LoadedImageSurface 在 15063 所以如果代码在 14393 无法使用
                imageSurfaceBrush = _compositor.CreateSurfaceBrush(imageSurface);
                imageSurfaceBrush.Stretch = CompositionStretch.None;
                imageSurfaceBrush.Offset = new Vector2(120, 248);

                var maskBrush = _compositor.CreateMaskBrush();
                var maskSurfaceBrush = ClippedImageContainer.GetAlphaMask(); // CompositionSurfaceBrush
                maskBrush.Mask = maskSurfaceBrush;
                maskBrush.Source = imageSurfaceBrush;

                var imageVisual = _compositor.CreateSpriteVisual();
                imageVisual.RelativeSizeAdjustment = Vector2.One;
                ElementCompositionPreview.SetElementChildVisual(ClippedImageContainer, imageVisual);

                imageVisual.Brush = maskBrush;
            }

            void SetupEndlessWaveAnimationOnXAxis()
            {
                //水平动画
                var waveOffsetXAnimation = _compositor.CreateScalarKeyFrameAnimation();
                waveOffsetXAnimation.InsertKeyFrame(1.0f, -80.0f, _compositor.CreateLinearEasingFunction());
                waveOffsetXAnimation.Duration = TimeSpan.FromSeconds(1);//一秒重复一次
                waveOffsetXAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
                imageSurfaceBrush.StartAnimation("Offset.X", waveOffsetXAnimation);
            }

            void SetupExpressionAnimationOnYAxisBasedOnPercentValue()
            {
                //_percentPropertySet 可以拿到 进度 变化，移动背景
                var waveOffsetYExpressionAnimation = _compositor.CreateExpressionAnimation("Lerp(248.0f, 120.0f, Percent.Value)");
                waveOffsetYExpressionAnimation.SetReferenceParameter("Percent", _percentPropertySet);
                imageSurfaceBrush.StartAnimation("Offset.Y", waveOffsetYExpressionAnimation);
            }
        }
    }
}

如果觉得上面的代码还是不懂，那么从 github 下载代码来运行 https://github.com/JustinXinLiu/WaveProgressControlRepo

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd )，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。