两张图片的进度条

我想从两个图像（空白和填充）创建一个进度条，如果值设置为30，则有30％填充和70％空白等组合的图像。

这是我目前的代码

以下是它的工作方式， 以下是我希望它如何工作的方式。

Answer 1

为了简单起见，我使用颜色而不是图像路径，但这个想法保持不变。

将指示器元素的宽度设置为完整轨道的宽度，并将其包裹在Grid ，该Grid充当PART_Indicator控件，该控件负责剪切进度指示器。

Answer 2

@ grek40给了我一个关于LinearGradientBrush建议的想法：LinearGradientBrush可以用作OpacityMask来隐藏部分填充图像

具有固定进度值的示例：

将偏移量绑定到ProgressBar.Value我必须使用MultiValueConverter，它使用Value，Minimum和Maximum来计算Offset：

 public class PercentageConverter: IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { if (values == null || values.Length != 3) return 0; if (Equals(DependencyProperty.UnsetValue, values[0]) || Equals(DependencyProperty.UnsetValue, values[1]) || Equals(DependencyProperty.UnsetValue, values[2])) return 0; double value = (double)values[0]; double min = (double)values[1]; double max = (double)values[2]; return (value - min) / (max - min); } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } 

注意：模板中不再使用矩形PART_Indicator

Answer 3

我认为没有一种简单的方法可以实现您的确切目标（您最好的机会是具有两列的Grid，并且第一列的宽度通过转换器绑定到ProgressBar的值）

但是，根据您发送的第二张图像，您可以为PART_Indicator使用绿色矩形并设置其Opacity并使用其他效果：

编辑

第一个提案。 我使用了Button而不是图像：

这是转换器：

 public class conv : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { ProgressBar pb = value as ProgressBar; double av = pb.ActualWidth; double diff = pb.Maximum - pb.Minimum; return new GridLength((pb.Value / diff) * av); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } 

希望能帮助到你。