如何在 WPF 中使用图像透明区域中的 ProgressBar Border 和 Progress Indicator

Question

我有一张像这样的图片（曲目）-

你看到的白色部分实际上是透明的。我想根据它的进度用颜色（指示器）填充它，就像这样-

但问题是，每当我在 Blend 中设置图像（轨道）时，"Progress Color"（指示器）实际上会像这样掩盖它的边界（轨道）-

为了方便，我附上代码-

    <Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">


        <ProgressBar Value="50" Height="50" Width="450" Foreground="Red" BorderThickness="10" Background="{x:Null}">
            <ProgressBar.BorderBrush>
                <ImageBrush ImageSource="MOyml.png" Stretch="UniformToFill"/>
            </ProgressBar.BorderBrush>          
        </ProgressBar>   
</Window>

有解决办法吗？

Answer 1

您需要修改控件模板以便填充到正确的位置。

Answer 2

这是处理此操作的适当教程

Use shape in a progressbar

如何在 WPF 中使用图像透明区域中的 ProgressBar Border 和 Progress Indicator

How to use ProgressBar Border from image and Progress Indicator in image's transparent area in WPF

wpf

xaml

image

progress-bar