WPF:根据值条件自定义进度条颜色

时间:2017-02-06 08:59:08

标签: wpf progress-bar

所以我将这个自定义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

<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 }。

有可能吗?

2 个答案:

答案 0 :(得分:1)

您只需要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}}"/>

答案 1 :(得分:0)

有可能。使用Rectanle上的Style和黄色的默认设置器,并在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>