WPF：使用 IMultiValueConverter 更改进度条颜色

Question

好的，我的视图模型中有这个属性：

public double Progress
{
    get { return _progress; }
    set
    {
        _progress= value;
        OnPropertyChanged();
    }
}

public bool IsChecked
{
    get { return _isChecked; }
    set
    {
        _isChecked = value;
        OnPropertyChanged();
    }
}

如您所见，这个工具 INotifyPropertyChanged。

这是我的 Progress-Bar:

<ProgressBar Name="progressBarColumn"
             Minimum="0"
             Maximum="100"
             Value="{Binding Progress, UpdateSourceTrigger=PropertyChanged}" 
             Width="{Binding Path=Width, ElementName=ProgressCell}" 
             Style="{StaticResource CustomProgressBar2}"/>

还有我的 Style:

<Style x:Key="CustomProgressBar2" TargetType="ProgressBar">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ProgressBar" >
                <Grid x:Name="Root">
                    <Border Name="PART_Track" 
                            CornerRadius="0" 
                            Background="Blue"
                            BorderBrush="Blue"
                            BorderThickness="1"/>
                    <Border Name="PART_Indicator" 
                            CornerRadius="0" 
                            Background="Gray" 
                            BorderBrush="Gray" 
                            BorderThickness="1" 
                            HorizontalAlignment="Left" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

所以这很好用，我的 Progress-Bar 颜色是 Blue 并填充 Gray 颜色。

现在我想再补充两件事，不知道什么时候： 1. 当我的 Progress-Bar 达到 100 的 Value 我想要它 Background 变成 Green.

当我的 Property 调用 IsChecked 是 False 我希望我的 Background 变成 Red。

所以直到这里我有这个 IMultiValueConverter:

public class ProgressToPropgressBarBackgroundConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            // Do my stuff
        }

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

问题是我不知道在哪里添加我的 converter 以及如何添加。

编辑：

<Style x:Key="CustomProgressBar2" TargetType="ProgressBar">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ProgressBar" >
                <Grid x:Name="Root">
                    <Border Name="PART_Track" 
                            CornerRadius="0" 
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding Background}"
                            BorderThickness="1"/>
                    <Border Name="PART_Indicator" 
                            CornerRadius="0" 
                            Background="{TemplateBinding Foreground}" 
                            BorderBrush="{TemplateBinding Foreground}" 
                            BorderThickness="1" 
                            HorizontalAlignment="Left" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Value="100" Binding="{Binding Path=Value, RelativeSource={RelativeSource AncestorType=ProgressBar}}">
            <Setter Property="Foreground" Value="DarkCyan"/>
        </DataTrigger>

        <DataTrigger Binding="{Binding IsChecked}" Value="true">
            <Setter Property="Background" Value="{DynamicResource ProgressBackgroundColor}" />
            <Setter Property="Foreground" Value="{DynamicResource ProgressBarFillColor}" />
        </DataTrigger>

        <DataTrigger Binding="{Binding IsChecked}" Value="false">
            <Setter Property="Background" Value="#55B3B3B6" />
        </DataTrigger>
    </Style.Triggers>
</Style>

Answer 1

您的逻辑足够简单，您可以避免使用转换器，只需在您的风格中使用触发器即可：

<Style.Triggers>
    <DataTrigger Binding=“{Binding Progress}” Value=“100”>
        <Setter Property=“Background” Value=“Green” />
    </DataTrigger>
    <DataTrigger Binding=“{Binding IsChecked}” Value=“True”>
        <Setter Property=“Background” Value=“Red” />
    </DataTrigger>
</Style.Triggers>

然后您需要更新您的控件模板以正确尊重控件的背景属性。您可以为此使用 TemplateBinding：

                <Border Name="PART_Track" 
                        CornerRadius="0" 
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding Background}"
                        BorderThickness="1"/>
                <Border Name="PART_Indicator" 
                        CornerRadius="0" 
                        Background="{TemplateBinding Foreground}" 
                        BorderBrush="{TemplateBinding Foreground}" 
                        BorderThickness="1" 
                        HorizontalAlignment="Left" />

如果您想要相同的蓝色和灰色默认颜色，请将它们添加到样式中：

<Setter Property=“Background” Value=“Blue”/>
<Setter Property=“Foreground” Value=“Gray”/>

WPF：使用 IMultiValueConverter 更改进度条颜色

WPF: Change Progress-Bar color with IMultiValueConverter

wpf

imultivalueconverter

progress-bar