win10 UWP 圆形等待

看到一个圆形好像微软ProgressRing

我们可以用自定义控件

按ctrl+shift+a

用户控件

我们可以用Rectangle做圆形边

只要Rectangle RadiusX>0圆角

因为每个Rectangle 都一样，我们可以资源

        <Grid.Resources>

        </Grid.Resources>

设置Rectangle 在中间

资源设置需要选TargetType

我们是Rectangle

                <Style x:Key="RectangleStyle1" TargetType="Rectangle">

                </Style>

因为不知道这个要叫什么，就用右击资源

vs默认RectangleStyle1

每个项需要

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

设置中间

                <Style x:Key="RectangleStyle1" TargetType="Rectangle">

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

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

                </Style>

看起来Rectangle很大

把Height为20

                    <Setter Property="Height" Value="50"/>

                    <Setter Property="Width" Value="2"/>

全部资源

 <Style x:Key="RectangleStyle1" TargetType="Rectangle">

                    <Setter Property="RadiusX" Value="1"/>

                    <Setter Property="RadiusY" Value="2"/>

                    <Setter Property="Fill" Value="Black"/>

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

                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

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

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

                    <Setter Property="Height" Value="50"/>

                    <Setter Property="Width" Value="2"/>

                </Style>

我们做10个Rectangle

使用RectangleStyle1 在Rectangle style="{StaticResource RectangleStyle1}"

中间是白色比较好

            <Ellipse Height="10" Width="10" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>

每个Rectangle 一个名字

我们想要xaml动，可以

            <Grid.Triggers>

                <EventTrigger RoutedEvent="Grid.Loaded">

                    <BeginStoryboard>

                        <Storyboard RepeatBehavior="Forever">

                            <DoubleAnimation Storyboard.TargetName="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.00000" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.08333" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.16666" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.24999" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.33332" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.41665" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.49998" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.58331" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.66664" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.74997" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.83330" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.91663" To="0"/>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Grid.Triggers>

Forever一直动

使用控件

        <local:round ></local:round>

全部

round.xaml

<UserControl

    x:Class="roundload.round"

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

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

    xmlns:local="using:roundload"

    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">

    <Grid>

        <Grid>

            <Grid.Resources>

                <Style x:Key="RectangleStyle1" TargetType="Rectangle">

                    <Setter Property="RadiusX" Value="1"/>

                    <Setter Property="RadiusY" Value="2"/>

                    <Setter Property="Fill" Value="Black"/>

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

                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>

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

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

                    <Setter Property="Height" Value="50"/>

                    <Setter Property="Width" Value="2"/>

                </Style>

            </Grid.Resources>

            <Rectangle x:Name="r01" Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="0"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r02" Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="30"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r03" Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="60"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r04"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="90"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r05"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="120"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r06"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="150"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r07"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="180"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r08"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="210"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r09"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="240"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r10"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="270"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r11"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="300"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Rectangle x:Name="r12"  Style="{StaticResource RectangleStyle1}">

                <Rectangle.RenderTransform>

                    <RotateTransform Angle="330"/>

                </Rectangle.RenderTransform>

            </Rectangle>

            <Ellipse Height="10" Width="10" Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>

            <Grid.Triggers>

                <EventTrigger RoutedEvent="Grid.Loaded">

                    <BeginStoryboard>

                        <Storyboard RepeatBehavior="Forever">

                            <DoubleAnimation Storyboard.TargetName="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.00000" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.08333" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.16666" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.24999" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.33332" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.41665" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.49998" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.58331" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.66664" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.74997" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.83330" To="0"/>

                            <DoubleAnimation Storyboard.TargetName="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.91663" To="0"/>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Grid.Triggers>

        </Grid>

    </Grid>

</UserControl>

MainPage

<Page

    x:Class="roundload.MainPage"

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

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

    xmlns:local="using:roundload"

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

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

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <local:round ></local:round>

    </Grid>

</Page>

代码：https://github.com/lindexi/lindexi_gd/tree/master/roundload

参考：http://blog.csdn.net/qqamoon/article/details/7001693

本文：http://blog.csdn.net/lindexi_gd

