title: Binding color property from xaml to c#
body: <p>I am trying to bind a property of a self made control from my view to my viewmodel. When I bind the color directly to another element in the xaml, it works but when i try to bind it to a property in my viewmodel. There is not change in property.</p>
  
  <p>xaml:</p>
  
  <pre><code>&lt;StackPanel&gt;
      &lt;Border Height="50"
              BorderBrush="Black"
              BorderThickness="1"&gt;
          &lt;Border.Background&gt;
              &lt;SolidColorBrush Color="{Binding color}" /&gt;
          &lt;/Border.Background&gt;
      &lt;/Border&gt;
      &lt;Border Height="50"
              BorderBrush="Black"
              BorderThickness="1"&gt;
          &lt;Border.Background&gt;
              &lt;SolidColorBrush Color="{Binding ElementName=colorCircle, Path=selectedColor}" /&gt;
          &lt;/Border.Background&gt;
      &lt;/Border&gt;
  
      &lt;local:ColorCircle x:Name="colorCircle" selectedColor="{Binding color, Mode=OneWayToSource}" /&gt;
  
  &lt;/StackPanel&gt;
  </code></pre>
  
  <p>.cs:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>ColorWheel</strong></p>
  
  <p>xaml:</p>
  
  <pre><code>&lt;Grid HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Background="Transparent"&gt;
  
      &lt;Image x:Name="ColorImage"
             Width="300"
             Height="300"
             HorizontalAlignment="Center"
             VerticalAlignment="Top"
             RenderOptions.BitmapScalingMode="HighQuality"
             Source="color_wheel.png" /&gt;
  
      &lt;Canvas x:Name="CanvImage"
              Width="300"
              Height="300"
              HorizontalAlignment="Center"
              VerticalAlignment="Top"
              Background="Transparent"&gt;
  
          &lt;Ellipse Width="300"
                   Height="300"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Top"
                   Fill="Transparent"
                   MouseDown="Ellipse_MouseDown"
                   MouseMove="Ellipse_MouseMove"
                   MouseUp="Ellipse_MouseUp" /&gt;
          &lt;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" /&gt;
      &lt;/Canvas&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>.cs:</p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p>The <code>colorcircle</code> has a <code>DependencyProperty</code> <code>selectedColor</code> that returns a <code>Color</code>. That works. I get the color in the second border but not in the first one...</p>