項目中用到圓形進度條,首先就想到使用 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。
參考文獻