2018-8-10-win10-UWP-圆形等待
title | author | date | CreateTime | categories |
---|---|---|---|---|
win10 UWP 圆形等待
|
lindexi
|
2018-08-10 19:16:50 +0800
|
2018-2-13 17:23:3 +0800
|
Win10 UWP
|
看到一个圆形好像微软 ProgressRing 控件
如何去做这个控件,我们可以用自定义控件
新建一个用户控件,可以按 ctrl+shift+a 打开后,选用户控件
我们可以用 Rectangle 做圆形边
只要 Rectangle RadiusX>0
RadiusX是圆角度
因为每个 Rectangle 都一样,我们可以资源
资源我们写在 Grid
<Grid.Resources> </Grid.Resources>
资源设置需要选 TargetType
我们是 Rectangle ,于是我们还有给他一个 key
<Style x:Key="RectangleStyle1" TargetType="Rectangle"> </Style>
因为不知道这个要叫什么,就用右击资源
vs默认就帮我写了 RectangleStyle1
每个项需要设置属性,使用 Setter
<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 。
<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 是我们的命名空间,我们的控件就放在方案的目录,不放在其他文件夹,命名空间也是和方案默认一样。
<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
2018-8-10-win10-UWP-圆形等待的更多相关文章
- win10 UWP 圆形等待
看到一个圆形好像微软ProgressRing 我们可以用自定义控件 按ctrl+shift+a 用户控件 我们可以用Rectangle做圆形边 只要Rectangle RadiusX>0圆角 因 ...
- win10 uwp 使用 Microsoft.Graph 发送邮件
在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...
- win10 uwp 毛玻璃
毛玻璃在UWP很简单,不会和WPF那样伤性能. 本文告诉大家,如何在 UWP 使用 win2d 做毛玻璃. 毛玻璃可以使用 win2D 方法,也可以使用 Compositor . 使用 win2d 得 ...
- win10 uwp 入门
UWP是什么我在这里就不说,本文主要是介绍如何入门UWP,也是合并我写的博客. 关于UWP介绍可以参见:http://lib.csdn.net/article/csharp/32451 首先需要申请一 ...
- win10 uwp 线程池
原文:win10 uwp 线程池 如果大家有开发 WPF 或以前的程序,大概知道线程池不是 UWP 创造的,实际上在很多技术都用到线程池. 为什么需要线程池,他是什么?如何在 UWP 使用线程池,本文 ...
- 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的后台任务,相比 ...
- Win10 UWP应用发布流程
简介 Win10 UWP应用作为和Win8.1 UAP应用不同的一种新应用形式,其上传至Windows应用商店的流程也有了一些改变. 这篇博文记录了我们发布一款Win10 UWP应用的基本流程,希望为 ...
- win10 uwp 列表模板选择器
本文主要讲ListView等列表可以根据内容不同,使用不同模板的列表模板选择器,DataTemplateSelector. 如果在 UWP 需要定义某些列的显示和其他列不同,或者某些行的显示和其他行不 ...
- win10 uwp 获得元素绝对坐标
有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用. 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标. 首先需要获得元素,如果没有获得元素,那么如何得到他的坐标? ...
随机推荐
- MVC5使用SignalR进行双向通信 (1)
@a604572782 2015-08-10 09:01 字数 2133 阅读 1245 MVC5使用SignalR进行双向通信 (1) 配置SignalR 在NuGet中通过 install-pac ...
- java的几种定时器
https://blog.csdn.net/coolwindd/article/details/82804189 1.@Scheduled注解 @Scheduled注解是最简单的方式,只需要启用定时器 ...
- 【记录】Redis 基础
Redis可以存放五种类型 1:String(字符串) 2:List(列表) 3:Hash(字典) 4:Set(集合) 5:ZSet(有序集合) String (字符串) redis 127.0.0. ...
- Magolor的数据结构作业
\(CodeForces 706E ~Working routine\) 给出一个矩阵,每次操作交换两个子矩阵,求最后状态. 使用链表存储,每次交换后,影响到的之后矩阵边缘的指针,暴力修改. \(~~ ...
- C++11新特性之 Move semantics(移动语义)
https://blog.csdn.net/wangshubo1989/article/details/49748703 这篇讲到了vector的push_back的两种重载版本,左值版本和右值版本.
- 「NOI2016」网格 解题报告
「NOI2016」网格 容易注意到,答案最多为2,也就是说答案为-\(1,0,1,2\)四种,考虑逐个判断. 无解的情况比较简单 如果\(nm\le c+1\),显然无解 如果\(nm=c+2\),判 ...
- 2019牛客多校第五场G-subsequence 1 DP
G-subsequence 1 题意 给你两个字符串\(s.t\),问\(s\)中有多少个子序列能大于\(t\). 思路 令\(len1\)为\(s\)的子序列的长度,\(lent\)为\(t\)的长 ...
- 优雅的SpringMVC和Restful
一.前言 1.前段时间一直在写微信小程序的请求,终于把客户端的请求弄好了,可是服务端呢,该怎么写,纠结了半天,用servlet暂时写好了一个:http://www.cnblogs.com/JJDJJ/ ...
- H5页面前后端通信 (3种方式简单介绍)
1.ajax:短连接 2.websocket :长连接,双向的. node搭建的websocket服务器,推送信息给客户端浏览器 :https://www.cnblogs.com/fps2tao/ ...
- c 语言 volatile 关键字
一.前言 1.编译器优化介绍: 由于内存访问速度远不及CPU处理速度,为提高机器整体性能,在硬件上引入硬件高速缓存Cache,加速对内存的访问.另外在现代CPU中指令的执行并不一定严格按照顺序执行,没 ...