win10 UWP 圓形等待 · uwp入門

看到一個圓形好像微軟ProgressRing [![](https://box.kancloud.cn/2016-04-08_57076371ac895.gif)](https://github.com/lindexi/lindexi_gd/blob/master/%E5%8D%9A%E5%AE%A2/image/0_1321962945yCXF.gif) 我們可以用自定義控件按ctrl+shift+a 用戶控件我們可以用Rectangle做圓形邊只要Rectangle RadiusX>0圓角因為每個Rectangle 都一樣，我們可以資源 ~~~ <Grid.Resources> </Grid.Resources> ~~~ 設置Rectangle 在中間資源設置需要選TargetType 我們是Rectangle ~~~ <Style x:Key="RectangleStyle1" TargetType="Rectangle"> </Style> ~~~ 因為不知道這個要叫什么，就用右擊資源 [![](https://box.kancloud.cn/2016-04-08_57076371beab9.png)](https://github.com/lindexi/lindexi_gd/blob/master/%E5%8D%9A%E5%AE%A2/image/20161291187294.png) [![](https://box.kancloud.cn/2016-04-08_57076371d4af6.png)](https://github.com/lindexi/lindexi_gd/blob/master/%E5%8D%9A%E5%AE%A2/image/20161291182112.png) vs默認RectangleStyle1 每個項需要 ~~~ <Setter Property="" Value=""/> ~~~ 設置中間 ~~~ <Style x:Key="RectangleStyle1" TargetType="Rectangle"> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="VerticalAlignment" Value="Center"/> </Style> ~~~ 看起來Rectangle很大 [![](https://box.kancloud.cn/2016-04-08_57076371e8e21.png)](https://github.com/lindexi/lindexi_gd/blob/master/%E5%8D%9A%E5%AE%A2/image/201612911107238.png) 把Height為20 ~~~ <Setter Property="Height" Value="50"/> <Setter Property="Width" Value="2"/> ~~~ [![](https://box.kancloud.cn/2016-04-08_57076372028e0.png)](https://github.com/lindexi/lindexi_gd/blob/master/%E5%8D%9A%E5%AE%A2/image/201612911111820.png) 全部資源 ~~~ <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"/> ~~~ [![](https://box.kancloud.cn/2016-04-08_57076372137c1.png)](https://github.com/lindexi/lindexi_gd/blob/master/%E5%8D%9A%E5%AE%A2/image/201612911134992.png) 每個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> ~~~ [![](https://box.kancloud.cn/2016-04-08_5707637223123.png)](https://github.com/lindexi/lindexi_gd/blob/master/%E5%8D%9A%E5%AE%A2/image/201612911161755.png) 全部 ~~~ 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](https://github.com/lindexi/lindexi_gd/tree/master/roundload) 參考：[http://blog.csdn.net/qqamoon/article/details/7001693](http://blog.csdn.net/qqamoon/article/details/7001693) 本文：http://blog.csdn.net/lindexi_gd [](http://blog.csdn.net/lindexi_gd/article/details/50606261#)[](http://blog.csdn.net/lindexi_gd/article/details/50606261# "分享到QQ空間")[](http://blog.csdn.net/lindexi_gd/article/details/50606261# "分享到新浪微博")[](http://blog.csdn.net/lindexi_gd/article/details/50606261# "分享到騰訊微博")[](http://blog.csdn.net/lindexi_gd/article/details/50606261# "分享到人人網")[](http://blog.csdn.net/lindexi_gd/article/details/50606261# "分享到微信")