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



好的,所以我在我的视图模型中有这个属性:

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 ValueBackground我希望它变得Green

  1. 当我IsChecked Property 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>

你的逻辑很简单,你可以避免转换器,只需在你的风格中使用触发器:

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

然后,需要更新控件模板以正确遵循控件的 Background 属性。你可以将模板绑定用于此目的:

                <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”/>

相关内容

  • 没有找到相关文章

最新更新