c# - 将颜色属性从 xaml 绑定(bind)到 c#

Question

我正在尝试将自制控件的属性从我的 View 绑定(bind)到我的 View 模型。当我将颜色直接绑定(bind)到 xaml 中的另一个元素时，它可以工作，但是当我尝试将它绑定(bind)到我的 View 模型中的属性时。性质没有变化。

xaml:

<StackPanel>
    <Border Height="50"
            BorderBrush="Black"
            BorderThickness="1">
        <Border.Background>
            <SolidColorBrush Color="{Binding color}" />
        </Border.Background>
    </Border>
    <Border Height="50"
            BorderBrush="Black"
            BorderThickness="1">
        <Border.Background>
            <SolidColorBrush Color="{Binding ElementName=colorCircle, Path=selectedColor}" />
        </Border.Background>
    </Border>

    <local:ColorCircle x:Name="colorCircle" selectedColor="{Binding color, Mode=OneWayToSource}" />

</StackPanel>

.cs:

public partial class MainWindow : Window, INotifyPropertyChanged
{
    private Color _color;
    public Color color
    {
        get { return _color; }
        set
        {
            _color = value;
            RaisePropertyChanged("color");
        }
    }

    public MainWindow()
    {
        DataContext = this;
        InitializeComponent();
    }

    protected virtual void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

色轮

xaml:

<Grid HorizontalAlignment="Center"
      VerticalAlignment="Center"
      Background="Transparent">

    <Image x:Name="ColorImage"
           Width="300"
           Height="300"
           HorizontalAlignment="Center"
           VerticalAlignment="Top"
           RenderOptions.BitmapScalingMode="HighQuality"
           Source="color_wheel.png" />

    <Canvas x:Name="CanvImage"
            Width="300"
            Height="300"
            HorizontalAlignment="Center"
            VerticalAlignment="Top"
            Background="Transparent">

        <Ellipse Width="300"
                 Height="300"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Top"
                 Fill="Transparent"
                 MouseDown="Ellipse_MouseDown"
                 MouseMove="Ellipse_MouseMove"
                 MouseUp="Ellipse_MouseUp" />
        <Ellipse x:Name="ellipsePixel"
                 Canvas.Left="150"
                 Canvas.Top="150"
                 Width="10"
                 Height="10"
                 Fill="Transparent"
                 MouseDown="Ellipse_MouseDown"
                 MouseMove="Ellipse_MouseMove"
                 MouseUp="Ellipse_MouseUp"
                 Stroke="Black"
                 StrokeThickness="2" />
    </Canvas>
</Grid>

.cs:

public partial class ColorCircle : UserControl
{
    public static readonly DependencyProperty SelectedColorProperty =
        DependencyProperty.Register("selectedColor", typeof(SolidColorBrush), typeof(ColorCircle));

    private SolidColorBrush _selectedColor = new SolidColorBrush(Colors.Transparent);
    public SolidColorBrush selectedColor
    {
        get { return (SolidColorBrush)GetValue(SelectedColorProperty); }
        set
        {
            if (_selectedColor != value)
            {
                SetValue(SelectedColorProperty, value);
            }
        }
    }

    private bool __isMouseDown { get; set; } = false;
    private bool _isMouseDown
    {
        get { return __isMouseDown; }
        set
        {
            __isMouseDown = value;
            if (__isMouseDown) ColorSelect();
        }
    }

    public ColorCircle()
    {
        InitializeComponent();
        DataContext = this;
    }

    private void ColorSelect()
    {
        try
        {
            CroppedBitmap cb = new CroppedBitmap(ColorImage.Source as BitmapSource,
                new Int32Rect((int)Mouse.GetPosition(CanvImage).X,
                    (int)Mouse.GetPosition(CanvImage).Y, 1, 1));

            byte[] pixels = new byte[4];

            try
            {
                cb.CopyPixels(pixels, 4, 0);
            }
            catch (Exception) { }

            ellipsePixel.SetValue(Canvas.LeftProperty, Mouse.GetPosition(CanvImage).X - 5);
            ellipsePixel.SetValue(Canvas.TopProperty, Mouse.GetPosition(CanvImage).Y - 5);
            CanvImage.InvalidateVisual();
            selectedColor = new SolidColorBrush(Color.FromArgb(255, pixels[2], pixels[1], pixels[0]));

        }
        catch (Exception) { }
    }

    private void Ellipse_MouseMove(object sender, MouseEventArgs e)
    {
        if (_isMouseDown) ColorSelect();
    }

    private void Ellipse_MouseDown(object sender, MouseButtonEventArgs e)
    {
        _isMouseDown = true;
    }

    private void Ellipse_MouseUp(object sender, MouseButtonEventArgs e)
    {
        _isMouseDown = false;
    }
}

colorcircle 有一个 DependencyProperty selectedColor 返回一个 Color。这样可行。我在第二个边框中得到了颜色，但在第一个边框中没有...

Answer 1

您的代码无法正常工作的原因是您将 SolidColorBrush 的 Color 属性绑定(bind)到 ColorPicker ViewModel 中的 SolidColorBrush 属性

将 SelectedColor 类型更改为 Color

主要Xaml

 <StackPanel>
        <Border Height="50"
            BorderBrush="Black"
            BorderThickness="1">
            <Border.Background>
                <SolidColorBrush Color="{Binding color}" />
            </Border.Background>
        </Border>
        <Border Height="50"
            BorderBrush="Black"
            BorderThickness="1">
            <Border.Background>
                <SolidColorBrush Color="{Binding ElementName=colorPicker, Path=SelectedColor}" />
            </Border.Background>
        </Border>

        <local:ColorPicker x:Name="colorPicker" />

    </StackPanel>

上述 XAML 的 Xaml.CS

public partial class MainWindow : Window
{
    private Color _MyColor;

    public Color MyColor
    {
        get { return _MyColor; }
        set { _MyColor = value; }
    }

    public MainWindow()
    {            
        InitializeComponent();
        MyColor = Colors.Orange;
        this.DataContext = this;
    }

}

颜色选择器.xaml

<Grid>
    <Button Click="Button_Click" Content="Click Me To Change Color"/>
</Grid>

颜色选择器.xaml.cs

 public partial class ColorPicker : UserControl, INotifyPropertyChanged
    {
        List<Color> _myColors = new List<Color>() 
        { Colors.Yellow, Colors.Green, Colors.Orange, Colors.Red };

        public Color SelectedColor
        {
            get { return (Color)GetValue(SelectedColorProperty); }
            set { SetValue(SelectedColorProperty, value); OnPropertyChanged("SelectedColor"); }
        }


        public static readonly DependencyProperty SelectedColorProperty =
            DependencyProperty.Register("SelectedColor", typeof(Color), typeof(ColorPicker), new PropertyMetadata(null));        

        public ColorPicker()
        {
            InitializeComponent();
            SelectedColor = _myColors[0];
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            int index = _myColors.IndexOf(SelectedColor);
            if (index == _myColors.Count - 1)
            {
                index = 0;
            }
            else
            {
                index++;
            }

            SelectedColor = _myColors[index];
        }

        public event PropertyChangedEventHandler PropertyChanged;


        public void OnPropertyChanged(String propname)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propname));
            }
        }
    }