WPF 實現圓形進度條

       項目中用到圓形進度條，首先就想到使用 ProgressBar 擴展一個，在園子裏找到迷途的小榔頭給出的思路和部分代碼，本身加以實現。

       進度小於60顯示紅色，大於60則顯示綠色。效果以下：

           

           

 

 

基本思路：

• 本質上是一個進度條，只是外觀有別於矩形進度條，因此須要修改ProgressBar的ControlTemplate。
• 進度條部分實際是一個扇形，用WPF動態繪出。
• 要將進度條的值（Value依賴屬性）轉換爲進度條，須要一個Converter。
• 根據不一樣的值區間繪製不一樣的顏色即實現顏色隨進度變化。

 關鍵代碼：

 1. 修改ProgressBar的ControlTemplate。

　　

1 <ProgressBar Minimum="0"
2              Maximum="100"
3              Value="{Binding SuccessRate, Mode=OneWay}">
4     <ProgressBar.Template>
5         <ControlTemplate TargetType="ProgressBar">
6             <Border Background="{TemplateBinding Value, Converter={StaticResource ValueToProcessConverter}, ConverterParameter=200}"/>
7         </ControlTemplate>
8     </ProgressBar.Template>
9 </ProgressBar>

 

 2. 實現根據值繪製扇形的轉換器。

 見Demo。

 3. 動態設置進度條依賴屬性Value。

 

參考文獻

1. http://www.cnblogs.com/goxmpx/p/3741915.html

 

源碼下載