话不多说先上图：
有三部分组成：1. 底下灰色条部分 2.上层涂色部分 3. 百分比显示部分
-
样式代码里可以看到 Tamplate里有两层，一层是上标进度百分比，一层是进度条。
由于上标和进度条base我是直接在Blend里导入psd图层生成的代码 所以是画布格式的。这也注定了整个图形不可改变，除非改变path或者Image。
另外下层的两个Border 命名必须是x:Name="PART_Track" 和 x:Name="PART_Indicator" 这是进度条样式规定。
关于注释部分，因为我是path画出来的base 本就横向，无法改成纵向，所以无法纵向属性触发，有大神有好的解决方法请留言赐教。
上标的位置是绑定为x:Name="PART_Indicator"的宽度，所以可以跟随显示。 textbook显示的是ProgressBar的Value值。这部分做了两个Convert转换器，分别是将画布Left值转成（x:Name="PART_Indicator"的宽度-25）、将textbook的文字格式化为ProgressBar的Value值+“%”。
-
public
class
ProgressBarValueLocationConverter :
IValueConverter
-
{
-
-
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
-
{
-
return ((
double)
value -
25);
-
}
-
-
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
-
{
-
return
0;
-
}
-
}
-
-
-
public
class
ProgressBarValueTextFormatConverter:
IValueConverter
-
{
-
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
-
{
-
return
value.ToString() +
"%";
-
}
-
-
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
-
{
-
throw
new NotImplementedException();
-
}
-
}
完成^^
使用的时候，可以改变Value值，Foreground值
"Black" Value="10" HorizontalAlignment="Center" VerticalAlignment="Center"> 