Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >win10 uwp 异步进度条 圆形进度条

win10 uwp 异步进度条 圆形进度条

作者头像
林德熙
发布于 2018-09-18 07:57:25
发布于 2018-09-18 07:57:25
1.6K00
代码可运行
举报
文章被收录于专栏:林德熙的博客林德熙的博客
运行总次数:0
代码可运行

本文主要讲我设计的几个进度条,还有如何使用异步控制进度条,如何使用动画做进度。

进度条可以参见:http://edi.wang/post/2016/2/25/windows-10-uwp-modal-progress-dialog

进度条其实异步就是使用后台变化,然后 value 绑定,异步绑定很简单,参见绑定的文章。

我使用一个ProgressBar 需要设置他的各个值,如果不设置,一般最大值为100,最小为0,所以可以表示百分数,其中Value是double,绑定后台就好。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
         <ProgressBar Maximum="100" Value="{x:Bind View.Value,Mode=OneWay}" Height="20" Width="100"></ProgressBar>

绑定到我们的 ViewModel ,一般如果后台线程操作界面是不能直接,但是我用了下面代码,把异步的线程放在同步

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
             await CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,

                () =>

                {

                     

                });

代码参见:https://github.com/lindexi/UWP/tree/master/uwp/control/Progress,项目所有代码都会发出,所以可以看我的网站

我们使用 Task 异步,我们因为没有什么耗时的,就Task.Delay(1000).Wait();我们进度会等一秒,当然自己也可以设置多些。也可以写 await Task.Dalay(1000);

ViewModel

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        public ViewModel()
        {

            new Task(() =>
            {
                while (Value < 90)
                {
                    Value += 10;
                    Task.Delay(1000).Wait();
                }
            }).Start();
        }

        public double Value
        {
            set
            {
                _value = value;
                OnPropertyChanged();
            }
            get
            {
                return _value;
            }
        }

        private double _value;

默认进度条设置最大值,

我还自己的控件,一个值从0到100的圆形的,可以看下面

圆形进度条

参见:http://www.cnblogs.com/ms-uap/p/4641419.html

先说怎么用我的,首先去我源代码https://github.com/lindexi/UWP,打开我的进度条文件夹,里面有View文件夹

我在View有一个控件RountProgress复制他到你的解决方案,如果我的控件大小和你不一样,很简单调整,我就不说。

那么我的控件只需要指定Value就好啦,Value其实是从0到100,如果叫别的应该好,但是我不改,如果你觉得不想要,自己改

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   xmlns:view="using:lindexi.uwp.control.RountProgress.View"
     <view:RountProgress Value="{x:Bind Value,Mode=OneWay}"></view:RountProgress>

我来说下怎么做

我们要知道StrokeDashArray,这个是一个数组,是循环的,也就是依此读取,知道超过长度。

首先我们需要有Thickness,宽度,StrokeDashArray的每一个都是宽度的倍数

首先取第一个元素,把这个元素乘以宽度,作为显示的大小,然后取第二个元素,乘以宽度,作为不显示的大小

然后循环获取第三个……,如果不存在第三个,那么循环拿第一做第三,n=n==max?0:n+1,n就是第n个元素

一个显示一个不显示,循环

记得长度乘以是值*宽度

那么我们如果有一个值*宽度的到大小比我们的宽度还大,那么就会截断。

假如我们宽度 3,StrokeDashArray 1,2,0.5,总长度为5,那么

第一个是大小 1*3显示,然后是2*3不显示,因为到第一个只有长度为2,第二个大小为6,所以会截断,3显示然后2不显示

我们可以用第一个为一个值,然后第二个为一个比总长度还大的值,这样会让宽度显示为我们第一个的值,而其他为空,因为第二个比最大还大

我们要做一个30%,我们需要算

长=圆*30%/宽度

圆=PI*(总长度-宽度)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
         <Ellipse x:Name="Rount" Stroke="DeepSkyBlue" Height="100" Width="100" 

                 StrokeThickness="3" 

                 RenderTransformOrigin="0.5,0.5"/>

那么我们第一个值 (总长度100 - 宽度3) \* PI / 宽度3

因为我们需要算我们的宽度不是直接总长度,是总长度-宽度

第二个最好是Double.Max

我们想要一个可以用户进度,那么可以绑定一个属性,在我们控件

我们需要这个为double,然后绑定

因为我们需要两个值,所以转换

假如我们的转换是固定的总长度,宽度,那么可以使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        public object Convert(object value, Type targetType, object parameter, string language)

        {

            double thine = 3;

            double w = 100 - thine;

            double n = Math.PI * w/thine * (double)value / 100;

            DoubleCollection temp = new DoubleCollection()

            {

               n,

                1000

            };

            return temp;

        }

