WPF 控制項庫仿製Windows10的進度條

原文:

wpf 控制項庫——仿製windows10的進度條

一、其實有現成的

先來看看windows10進度條的兩種模式：

網上有不少介紹仿製windows10進度條的文章，也都實現了不錯的效果。而我再開一文的原因是覺得如果在這基礎上新增一些功能，比如圓點的數量，圓點的大小等等，效果可能會更好一些。接觸過uwp的朋友應該知道，其框架中自帶了進度條控制項，以 progressring 為例，通過blend，我們可以獲取到控制項的xaml，以下是部分截圖：

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

二、新增功能

如果要更改圓點的數量，圓點的大小或者圓點的移動速度，我們該如何實現呢？繼承章節一中的xaml，並根據所需調整模板就顯得太麻煩了，這會讓我們的樣式檔案顯得臃腫不堪，所以採用純粹的c#**來實現它或許比較明智。不過之前的xaml也不是一無是處，至少它給出了環形進度條的關鍵幀動畫的構成，這些資訊對我們來說很重要，免去了我們自己去分析的步驟。

現在我們的主要工作就是讓寫死的關鍵幀能夠通過屬性靈活配置，所以我們可能需要先編碼乙份進度條的基類（ loadingbase ），以提取兩種型別進度條的共性。基類中定義8個屬性，分別是 isrunning 、 dotcount 、 dotinterval 、 dotborderbrush 、 dotborderthickness 、 dotdiameter 、 dotspeed 、 dotdelaytime ，它們的含義已經是自注釋的，不必贅述。而在環形進度條中，還有另外兩個屬性： dotoffset 和 needhidden ，分別表示圓點整體的位置偏移和在運動中是否需要隱藏圓點。

三、關鍵幀動畫

最後一步就是用c#**實現關鍵幀動畫，不過得先有公尺才能做飯，故而需要先建立圓點：

1
protected ellipse createellipse(int
index)2);
5 ellipse.setbinding(heightproperty, new binding("
dotdiameter
") );
6 ellipse.setbinding(shape.fillproperty, new binding("
foreground
") );
7 ellipse.setbinding(shape.strokethicknessproperty, new binding("
dotborderthickness
") );
8 ellipse.setbinding(shape.strokeproperty, new binding("
dotborderbrush
") );
9return
ellipse;
10 }

上面的方法在進度條基類中實現，僅僅是用相關的屬性初始化了我們的原材料：圓點。由於環形進度條在x、y軸方向都有移動，所以為了方便，我們可以考慮在圓點外面再包一層 border 作為看不見的殼，我們將圓點與殼底部對齊，現在只要讓殼繞中心旋轉就基本實現了目標，下面是環形進度條1個點到5個點帶殼的示意圖：

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

1
private border createborder(int
index)2;
10var mytransgroup = new
transformgroup();
11mytransgroup.children.add(rt);
12var border = new
border13;
19border.setbinding(widthproperty, new binding("
width
") );
20border.setbinding(heightproperty, new binding("
height
") );
2122return
border;
23 }

1
//定義動畫
2 storyboard = new
storyboard3;
67for (var i = 0; i < dotcount; i++)
8

下面就是最核心的關鍵幀動畫，通過之前用blend提取出來的xaml，我們可以看到它使用了 splinedoublekeyframe ，這會涉及三次貝塞爾曲線的控制點，考慮到易用性，我們會用 lineardoublekeyframe 和 easingdoublekeyframe 代替。在xaml中我們最關心的關鍵字應該是角度，在時間片的哪部分，圓點應該在哪兒，而又在什麼時候，圓點應該會消失，我們只要隨意擷取兩個點的關鍵幀就能獲得以上所有資訊：

上面兩張分別是圓點1和2透明度和位置的關鍵幀截圖，通過兩個點我們完全可以推斷所有點。出於個人喜好，我將透明度替換成了 visibility 的切換，所以還會引入 discreteobjectkeyframe 。篇幅原因，我們直接總結分析結果：

從上面7張圖中可以看出，在一次迴圈中點1是這樣運動的：減速、勻速、加速、減速、勻速、加速，而且與之對應的角度位置也給出了，最後水到渠成，環形進度條就完成了。

四、截圖

通過設定不同的屬性，可以實現不同的效果：

五、原始碼

本文所討論的進度條原始碼已經在github開源：

WPF 控制項庫仿製Windows10的進度條

WPF 控制項庫輪播控制項

WPF控制項

WPF控制項

WPF 控制項庫 仿製Windows10的進度條

WPF 控制項庫 輪播控制項

WPF控制項

WPF控制項

相關推薦

WPF 控制項庫仿製Windows10的進度條

WPF 控制項庫輪播控制項