以前的方案 以前寫過一個圓點繞圈的進度條,主要是在cs文件中動態添加圓點,通過定時器設置角度後,用正弦餘弦設置(x,y)的位置。 此方案優點:不需要UI圖標 此方案缺點:定時器耗性能 WPF 繞圈進度條(一) 現在的方案 如果有UI圖標,或者自己能夠設計矢量圖的情況下,可以通過Xaml實現繞圈動畫的 ...
以前的方案
以前寫過一個圓點繞圈的進度條,主要是在cs文件中動態添加圓點,通過定時器設置角度後,用正弦餘弦設置(x,y)的位置。
此方案優點:不需要UI圖標
此方案缺點:定時器耗性能
現在的方案
如果有UI圖標,或者自己能夠設計矢量圖的情況下,可以通過Xaml實現繞圈動畫的設置。如下圖
添加矢量-Geometry圖標
首先通過矢量設計工具,編輯並生成一個繞圈的進度圖標(含有8個Path),得到8個StreamGeometry。
比如下麵的24*24的圖標:
1 <Grid x:Name="RootGrid" Width="24" Height="24"> 2 <Path x:Name="Part1" Opacity="0.16" Fill="{Binding ForegroundBrush}" Data="M20.631728,19.631728C20.0459415,20.2175144,19.0961941,20.2175144,18.5104076,19.631728L16.3890873,17.5104076C15.8033009,16.9246212 15.8033009,15.9748737 16.3890873,15.3890873 16.9748737,14.8033009 17.9246212,14.8033009 18.5104076,15.3890873L20.631728,17.5104076C21.2175144,18.0961941,21.2175144,19.0459415,20.631728,19.631728z"/> 3 <Path x:Name="Part2" Opacity="0.28" Fill="{Binding ForegroundBrush}" Data="M12.5,23C11.6715729,23,11,22.3284271,11,21.5L11,18.5C11,17.6715729 11.6715729,17 12.5,17 13.3284271,17 14,17.6715729 14,18.5L14,21.5C14,22.3284271,13.3284271,23,12.5,23z"/> 4 <Path x:Name="Part3" Opacity="0.40" Fill="{Binding ForegroundBrush}" Data="M4.36827202,19.631728C3.78248558,19.0459415,3.78248558,18.0961941,4.36827202,17.5104076L6.48959236,15.3890873C7.0753788,14.8033009 8.02512627,14.8033009 8.6109127,15.3890873 9.19669914,15.9748737 9.19669914,16.9246212 8.6109127,17.5104076L6.48959236,19.631728C5.90380592,20.2175144,4.95405845,20.2175144,4.36827202,19.631728z"/> 5 <Path x:Name="Part4" Opacity="0.52" Fill="{Binding ForegroundBrush}" Data="M1,11.5C1,10.6715729,1.67157288,10,2.5,10L5.5,10C6.32842712,10 7,10.6715729 7,11.5 7,12.3284271 6.32842712,13 5.5,13L2.5,13C1.67157288,13,1,12.3284271,1,11.5z"/> 6 <Path x:Name="Part5" Opacity="0.64" Fill="{Binding ForegroundBrush}" Data="M4.36827202,3.36827202C4.95405845,2.78248558,5.90380592,2.78248558,6.48959236,3.36827202L8.6109127,5.48959236C9.19669914,6.0753788 9.19669914,7.02512627 8.6109127,7.6109127 8.02512627,8.19669914 7.0753788,8.19669914 6.48959236,7.6109127L4.36827202,5.48959236C3.78248558,4.90380592,3.78248558,3.95405845,4.36827202,3.36827202z"/> 7 <Path x:Name="Part6" Opacity="0.76" Fill="{Binding ForegroundBrush}" Data="M12.5,0C13.3284271,-1.52179594E-16,14,0.671572875,14,1.5L14,4.5C14,5.32842712 13.3284271,6 12.5,6 11.6715729,6 11,5.32842712 11,4.5L11,1.5C11,0.671572875,11.6715729,1.52179594E-16,12.5,0z"/> 8 <Path x:Name="Part7" Opacity="0.88" Fill="{Binding ForegroundBrush}" Data="M20.631728,3.36827202C21.2175144,3.95405845,21.2175144,4.90380592,20.631728,5.48959236L18.5104076,7.6109127C17.9246212,8.19669914 16.9748737,8.19669914 16.3890873,7.6109127 15.8033009,7.02512627 15.8033009,6.0753788 16.3890873,5.48959236L18.5104076,3.36827202C19.0961941,2.78248558,20.0459415,2.78248558,20.631728,3.36827202z"/> 9 <Path x:Name="Part8" Opacity="1.00" Fill="{Binding ForegroundBrush}" Data="M24,11.5C24,12.3284271,23.3284271,13,22.5,13L19.5,13C18.6715729,13 18,12.3284271 18,11.5 18,10.6715729 18.6715729,10 19.5,10L22.5,10C23.3284271,10,24,10.6715729,24,11.5z"/> 10 </Grid>
- 透明度:將8個按順時針排序的Path添加Geometry Data,不透明度由小到大設置。
- 填充色:可在cs文件中添加依賴屬性ForegroundBrush,構造函數中設置DataContent=this,然後Path直接綁定此依賴屬性ForegroundBrush值即可。
添加繞圈動畫
1. 設置一個主動改變透明度的動畫靜態資源Storyboard.Circle。間隔時間,如0.8秒內,8個path均迴圈改變其的透明度,從而達到繞圈的效果
1 <Storyboard x:Key="Storyboard.Circle" RepeatBehavior="Forever"> 2 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part8" Storyboard.TargetProperty="Opacity"> 3 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.00"/> 4 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.16"/> 5 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.16"/> 6 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.28"/> 7 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.28"/> 8 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.40"/> 9 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.40"/> 10 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.52"/> 11 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.52"/> 12 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.64"/> 13 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.64"/> 14 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.76"/> 15 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.76"/> 16 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.88"/> 17 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.88"/> 18 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1.00"/> 19 </DoubleAnimationUsingKeyFrames> 20 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part7" Storyboard.TargetProperty="Opacity"> 21 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.88"/> 22 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1.00"/> 23 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1.00"/> 24 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.16"/> 25 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.16"/> 26 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.28"/> 27 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.28"/> 28 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.40"/> 29 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.40"/> 30 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.52"/> 31 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.52"/> 32 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.64"/> 33 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.64"/> 34 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.76"/> 35 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.76"/> 36 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.88"/> 37 </DoubleAnimationUsingKeyFrames> 38 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part6" Storyboard.TargetProperty="Opacity"> 39 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.76"/> 40 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.88"/> 41 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.88"/> 42 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1.00"/> 43 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1.00"/> 44 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.16"/> 45 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.16"/> 46 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.28"/> 47 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.28"/> 48 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.40"/> 49 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.40"/> 50 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.52"/> 51 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.52"/> 52 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.64"/> 53 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.64"/> 54 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.76"/> 55 </DoubleAnimationUsingKeyFrames> 56 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part5" Storyboard.TargetProperty="Opacity"> 57 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.64"/> 58 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.76"/> 59 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.76"/> 60 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.88"/> 61 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.88"/> 62 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1.00"/> 63 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.00"/> 64 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.16"/> 65 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.16"/> 66 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.28"/> 67 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.28"/> 68 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.40"/> 69 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.40"/> 70 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.52"/> 71 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.52"/> 72 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.64"/> 73 </DoubleAnimationUsingKeyFrames> 74 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part4" Storyboard.TargetProperty="Opacity"> 75 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.52"/> 76 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.64"/> 77 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.64"/> 78 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.76"/> 79 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.76"/> 80 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.88"/> 81 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.88"/> 82 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.00"/> 83 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.00"/> 84 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.16"/> 85 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.16"/> 86 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.28"/> 87 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.28"/> 88 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.40"/> 89 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.40"/> 90 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.52"/> 91 </DoubleAnimationUsingKeyFrames> 92 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part3" Storyboard.TargetProperty="Opacity"> 93 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.40"/> 94 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.52"/> 95 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.52"/> 96 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.64"/> 97 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.64"/> 98 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.76"/> 99 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.76"/> 100 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.88"/> 101 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.88"/> 102 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.00"/> 103 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.00"/> 104 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.16"/> 105 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.16"/> 106 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.28"/> 107 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.28"/> 108 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.40"/> 109 </DoubleAnimationUsingKeyFrames> 110 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part2" Storyboard.TargetProperty="Opacity"> 111 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.28"/> 112 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.40"/> 113 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.40"/> 114 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.52"/> 115 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.52"/> 116 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.64"/> 117 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.64"/> 118 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.76"/> 119 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.76"/> 120 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.88"/> 121 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.88"/> 122 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1.00"/> 123 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.00"/> 124 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.16"/> 125 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.16"/> 126 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.28"/> 127 </DoubleAnimationUsingKeyFrames> 128 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Part1" Storyboard.TargetProperty="Opacity"> 129 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.16"/> 130 <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.28"/> 131 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.28"/> 132 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.40"/> 133 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.40"/> 134 <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.52"/> 135 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.52"/> 136 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.64"/> 137 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.64"/> 138 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.76"/> 139 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.76"/> 140 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.88"/> 141 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.88"/> 142 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.00"/> 143 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1.00"/> 144 <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.16"/> 145 </DoubleAnimationUsingKeyFrames> 146 </Storyboard>View Code
2. 觸發和暫停繞圈動畫
通過一個屬性IsActive,來觸發動畫是否啟動和停止。
StopStoryboard可以將當前的動畫停止,用法:BeginStoryboardName="XXX"
除了StopStoryboard,BeginStoryboard,還有其它Storyboard類,可以順帶瞭解一下。
1 <DataTrigger Binding="{Binding IsActive}" Value="True"> 2 <DataTrigger.EnterActions> 3 <BeginStoryboard Name="LoadingBeginStoryboard" Storyboard="{StaticResource Storyboard.Circle}"/> 4 </DataTrigger.EnterActions> 5 </DataTrigger> 6 <DataTrigger Binding="{Binding IsActive}" Value="False"> 7 <DataTrigger.EnterActions> 8 <StopStoryboard BeginStoryboardName="LoadingBeginStoryboard" /> 9 </DataTrigger.EnterActions> 10 </DataTrigger>
另:我們可以通過設置具體的載入尺寸,來設置Loading的顯示大小。如32*32,64*64
可以在cs文件中添加個依賴屬性LoadingSize,然後通過設置DataContext=this,xmal中直接可以根據綁定的LoadingSize改變樣式。
1 <ControlTemplate.Triggers> 2 <DataTrigger Binding="{Binding LoadingSize}" Value="{x:Static controls:LoadingSize.Size32}