Question

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

这是我目前的代码

<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是如何运作的，here是我希望它发挥作用的方式。

Answer 1

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

将指示元素的宽度设置为完整轨道的宽度，并将其包裹在Grid内，该PART_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>控件，负责剪切进度指示器。

var imgSrcData = window.btoa(fileLoadedEvent.target.result);

Answer 2

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

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

<ControlTemplate>
    <Grid>
        <Image Name="PART_Track" Source="Resources/emptybar.png"  Stretch="Fill"/>
        <Rectangle Name="PART_Indicator" Fill="DarkGreen" Opacity="0.5"   HorizontalAlignment="Left">
            <Rectangle.Effect>
                <BlurEffect  Radius="2" />
            </Rectangle.Effect>
        </Rectangle>
    </Grid>
</ControlTemplate>

修改

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

<ProgressBar.Template> <ControlTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ProgressBar}, Converter={StaticResource conv}}"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Name="PART_Track" Source="images/pic1.png" Stretch="Fill" Grid.ColumnSpan="2"/> <Image Source="images/pic2.png" HorizontalAlignment="Left" Stretch="UniformToFill" Width="{Binding ElementName=PART_Track, Path=ActualWidth}" /> </Grid> </ControlTemplate> </ProgressBar.Template>

这是转换器：

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(); } }

希望它有所帮助。

Answer 3

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

具有固定进度值的示例：

<ProgressBar Height="40" Minimum="0" Maximum="100" Value="30">
    <ProgressBar.Template>
        <ControlTemplate>
            <Grid>
                <Image Name="PART_Track" Source="Resources/empty.png" Stretch="Fill"/>
                <Image Name="ImgIndicator" Source="Resources/filled.png" Stretch="Fill">
                    <Image.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Offset="0.3" Color="Black" />
                            <GradientStop Offset="0.3"/>
                        </LinearGradientBrush>
                    </Image.OpacityMask>
                </Image>
            </Grid>
        </ControlTemplate>
    </ProgressBar.Template>
</ProgressBar>

将偏移量绑定到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();
    }
}

<ProgressBar Height="40" Minimum="0" Maximum="100" Value="30">
    <ProgressBar.Template>
        <ControlTemplate>
        <Grid>
            <Image Name="PART_Track" Source="Resources/empty.png" Stretch="Fill"/>
                <Image Name="ImgIndicator" Source="Resources/filled.png" Stretch="Fill">
                    <Image.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Color="Black">
                                <GradientStop.Offset>
                                    <MultiBinding Converter="{StaticResource CvtOffset}">
                                        <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}"/>
                                        <Binding Path="Minimum" RelativeSource="{RelativeSource TemplatedParent}"/>
                                        <Binding Path="Maximum" RelativeSource="{RelativeSource TemplatedParent}"/>
                                    </MultiBinding>
                                </GradientStop.Offset>
                            </GradientStop>

                            <GradientStop>
                                <GradientStop.Offset>
                                    <MultiBinding Converter="{StaticResource CvtOffset}">
                                        <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}"/>
                                        <Binding Path="Minimum" RelativeSource="{RelativeSource TemplatedParent}"/>
                                        <Binding Path="Maximum" RelativeSource="{RelativeSource TemplatedParent}"/>
                                    </MultiBinding>
                                </GradientStop.Offset>
                            </GradientStop>

                        </LinearGradientBrush>
                    </Image.OpacityMask>
                </Image>
            </Grid>
        </ControlTemplate>
    </ProgressBar.Template>
</ProgressBar>

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

两张图片的进度条

3 个答案: