win10 uwp 进度条 WaveProgressControl

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


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

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

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

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

下面就是代码,如果现在 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 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

lindexi_gd CSDN认证博客专家 C# WPF UWP 微软最具价值专家
我是微软Windows应用开发方向的最具价值专家,欢迎访问我博客blog.lindexi.com里面有大量WPF和UWP博客
已标记关键词 清除标记
相关推荐
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页