不更改颜色 WPF 的矩形

Question

我正在尝试使矩形根据树滑块更改颜色。 B，R和G。

代码流： 滑块绑定到 colorClass 女巫集的 g、r 和 b 值，具体取决于幻灯片。

每当这些道具之一发生变化时，它都会调用一个事件来更新结果颜色 矩形颜色由结果颜色设置

因此，在理论上，当您拖动滑块时，矩形应该切换颜色。 但事实并非如此

我收到此错误。

System.Windows.Data Error: 5 : Value produced by BindingExpression is not valid for target property.; Value='#FF0000FF' BindingExpression:Path=Result; DataItem='VM' (HashCode=64479624); target element is 'Rectangle' (Name=''); target property is 'Fill' (type 'Brush')

这是我的 XAML：

<Label VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0" FontSize="24">R</Label>
<Slider Maximum="255" Name="RSlider" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" Value="{Binding Path=RedValue, Mode=TwoWay}"></Slider>
<TextBox PreviewTextInput="NumberValidationTextBox" Grid.Row="1" Grid.Column="2" Height="auto" Text="{Binding Path=RedValue, Mode=TwoWay}"></TextBox>
<Label VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="2" Grid.Column="0" FontSize="24">G</Label>
<Slider Maximum="255" Name="GSlider" VerticalAlignment="Center" Grid.Row="2" Grid.Column="1" Value="{Binding Path=GreenValue, Mode=TwoWay}"></Slider>
<TextBox PreviewTextInput="NumberValidationTextBox" Grid.Row="2" Grid.Column="2" Text="{Binding Path=GreenValue, Mode=TwoWay}"></TextBox>
<Label VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="0" FontSize="24">B</Label>
<Slider Maximum="255" Name="BSlider" VerticalAlignment="Center" Grid.Row="3" Grid.Column="1" Value="{Binding Path=Color.BlueValue, Mode=TwoWay}"></Slider>
<TextBox PreviewTextInput="NumberValidationTextBox" Grid.Row="3" Grid.Column="2" Text="{Binding Path=Color.BlueValue, Mode=TwoWay}"></TextBox>
<Rectangle Grid.Column="3" Grid.Row="1" Grid.RowSpan="3" Fill="{Binding Path=Result}"></Rectangle>

我有一个颜色类，将保存在数据库中。 它有 3 个整数道具 B、G 和 R。这是类：

public class ColorModel : INotifyPropertyChanged
{
private int _GreenValue;
private int _RedValue;
private int _BlueValue;
public int GreenValue
{
get { return _GreenValue; }
set
{
if (_GreenValue != value)
{
_GreenValue = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("GreenValue"));
}
}
}
}

public int RedValue
{
get { return _RedValue; }
set
{
if (_RedValue != value)
{
_RedValue = value;
PropertyChanged(this, new PropertyChangedEventArgs("RedValue"));
}
}
}

public int BlueValue
{
get { return _BlueValue; }
set
{
if (_BlueValue != value)
{
_BlueValue = value;
PropertyChanged(this, new PropertyChangedEventArgs("BlueValue"));
}
}
}
public Color GetColor()
{
Color result = new Color();
result = Color.FromScRgb(1, RedValue, GreenValue, BlueValue);
return result;
}
public event PropertyChangedEventHandler PropertyChanged;
}

GetColor 方法只是将 3 个 int 属性转换为颜色。 然后我有一个 ViewModel，有 2 个道具 1 是这个颜色类，一个是颜色(结果颜色(，这个属性是我希望我的矩形从中获取颜色的属性。

主代码：

public ColorModel Col;
public MainWindow()
{
InitializeComponent();
Col = new ColorModel();
var VM = new VM();
VM.Color = Col;
this.DataContext = VM;
}

如果它有帮助，这里是视图模型。

public class VM : INotifyPropertyChanged
{
private ColorModel _Color { get; set; }
public Color Result { get; set; }
public ColorModel Color
{
get { return _Color; }
set
{
_Color = value;
Result = _Color.GetColor();
_Color.PropertyChanged += _Color_PropertyChanged;
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("Result"));
}
}
}
private void _Color_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
Result = _Color.GetColor();
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("Result"));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}

我真的很感激每一个答案！我是 WPF 的新手。

Answer 1

Rectangle.Fill是一个Brush对象，而不是一个Color。

您需要添加一个 IValueConverter 类，该类将在 ViewModel 属性和 SolidColorBrush 实例之间进行转换。

public class ColorToSolidColorBrushConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value is Color color)
return new SolidColorBrush(color);
return DefaultValue;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var brush = value as SolidColorBrush;
return brush?.Color;
}
public SolidColorBrush DefaultValue { get; } = Brushes.Fuchsia;
}

用法

<Window ...>
<Window.Resources>
<ColorToSolidColorBrushConverter x:Key="ColorToSolidColorBrushConverter" />
</Window.Resources>
...
<Rectangle Grid.Column="3" Grid.Row="1" Grid.RowSpan="3" Fill="{Binding Path=Result, Converter={StaticResource ColorToSolidColorBrushConverter}"></Rectangle>

Answer 2

Fill属性的类型是Brush，而不是Color。

你可以像这样使用SolidColorBrush：

<Rectangle ...>
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Result}"/>
</Rectangle.Fill>
</Rectangle>

---

除此之外，您还可以将 Result 属性移动到 ColorModel 类，并以绑定滑块值的相同方式绑定到该类。因此，您将避免视图模型中复杂的 PropertyChanged 事件处理。

<SolidColorBrush Color="{Binding Color.Result}"/>

颜色模型如下所示：

public class ColorModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private int red;
private int green;
private int blue;
public int RedValue
{
get { return red; }
set
{
if (red != value)
{
red = value;
OnPropertyChanged(nameof(RedValue));
OnPropertyChanged(nameof(Result));
}
}
}
public int GreenValue
{
get { return green; }
set
{
if (green != value)
{
green = value;
OnPropertyChanged(nameof(GreenValue));
OnPropertyChanged(nameof(Result));
}
}
}
public int BlueValue
{
get { return blue; }
set
{
if (blue != value)
{
blue = value;
OnPropertyChanged(nameof(BlueValue));
OnPropertyChanged(nameof(Result));
}
}
}
public Color Result
{
get
{
return Color.FromRgb((byte)red, (byte)green, (byte)blue);
}
}
}