WPF：基于值条件的自定义进度条颜色

Question

所以我有这个自定义 Progress-bar 放在 ListView 列中：

<Style x:Key="CustomProgressBar" TargetType="ProgressBar" >
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="ProgressBar">
                <Border BorderBrush="Gray" BorderThickness="1" Background="Gray" CornerRadius="0" Padding="0" >
                    <Grid x:Name="PART_Track">
                        <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="MediumSeaGreen" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

列表视图

<ListView.Resources>
  <DataTemplate x:Key="MyDataTemplate">
    <Grid Margin="-6" Height="22">
        <ProgressBar 
            Name="progressBarColumn"
            Maximum="100"
            Value="{Binding Progress, UpdateSourceTrigger=PropertyChanged}" 
            Width="{Binding Path=Width, ElementName=ProgressCell}" 
            Margin="0"
            Style="{StaticResource CustomProgressBar}" />
        <TextBlock
            Text="{Binding Path=Value, ElementName=progressBarColumn, StringFormat={}{0:N1}%}"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            FontSize="11.5"
            Foreground="Gainsboro"
            Margin="0,1,0,0"/>
    </Grid>
</DataTemplate>
</ListView.Resources>

所以你可以看到我的 Progress-bar 颜色是 Gray 并且开始填充颜色时变成 MediumSeaGreen.

所以我希望颜色是 Gray 并且在开始填充时我希望这种颜色变成 Yellow 只有当它的值达到 100% 我希望它是 MediumSeaGreen.

可能吗？

Answer 1

有可能。在矩形上使用默认 setter 黄色的样式，并在 ProgressBar.Value 达到 100

时通过触发器将其更改为 MediumSeaGreen

<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left">
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="Yellow"/>
            <Style.Triggers>
                <DataTrigger Value="100" Binding="{Binding Path=Value, RelativeSource={RelativeSource AncestorType=ProgressBar}}">
                    <Setter Property="Fill" Value="MediumSeaGreen"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

Answer 2

您只需要实现 IValueConverter 接口，例如：

public class ProgressToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        var progress = (double)value;

        //your coloring conditions here, just return the color based on the progress value

        if (progress == 100d)
        {
            return Brushes.MediumSeaGreen;
        }

        if (progress >= 0.01d)
        {
            return Brushes.Yellow;
        }            

        return Brushes.Gray;
    }

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

然后将其添加到您的资源中：

<Window.Resources>
            <local:ProgressToColorConverter x:Key="ProgressToColorConverter"/>
</Window.Resources>

并在你的进度条中使用它作为

    <ProgressBar ... 
Foreground="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Value, Converter={StaticResource ProgressToColorConverter}}"/>

WPF：基于值条件的自定义进度条颜色

WPF: Custom progress-bar color base on value condition

wpf

progress-bar