来自两个图像的进度条 [英] Progress bar from two images

问题描述

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

I want to create a progress bar from two images (empty and filled), if value is set to 30, there is image combined from 30% filled and 70% empty etc.

这是我当前的代码

<ProgressBar Value="30" Height="30" Width="230" 
                     BorderThickness="0" 
                     HorizontalAlignment="Center" 
                     Foreground="#0A8098" Maximum="100"
                     BorderBrush="Transparent" Name="ProgressBar" Margin="137,0,147,0" >
    <ProgressBar.Template>
        <ControlTemplate>
            <Grid>
                <Image Name="PART_Track" Source="Resources/emptybar.png"  Stretch="Fill"/>
                <Rectangle Name="PART_Indicator"    HorizontalAlignment="Left">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="Resources/filledbar.png" Stretch="UniformToFill"/>
                    </Rectangle.Fill>
                </Rectangle>
            </Grid>
        </ControlTemplate>
    </ProgressBar.Template>
</ProgressBar>

这里是它的工作方式，并且这里

Here is how it's work, and here is how I want it to work.

推荐答案

为简单起见，我使用颜色而不是图像路径，但是

For the sake of simplicity I use colors instead of your image paths, but the idea stays the same.

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

Set the width of the indicator element to the width of the full track and wrap it inside a Grid which acts as the PART_Indicator control, which is responsible for clipping the progress indicator.

<ControlTemplate>
    <Grid>
        <Rectangle Name="PART_Track" Fill="Gray"  Stretch="Fill"/>
        <Grid Name="PART_Indicator" HorizontalAlignment="Left">
            <Rectangle HorizontalAlignment="Left" Width="{Binding ActualWidth,ElementName=PART_Track}">
                <Rectangle.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="Green" Offset="0.2"/>
                        <GradientStop Color="Orange" Offset="0.8"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
    </Grid>
</ControlTemplate>

这篇关于来自两个图像的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！