WPF ProgressBar 样式

希望写个ProgressBar的样式，在progress value不同的时候显示不同的颜色的progress bar

1.写转换器

public class ProgressBarValueConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
double v = (double)value;

string imageUri = "../Images/progress bar_1.png";

if (v > 80)
{
imageUri = "../Images/progress bar_3.png";
}
else if (v > 50)
{
imageUri = "../Images/progress bar_2.png";
}

BitmapImage img = new BitmapImage(new Uri(imageUri, UriKind.Relative));

return img;
}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}

2.创建样式

<c:ProgressBarValueConverter x:Key="pbConverter"/>
<Style x:Key="ProgressBarStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Image Name="PART_Track" Source="../Images/progress bar.png" HorizontalAlignment="Left" Stretch="Fill"/>
<Image Name="PART_Indicator" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value, Converter={StaticResource pbConverter}}"
HorizontalAlignment="Left" Stretch="Fill"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

3.设置progress bar的style

progress bar.png:


progress bar_1.png:


progress bar_2.png:


progress bar_3.png:


------------------------------------------------------------------

如果仅仅是希望创建一个扁平化的progress bar，那么连转换器都可以不用写

<Style x:Key="FlatProgressBar" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Image Name="PART_Track" Source="../Images/Flat Progress Bar.png" HorizontalAlignment="Left" Stretch="Fill"/>
<Image Name="PART_Indicator" Source="../Images/Flat Progress Bar_1.png" HorizontalAlignment="Left" Stretch="Fill"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Flat Progress Bar.png：

Flat Progress Bar_1.png：