WPF 控件庫——仿制Windows10的進(jìn)度條 原文:WPF 控件庫——仿制Windows10的進(jìn)度條

一、其實(shí)有現(xiàn)成的

　　先來看看Windows10進(jìn)度條的兩種模式：

　

?

　　網(wǎng)上有不少介紹仿制Windows10進(jìn)度條的文章，也都實(shí)現(xiàn)了不錯的效果。而我再開一文的原因是覺得如果在這基礎(chǔ)上添加一些功能，比如圓點(diǎn)的數(shù)量，圓點(diǎn)的大小等等，效果可能會更好一些。接觸過UWP的朋友應(yīng)該知道，其框架中自帶了進(jìn)度條控件，以?ProgressRing?為例，通過Blend，我們可以獲取到控件的XAML，以下是部分截圖：

　

　　粗略一看，只要稍作修改便能用到WPF中——我們幾乎可以什么都不做！

?

二、添加功能

　　如果要更改圓點(diǎn)的數(shù)量，圓點(diǎn)的大小或者圓點(diǎn)的移動速度，我們該如何實(shí)現(xiàn)呢？繼承章節(jié)一中的XAML，并根據(jù)所需調(diào)整模板就顯得太麻煩了，這會讓我們的樣式文件顯得臃腫不堪，所以采用純粹的C#代碼來實(shí)現(xiàn)它或許比較明智。不過之前的XAML也不是一無是處，至少它給出了環(huán)形進(jìn)度條的關(guān)鍵幀動畫的構(gòu)成，這些信息對我們來說很重要，免去了我們自己去分析的步驟。

　　現(xiàn)在我們的主要工作就是讓寫死的關(guān)鍵幀能夠通過屬性靈活配置，所以我們可能需要先編碼一份進(jìn)度條的基類（?LoadingBase?），以提取兩種類型進(jìn)度條的共性。基類中定義8個屬性，分別是?IsRunning?、?DotCount?、?DotInterval?、?DotBorderBrush?、?DotBorderThickness?、?DotDiameter?、?DotSpeed?、?DotDelayTime?，它們的含義已經(jīng)是自注釋的，不必贅述。而在環(huán)形進(jìn)度條中，還有另外兩個屬性：?DotOffSet?和?NeedHidden?，分別表示圓點(diǎn)整體的位置偏移和在運(yùn)動中是否需要隱藏圓點(diǎn)。

?

三、關(guān)鍵幀動畫

　　最后一步就是用C#代碼實(shí)現(xiàn)關(guān)鍵幀動畫，不過得先有米才能做飯，故而需要先創(chuàng)建圓點(diǎn)：

1 protected Ellipse CreateEllipse(int index) 2 { 3 var ellipse = new Ellipse(); 4 ellipse.SetBinding(WidthProperty, new Binding("DotDiameter") {Source = this}); 5 ellipse.SetBinding(HeightProperty, new Binding("DotDiameter") {Source = this}); 6 ellipse.SetBinding(Shape.FillProperty, new Binding("Foreground") {Source = this}); 7 ellipse.SetBinding(Shape.StrokeThicknessProperty, new Binding("DotBorderThickness") {Source = this}); 8 ellipse.SetBinding(Shape.StrokeProperty, new Binding("DotBorderBrush") {Source = this}); 9 return ellipse; 10 }

　　上面的方法在進(jìn)度條基類中實(shí)現(xiàn)，僅僅是用相關(guān)的屬性初始化了我們的原材料：圓點(diǎn)。由于環(huán)形進(jìn)度條在X、Y軸方向都有移動，所以為了方便，我們可以考慮在圓點(diǎn)外面再包一層?Border?作為看不見的殼，我們將圓點(diǎn)與殼底部對齊，現(xiàn)在只要讓殼繞中心旋轉(zhuǎn)就基本實(shí)現(xiàn)了目標(biāo)，下面是環(huán)形進(jìn)度條1個點(diǎn)到5個點(diǎn)帶殼的示意圖：