win10 UWP 圆形等待的更多相关文章

win10 uwp 入门
UWP是什么我在这里就不说,本文主要是介绍如何入门UWP,也是合并我写的博客. 关于UWP介绍可以参见:http://lib.csdn.net/article/csharp/32451 首先需要申请一 ...
win10 uwp 毛玻璃
毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...
win10 uwp 线程池
原文:win10 uwp 线程池如果大家有开发 WPF 或以前的程序,大概知道线程池不是 UWP 创造的,实际上在很多技术都用到线程池. 为什么需要线程池,他是什么?如何在 UWP 使用线程池,本文 ...
win10 uwp 发布旁加载自动更新
在很多企业使用的程序都是不能通过微软商店发布,原因很多,其中我之前的团队开发了很久的应用,结果发现没有用户能从微软应用商店下载所以我对应用商店没有好感.但是作为一个微软粉丝,怎么能不支持 UWP 开发 ...
win10 uwp 使用 Microsoft.Graph 发送邮件
在 2018 年 10 月 13 号参加了张队长的 Office 365 训练营学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...
Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
Win10 UWP开发系列：实现Master/Detail布局
在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种样式的说明可参看MSDN文档: ...
Win10 UWP开发实现Bing翻译
微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...
Win10/UWP开发—使用Cortana语音与App后台Service交互
上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...

随机推荐

微信小程序swiper标签的测试
swiper属性(具体看官方文档): 一:testswiper.wxml的代码如下.testswiper.js自动生成示例代码. //testswiper.wxml <view > < ...
bean的生命周期以及延迟实例化
可以指定bean的初始化创建的时候调用的方法,以及销毁的时候调用的方法. 通过指定中的init-method和destroy-method方法指定bean的创建和销毁的时候执行类中的方法. 把lazy ...
201521123032 《Java程序设计》第2周学习总结
1. 本周学习总结本周java回顾了各种数据类型,在java中使用浮点型会不精确,改用double行就好.学习了string的类型,string的对象是不可变的,创建之后不能再修改,在string的 ...
201521123113 《Java程序设计》第2周学习总结
1.本周学习总结学习了各种java数据类型以及各种运算符的使用 string类之所以好用是因为这是人可以看得懂的类型,操作简便 Scanner扫描器与标准输出输入用法上的不同,Scanner较标准输 ...
java程序设计-算术表达式的运算
1.团队课程设计博客链接洪亚文博客链接:http://www.cnblogs.com/201521123065hyw/ 郑晓丽博客链接:http://www.cnblogs.com/zxl3066/ ...
PHP面向对象三大特性之一：封装
面向对象的三大特性:封装.继承.多态 1.封装封装的目的:让类更加安全,做法是不让外界直接访问类的成员具体做法:1.成员变为私有:访问修饰符(public.private.protected) ...
市场主流5款HTML5开发框架详解
我们经常听见的前端框架是一个非常大的范词,因为前端框架都是基于JS.CSS.HTML5技术开发实现的,不过选择一个HTML5开发框架需要考虑哪些方面,首先就是需要什么样的功能,其次就是技术实现,不过当 ...
linux系统命令<二>----du的使用方法
1> 要显示一个目录树及其每个子树的磁盘使用情况 du /home/linux 这在/home/linux目录及其每个子目录中显示了磁盘块数. 2> 要通过以1024字节为单位显示一个目录 ...
接口测试入门（2）--get和post初级请求/使用httpclient做一个获取信息list的请求（需要登录才可以）
抛去测试自动化的架构来,直接写单个测试用例的思路如下: 1.获取测试case的接口,对每一个接口的请求方式(get/post/delete/put)进行分析,是否需要参数(不同的用例设置不同的参数,如 ...
birt IE8 IE9 兼容问题
我自己的应用,birt展示报表的时候,在firefox和IE下显示的样式: IE8下的: Firefox下的: 我的项目,应用birt部分的结构如下: 1, prototype.js ,查找下面这段代 ...

win10 UWP 圆形等待

win10 UWP 圆形等待的更多相关文章

随机推荐

热门专题