看到一個圓形好像微軟ProgressRing
[](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://github.com/lindexi/lindexi_gd/blob/master/%E5%8D%9A%E5%AE%A2/image/20161291187294.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://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://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://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://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# "分享到微信")
- 前言
- UWP win10 app 新關鍵字x:Bing
- win10應用 UWP 使用MD5算法
- win10 UWP讀寫文件
- UWP appButtonBar樣式
- C# 6.0 $&quot;Hello {csdn}&quot;
- Win10 UWP xaml 延遲加載元素
- UWP xaml 圓形頭像
- UWP 繪制圖形
- win10 uwp 通知Toast
- win10 UWP 顯示地圖
- win10 uwp 參考
- win10 uwp clone
- win10 uwp 裝機必備應用 含源代碼
- RichEditBox 使用自定義菜單
- win10 UWP FlipView
- win10 UWP 獲取系統信息
- win10 UWP 申請微軟開發者
- win10 UWP button
- win10 UWP Markdown 含源代碼
- win10 UWP 應用設置
- win10 UWP 九幽數據分析
- win10 UWP 圓形等待
- win10 UWP 標題欄后退
- win10 UWP 單元測試
- win10 UWP 你寫我讀
- win10 UWP RSS閱讀器
- win10 UWP MessageDialog 和 ContentDialog
- win10 UWP Hmac
- win10 UWP GET Post
- Win10 UWP Intro to controls and events
- win10 UWP Controls by function
- win10 uwp App-to-app communication 應用通信