　　想一想，如果沒有這層殼，我們又有什么替代方法，這些方法是否都是極為方便的？可能沒有這層殼，就需要去琢磨怎么改變圓點(diǎn)的?RenderTransformOrigin?，好讓它們看起來都是圍繞一個點(diǎn)旋轉(zhuǎn)的，即使改變了進(jìn)度條整體的尺寸。套殼的代碼如下：

1 private Border CreateBorder(int index) 2 { 3 var ellipse = CreateEllipse(index); 4 ellipse.HorizontalAlignment = HorizontalAlignment.Center; 5 ellipse.VerticalAlignment = VerticalAlignment.Bottom; 6 var rt = new RotateTransform 7 { 8 Angle = -DotInterval * index 9 }; 10 var myTransGroup = new TransformGroup(); 11 myTransGroup.Children.Add(rt); 12 var border = new Border 13 { 14 RenderTransformOrigin = new Point(0.5, 0.5), 15 RenderTransform = myTransGroup, 16 Child = ellipse, 17 Visibility = NeedHidden ? Visibility.Collapsed : Visibility.Visible 18 }; 19 border.SetBinding(WidthProperty, new Binding("Width") { Source = this }); 20 border.SetBinding(HeightProperty, new Binding("Height") { Source = this }); 21 22 return border; 23 }

　　套殼代碼除了套殼和相關(guān)的初始化，最重要的是19和20行的寬高綁定，這是讓圓點(diǎn)旋轉(zhuǎn)中心始終唯一的關(guān)鍵。有了以上的準(zhǔn)備，我們終于可以開始for循環(huán)了：

1 //定義動畫 2 Storyboard = new Storyboard 3 { 4 RepeatBehavior = RepeatBehavior.Forever 5 }; 6 7 for (var i = 0; i < DotCount; i++) 8 { 9 //在這里創(chuàng)建圓點(diǎn) 10 }

　　下面就是最核心的關(guān)鍵幀動畫，通過之前用Blend提取出來的XAML，我們可以看到它使用了?SplineDoubleKeyFrame?，這會涉及三次貝塞爾曲線的控制點(diǎn)，考慮到易用性，我們會用?LinearDoubleKeyFrame?和?EasingDoubleKeyFrame?代替。在XAML中我們最關(guān)心的關(guān)鍵字應(yīng)該是角度，在時間片的哪部分，圓點(diǎn)應(yīng)該在哪兒，而又在什么時候，圓點(diǎn)應(yīng)該會消失，我們只要隨意截取兩個點(diǎn)的關(guān)鍵幀就能獲得以上所有信息：

?

　　上面兩張分別是圓點(diǎn)1和2透明度和位置的關(guān)鍵幀截圖，通過兩個點(diǎn)我們完全可以推斷所有點(diǎn)。出于個人喜好，我將透明度替換成了?Visibility?的切換，所以還會引入?DiscreteObjectKeyFrame?。篇幅原因，我們直接總結(jié)分析結(jié)果：

• 一開始所有點(diǎn)都是顯示的，但是位置不同，從點(diǎn)1的-110度開始，角度逐個減6；
• 點(diǎn)1開始運(yùn)動后，0.167秒（1/6秒）后點(diǎn)2開始運(yùn)動，所以各點(diǎn)動畫延遲時間為1/6秒（這里不太能確定是否和圓點(diǎn)數(shù)量有關(guān)）；
• 以點(diǎn)1為例，旋轉(zhuǎn)角度隨時間變化圖如下：

　　從上面7張圖中可以看出，在一次循環(huán)中點(diǎn)1是這樣運(yùn)動的：減速、勻速、加速、減速、勻速、加速，而且與之對應(yīng)的角度位置也給出了，最后水到渠成，環(huán)形進(jìn)度條就完成了。

?

四、截圖

　　通過設(shè)置不同的屬性，可以實(shí)現(xiàn)不同的效果：

　　

?

五、源碼

　　本文所討論的進(jìn)度條源碼已經(jīng)在github開源：https://github.com/NaBian/HandyControl

posted on 2018-07-11 13:14 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/9293945.html

總結(jié)

以上是生活随笔為你收集整理的WPF 控件库——仿制Windows10的进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。