如果觉得固定不好,可以在我们转换写属性,然后在界面把我们的宽度给属性,然后换为我们的宽度算,这个简单

代码在https://github.com/lindexi/UWP/tree/master/uwp/control/Progress/Progress/View/RountProgress.xaml

那么进度条如果不需要进度,那么我有一些好的,例如我之前的博客有说的,还有一个简单,也是上面改,我们一个值是显示一个值是不显示,那么我们可以做

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<UserControl

    x:Class="lindexi.uwp.control.RountProgress.View.IndeterminateProgress"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:lindexi.uwp.control.RountProgress.View"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300"

    d:DesignWidth="400">

    <UserControl.Resources>

        <Style TargetType="ProgressRing">

            <Setter Property="Background" Value="Transparent"/>

            <Setter Property="Foreground" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>

            <Setter Property="IsHitTestVisible" Value="False"/>

            <Setter Property="HorizontalAlignment" Value="Center"/>

            <Setter Property="VerticalAlignment" Value="Center"/>

            <Setter Property="MinHeight" Value="20"/>

            <Setter Property="MinWidth" Value="20"/>

            <Setter Property="IsTabStop" Value="False"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ProgressRing">

                        <Grid x:Name="Ring" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" FlowDirection="LeftToRight" MaxWidth="{Binding TemplateSettings.MaxSideLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" MaxHeight="{Binding TemplateSettings.MaxSideLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" Padding="{TemplateBinding Padding}" RenderTransformOrigin=".5,.5" >

                            <Grid.Resources>

                                <Style x:Key="ProgressRingEllipseStyle" TargetType="Ellipse">

                                    <Setter Property="Opacity" Value="0"/>

                                    <Setter Property="HorizontalAlignment" Value="Left"/>

                                    <Setter Property="VerticalAlignment" Value="Top"/>

                                </Style>

                            </Grid.Resources>

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="SizeStates">

                                    <VisualState x:Name="Large">

                                        <Storyboard>

                                      

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Small"/>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="ActiveStates">

                                    <VisualState x:Name="Inactive"/>

                                    <VisualState x:Name="Active">

                                        <Storyboard RepeatBehavior="Forever">

                                            <DoubleAnimation Storyboard.TargetName="Rount" Storyboard.TargetProperty="Angle"

                                                           BeginTime="0:0:0" Duration="0:0:5" From="0" To="360"  >

                                            </DoubleAnimation>

                                            

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                           

                            <Ellipse  Stroke="DeepSkyBlue" Height="100" Width="100" 

                                      StrokeThickness="3"  

                                      RenderTransformOrigin="0.5,0.5"/>

                            <Ellipse  Stroke="DeepSkyBlue" Height="200" Width="200" 

                                      StrokeThickness="3" StrokeDashArray="50 50" 

                                      RenderTransformOrigin="0.5,0.5" >

                                <Ellipse.RenderTransform>

                                    <RotateTransform  x:Name="Rount" Angle="0"/>

                                </Ellipse.RenderTransform>

                            </Ellipse>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </UserControl.Resources>

    <Grid>

        <ProgressRing Width="200" Height="200" 

                      IsActive="True"></ProgressRing>

    </Grid>

</UserControl>

我们使用一个简单的修改,因为我们可以使用<RotateTransform x:Name="Rount" Angle="0"/>

我们使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                                    <VisualState x:Name="Active">

                                        <Storyboard RepeatBehavior="Forever">

                                            <DoubleAnimation Storyboard.TargetName="Rount" Storyboard.TargetProperty="Angle"

                                                             Duration="0:0:5" From="0" To="360"  >

                                            </DoubleAnimation>

                                            

                                        </Storyboard>

                                    </VisualState>

修改我们旋转,时间0:0:5,5秒,从0到360,循环

因为是修改,所以可以放在Resource

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<ProgressRing Width="200" Height="200" 

                      IsActive="True"></ProgressRing>

我觉得匀速不好,修改速度

  • BackEase

缓动函数,它在部分持续时间内向反方向更改主函数的值

  • BounceEase

弹跳

  • CircleEase 加速
  • PowerEase 次方
  • SineEase sin加速
  • QuadraticEase ^2

## 动画

移动元素

我们可以看到我们的元素位置可以修改 Margin,那么如何在动画修改Margin

UWP 动画 Margin可以

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <Storyboard TargetName="Rount">

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"

                                   BeginTime="00:00:00" EnableDependentAnimation="True"

                                   Duration="0:0:2" >

                 <DiscreteObjectKeyFrame KeyTime="00:00:00"  >

                     <DiscreteObjectKeyFrame.Value >

                         <Thickness>10,1,10,10</Thickness>

                     </DiscreteObjectKeyFrame.Value>

                   </DiscreteObjectKeyFrame>

                 <DiscreteObjectKeyFrame KeyTime="00:00:02">

                     <DiscreteObjectKeyFrame.Value >

                         <Thickness>10,200,10,10</Thickness>

                 </DiscreteObjectKeyFrame.Value>

         </DiscreteObjectKeyFrame>

    </ObjectAnimationUsingKeyFrames>

 </Storyboard>

Rount就是我们要修改的控件,我们看到这是在2就直接修改,没有从1到200,这样其实并不是我们直接就想从1然后两秒200

我们定义

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                            <local:IndeterminateProgress  Margin="0,10,0,0" Width="200" Height="200" >

                                <local:IndeterminateProgress.RenderTransform>

                                    <TranslateTransform x:Name="Rount" Y="0"></TranslateTransform>

                                </local:IndeterminateProgress.RenderTransform>

                            </local:IndeterminateProgress>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <DoubleAnimation Storyboard.TargetName="Rount" Storyboard.TargetProperty="Y"

        From="0" To="100" Duration="0:0:2"></DoubleAnimation>

我们要让我们的进度弹起来,如果不知道我说什么,简单我有图

其实我们要让我们的元素移动,可以看林政大神的书

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <local:IndeterminateProgress Margin="0,10,0,0" Width="200" Height="200" >

       <local:IndeterminateProgress.RenderTransform>

               <TranslateTransform x:Name="Rount" Y="10" />

       </local:IndeterminateProgress.RenderTransform>

    </local:IndeterminateProgress>

在动画

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                                              <DoubleAnimation Storyboard.TargetName="Rount"

                                                             Storyboard.TargetProperty="Y"

                                                             Duration="0:0:2" From="0" To="300">

                                                <DoubleAnimation.EasingFunction>

                                                    <BounceEase Bounces="2"></BounceEase>

                                                </DoubleAnimation.EasingFunction>

                                            </DoubleAnimation>

我们使用Rount,x,记得要给名字,然后两秒,从0到300,下面就是弹跳,我上面有说,这个在官方有说比我写还好,但是官方的我没法拿来


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
win10 uwp 按下等待按钮
我们需要一个值让我们知道是不是已经完成了后台,按钮可以按下,在按下时,自动让按钮IsEnable为false。
林德熙
2018/09/18
7580
win10 uwp 按下等待按钮
win10 uwp 修改Pivot Header 颜色
参见: http://stackoverflow.com/questions/31797875/overriding-pivot-header-foreground-brushes-in-uwp-app-win-10-rtm-sdk
林德熙
2018/09/19
6580
win10 uwp 修改Pivot Header 颜色
win10 UWP 圆形等待
使用 RectangleStyle1 在 Rectangle 使用 style="{StaticResource RectangleStyle1}"
林德熙
2018/09/18
4100
win10 UWP 圆形等待
win10 uwp 切换主题
一般我们的应用都要有多种颜色,一种是正常的白天颜色,一种是晚上的黑夜颜色,还需要一种辅助的高对比颜色。这是微软建议的,一般应用都要包含的颜色。
林德熙
2018/09/18
1K0
win10 uwp 切换主题
win10 UWP ListView
如果发现 UWP ListView 横向没有滚动条,可以使用 ScrollViewer 添加
林德熙
2018/09/19
1K0
win10 UWP ListView
win10 UWP ListView
如果发现 UWP ListView 横向没有滚动条,可以使用 ScrollViewer 添加
林德熙
2022/08/04
6420
[UWP]做个调皮的BusyIndicator
最近突然想要个BusyIndicator。做过WPF开发的程序员对BusyIndicator应该不陌生,Extended WPF Toolkit 提供了BusyIndicator的开源实现,Silverlight Toolkit也有一个,这次想要把这个控件移植到UWP中。
dino.c
2019/01/18
9080
[UWP]做个调皮的BusyIndicator
[UWP]用Shape做动画
相对于WPF/Silverlight,UWP的动画系统可以说有大幅提高,不过本文无意深入讨论这些动画API,本文将介绍使用Shape做一些进度、等待方面的动画,除此之外也会介绍一些相关技巧。
dino.c
2019/01/18
2K0
[UWP]用Shape做动画
win10 uwp 横向 AppBarButton
一般看到的 AppBarButton 都是图片在上面,文字在下面,是否可以更改让文字在和图片相同的位置?本文告诉大家如何做出横向的 AppBarButton 把图标和文本放在一起。
林德熙
2018/09/18
4450
win10 uwp 横向 AppBarButton
[UWP]理解及扩展Expander
最近在自定义Expander的样式,顺便看了看它的源码。 Expander控件是一个ContentControl,它通过IsExpanded属性或者通过点击Header中的ToggleButton控制内容展开或隐藏。UWP SDK中没提供这个控件,而是在UWP Community Toolkit中 提供 。它是个教科书式的入门级控件,代码简单,虽然仍然不尽如人意,但很适合用于学习如何自定义模版化控件。
dino.c
2019/01/18
8710
[UWP]理解及扩展Expander
win10 uwp 使用资源在后台创建控件
本文告诉大家如何使用资源在后台创建控件,本文使用按钮做例子,包括如何绑定资源,找到资源。
林德熙
2018/09/19
6560
win10 uwp 使用资源在后台创建控件
[UWP]理解ControlTemplate中的VisualTransition
VisualTransition是控件模板中的重要组成部分,无论是自定义控件或者修改控件样式都会接触到VisualTransition。明明这么重要,博客园上好像都没多少关于VisualTransition的主题。
dino.c
2019/01/18
6780
[UWP]理解ControlTemplate中的VisualTransition
张高兴的 UWP 开发笔记:用 Thumb 控件仿制一个可拖动 Button
  在 WPF 上可用的控件拖动方法在 UWP 上大多没用,那干脆用 Thumb 仿制一个吧。   关于 Thumb 控件的教程也不多,毕竟在 WPF 控件拖动有很多种方法, Thumb 就显得很鸡肋了。下面我就简单的说说。(MSDN 文档)   不谈什么属性和方法,大多数都是继承的。主要说说 Thumb 的原生事件 DragStarted,DragDelta,DragCompleted。 DragStarted 和字面意思差不多,开始拖动的时候发生的。 DragDelta 拖动进行中,只要你鼠标不放就
张高兴
2018/05/18
1.3K0
[WPF 自定义控件]自定义一个“传统”的 Validation.ErrorTemplate
数据绑定模型允许您将与您Binding的对象相关联ValidationRules。 如果用户输入的值无效,你可能希望在应用程序 用户界面 (UI) 上提供一些有关错误的反馈。 提供此类反馈的一种方法是设置Validation.ErrorTemplate附加到自定义ControlTemplate的属性。
dino.c
2020/03/02
1.5K0
UWP 轻量级样式定义(Lightweight Styling)
发布于 2018-09-26 09:17 更新于 2018-12-14 01:54
walterlv
2020/02/10
6960
[WPF自定义控件库] 模仿UWP的ProgressRing
虽然我认为这个控件库的控件需要模仿Aero2的外观,但总有例外,其中一个就是ProgressRing。ProgressRing是来自UWP的控件,部分代码参考了 这里。ProgressRing的使用方式运行效果如下:
dino.c
2019/10/23
8220
[WPF自定义控件库]以Button为例谈谈如何模仿Aero2主题
除了以外观为卖点的控件库,WPF的控件库都默认使用“素颜”的外观,然后再提供一些主题包。这样做的最大好处是可以和原生控件或其它控件库兼容,而且对于大部分人来说模仿原生的主题也比自己设计一套好看的UI容易得多。
dino.c
2019/05/29
1.2K0
SilverLight企业应用框架设计【二】框架画面
注意,这里每个顶部菜单的ICO图标不是动态的,朋友们,想让他变成动态的就自己动手吧
liulun
2022/05/09
6120
SilverLight企业应用框架设计【二】框架画面
Silverlight Telerik控件学习:数据录入、数据验证
相信很多人都听说过这句名言:garbage in ,garbage out ! 数据录入不规范(或错误)就象一颗定时炸弹,迟早会给系统带来麻烦,所以在数据录入时做好验证是很有必要的。 相对传统asp.net开发而言,SL4中的数据验证要轻松很多(主要得益于Xaml的Binding特性),步骤如下: 1、定义业务Model类时,在需要验证的属性setter中,写好业务逻辑,对于不合规范的value,要抛出异常! 同时切记Model类要实现INotifyPropertyChanged接口,同时每个setter方
菩提树下的杨过
2018/01/23
3K0
Silverlight Telerik控件学习:数据录入、数据验证
Silverlight Telerik控件学习:RadTransitionControl
如果展示类似这种比较cool的图片轮换效果,用RadTransitionControl控件就对了,它提供的过渡效果非常cool! 原理并不复杂,可参见以前写的 Silverlight之ListBox/Style学习笔记--ListBox版的图片轮换广告. xaml部分: <UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="Telerik.Sample.Transition"
菩提树下的杨过
2018/01/23
8090
Silverlight Telerik控件学习:RadTransitionControl
相关推荐
win10 uwp 按下等待按钮
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验