Color picker fully working

PixiEditor/Helpers/Converters/ColorToNotifyableColorConverter.cs

@@ -1,31 +0,0 @@
-using PixiEditor.Models.DataHolders;
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using System.Text;
-using System.Windows.Data;
-using System.Windows.Media;
-
-namespace PixiEditor.Helpers.Converters
-{
-    public class ColorToNotifyableColorConverter : IValueConverter
-    {
-        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            if(value is NotifyableColor color)
-            {
-                return color.Color;
-            }
-            return null;
-        }
-
-        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            if(value is Color color)
-            {
-                return new NotifyableColor(color);
-            }
-            return null;
-        }
-    }
-}

PixiEditor/Helpers/Converters/NotifyableColorToHexConverter.cs

@@ -1,35 +0,0 @@
-using PixiEditor.Models.DataHolders;
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using System.Text;
-using System.Windows.Data;
-using System.Windows.Media;
-
-namespace PixiEditor.Helpers.Converters
-{
-    public class NotifyableColorToHexConverter : IValueConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            if(value is NotifyableColor color)
-            {
-                return color.Color.ToString();
-            }
-            return null;
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            try
-            {
-                return new NotifyableColor((Color)ColorConverter.ConvertFromString((string)value));
-            }
-            catch
-            {
-                return null;
-            }
-
-        }
-    }
-}

PixiEditor/Models/DataHolders/NotifyableColor.cs

@@ -9,62 +9,73 @@ namespace PixiEditor.Models.DataHolders
     public class NotifyableColor : NotifyableObject
     {
         public event EventHandler ColorChanged;
+
+        private byte _a;
         public byte A
         {
-            get => Color.A;
+            get => _a;
             set
             {
-                Color = System.Windows.Media.Color.FromArgb(value, Color.R, Color.G, Color.B);
+                _a = value;
+                ColorChanged?.Invoke(this, EventArgs.Empty);
+                RaisePropertyChanged("A");
+
             }
         }
+
+        private byte _r;
         public byte R
         {
-            get => _color.R;
+            get => _r;
             set
             {
-                Color = System.Windows.Media.Color.FromArgb(Color.A, value, Color.G, Color.B);
+                _r = value;
+                ColorChanged?.Invoke(this, EventArgs.Empty);
+                RaisePropertyChanged("R");
+
             }
         }
 
 
+        private byte _g;
         public byte G
         {
-            get => Color.G;
+            get => _g;
             set
             {
-                Color = System.Windows.Media.Color.FromArgb(Color.A, Color.R, value, Color.B);
+                _g = value;
+                ColorChanged?.Invoke(this, EventArgs.Empty);
+                RaisePropertyChanged("G");
+
             }
         }
 
+        private byte _b;
         public byte B
         {
-            get => Color.B;
+            get => _b;
             set
             {
-                Color = System.Windows.Media.Color.FromArgb(Color.A, Color.R, Color.G, value);
+                _b = value;
+                ColorChanged?.Invoke(this, EventArgs.Empty);
+                RaisePropertyChanged("B");
             }
         }
 
-        private System.Windows.Media.Color _color;
-
-        public System.Windows.Media.Color Color
+        public void SetArgb(byte a, byte r, byte g, byte b)
         {
-            get => _color;
-            set
-            {
-                _color = value;
-                RaisePropertyChanged("Color");
-                RaisePropertyChanged("A");
-                RaisePropertyChanged("R");
-                RaisePropertyChanged("G");
-                RaisePropertyChanged("B");
-                ColorChanged?.Invoke(this, EventArgs.Empty);
-            }
+            A = a;
+            R = r;
+            G = g;
+            B = b;
         }
 
         public NotifyableColor(System.Windows.Media.Color color)
         {
-            Color = color;
+            A = color.A;
+            R = color.R;
+            G = color.G;
+            B = color.B;
         }
 
     }

PixiEditor/Views/ColorPicker.xaml

@@ -9,7 +9,6 @@
              Width="270" Height="320" Name="uc">
     <UserControl.Resources>
         <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
-        <converters:NotifyableColorToHexConverter x:Key="NotifyableColorToHexConverter"/>
     </UserControl.Resources>
     <Grid Background="{StaticResource AccentColor}">
         <Grid.RowDefinitions>
@@ -35,7 +34,7 @@
             <Grid Height="40" Width="40" HorizontalAlignment="Left" VerticalAlignment="Top">
                 <Rectangle Stroke="Black" StrokeThickness="1" Panel.ZIndex="3">
                     <Rectangle.Fill>
-                        <SolidColorBrush Color="{Binding Path=SelectedColor.Color, ElementName=uc}"/>
+                        <SolidColorBrush Color="{Binding Path=SelectedColor, ElementName=uc}"/>
                     </Rectangle.Fill>
                 </Rectangle>
                 <Image Source="/Images/transparentbg.png" Panel.ZIndex="2" Stretch="None"/>
@@ -45,23 +44,23 @@
         <StackPanel Grid.Row="2" Orientation="Vertical" Margin="0,10,0,10" HorizontalAlignment="Center" Width="232">
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,10">
                 <TextBlock Text="R" Foreground="White" Padding="5,0,5,0"/>
-                <Slider Width="170" Minimum="0" Maximum="255" IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="10" Value="{Binding Path=SelectedColor.R, Mode=TwoWay, ElementName=uc}"/>
-                <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=SelectedColor.R, Mode=TwoWay, ElementName=uc}"/>
+                <Slider Width="170" Minimum="0" Maximum="255" IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="10" Value="{Binding Path=NotifyableColor.R, Mode=TwoWay, ElementName=uc}"/>
+                <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=NotifyableColor.R, Mode=TwoWay, ElementName=uc}"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,10">
                 <TextBlock Text="G" Foreground="White" Padding="4,0,5,0"/>
-                <Slider Width="170" Minimum="0" Maximum="255" IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="10" Value="{Binding Path=SelectedColor.G, Mode=TwoWay, ElementName=uc}"/>
-                <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=SelectedColor.G, Mode=TwoWay, ElementName=uc}"/>
+                <Slider Width="170" Minimum="0" Maximum="255" IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="10" Value="{Binding Path=NotifyableColor.G, Mode=TwoWay, ElementName=uc}"/>
+                <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=NotifyableColor.G, Mode=TwoWay, ElementName=uc}"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,10">
                 <TextBlock Text="B" Foreground="White" Padding="5,0,5,0"/>
-                <Slider Width="170" Minimum="0" Maximum="255" IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="10" Value="{Binding Path=SelectedColor.B, Mode=TwoWay, ElementName=uc}"/>
-                <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=SelectedColor.B, Mode=TwoWay, ElementName=uc}"/>
+                <Slider Width="170" Minimum="0" Maximum="255" IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="10" Value="{Binding Path=NotifyableColor.B, Mode=TwoWay, ElementName=uc}"/>
+                <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=NotifyableColor.B, Mode=TwoWay, ElementName=uc}"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,10">
                 <TextBlock Text="A" Foreground="White" Padding="4,0,5,0"/>
-                <Slider Width="170" Minimum="0" Maximum="255" IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="10" Value="{Binding Path=SelectedColor.A, Mode=TwoWay, ElementName=uc}"/>
-                <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=SelectedColor.A, Mode=TwoWay, ElementName=uc}"/>
+                <Slider Width="170" Minimum="0" Maximum="255" IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True" SmallChange="1" LargeChange="10" Value="{Binding Path=NotifyableColor.A, Mode=TwoWay, ElementName=uc}"/>
+                <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=NotifyableColor.A, Mode=TwoWay, ElementName=uc}"/>
             </StackPanel>
         </StackPanel>
         <Grid Grid.Row="3">
@@ -72,7 +71,7 @@
             </Grid.ColumnDefinitions>
             <StackPanel Orientation="Horizontal" Grid.Column="0" VerticalAlignment="Center" Margin="10,0,0,0" Height="26">
                 <Label Content="Hex" Foreground="White"/>
-                <TextBox VerticalAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Width="65" Text="{Binding Path=SelectedColor,Converter={StaticResource NotifyableColorToHexConverter}, ElementName=uc}">
+                <TextBox VerticalAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Width="65" Text="{Binding Path=SelectedColor, ElementName=uc}">
                     <i:Interaction.Behaviors>
                         <behaviours:TextBoxFocusBehavior/>
                     </i:Interaction.Behaviors>

PixiEditor/Views/ColorPicker.xaml.cs

@@ -25,7 +25,7 @@ namespace PixiEditor.Views
     /// <summary>
     /// Interaction logic for ColorPicker.xaml
     /// </summary>
-    public partial class ColorPicker : UserControl
+    public partial class ColorPicker : UserControl, INotifyPropertyChanged
     {
         private Image _colorPalette;
 
@@ -34,33 +34,51 @@ namespace PixiEditor.Views
             InitializeComponent();
             _colorPalette = (FindName("colorPalette") as Image);
             _dispatcher = Application.Current.Dispatcher;
-            SelectedColor.ColorChanged += SelectedColor_ColorChanged;
+            NotifyableColor = new NotifyableColor(SelectedColor);
+            NotifyableColor.ColorChanged += SelectedColor_ColorChanged;
         }
 
         private void SelectedColor_ColorChanged(object sender, EventArgs e)
         {
-            SelectedColor.ColorChanged -= SelectedColor_ColorChanged;
-            SelectedColor = new NotifyableColor(SelectedColor.Color);
-            
+            SelectedColor = Color.FromArgb(NotifyableColor.A, NotifyableColor.R, NotifyableColor.G, NotifyableColor.B);            
         }
 
         private void SwapColors()
         {
             Color tmp = SecondaryColor;
-            SecondaryColor = SelectedColor.Color;
-            SelectedColor.Color = tmp;
+            SecondaryColor = SelectedColor;
+            SelectedColor = tmp;
         }
 
-        public NotifyableColor SelectedColor
+        private NotifyableColor _notifyableColor;
+
+        public NotifyableColor NotifyableColor
         {
-            get { return (NotifyableColor)GetValue(SelectedColorProperty); }
+            get { return _notifyableColor; }
+            set 
+            { 
+                _notifyableColor = value;
+                RaisePropertyChanged("NotifyableColor");
+            }
+        }
+
+
+        public Color SelectedColor
+        {
+            get { return (Color)GetValue(SelectedColorProperty); }
             set { SetValue(SelectedColorProperty, value); }
         }
 
         // Using a DependencyProperty as the backing store for SelectedColor.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty SelectedColorProperty =
-            DependencyProperty.Register("SelectedColor", typeof(NotifyableColor), typeof(ColorPicker), 
-                new PropertyMetadata(new NotifyableColor(Colors.Black)));
+            DependencyProperty.Register("SelectedColor", typeof(Color), typeof(ColorPicker), 
+                new PropertyMetadata(Colors.Black, OnSelectedColorChanged));
+
+        private static void OnSelectedColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            Color color = (Color)e.NewValue;
+            ((ColorPicker)d).NotifyableColor.SetArgb(color.A, color.R, color.G, color.B);
+        }
 
         public Color SecondaryColor
         {
@@ -72,9 +90,12 @@ namespace PixiEditor.Views
         public static readonly DependencyProperty SecondaryColorProperty =
             DependencyProperty.Register("SecondaryColor", typeof(Color), typeof(ColorPicker), new PropertyMetadata(Colors.White));
 
+        
         private Dispatcher _dispatcher;
         private System.Timers.Timer _timer = new System.Timers.Timer(5);
 
+        public event PropertyChangedEventHandler PropertyChanged = delegate { };
+
         private void CalculateColor(Point pos)
         {
             pos.X = Math.Clamp(pos.X, 0, _colorPalette.ActualWidth);
@@ -82,9 +103,15 @@ namespace PixiEditor.Views
             int h = (int)(pos.X * 360f / _colorPalette.ActualWidth);
             float l = (float)(pos.Y * 100f / _colorPalette.ActualHeight);
 
-            SelectedColor.ColorChanged -= SelectedColor_ColorChanged;
-            SelectedColor = new NotifyableColor(Models.Colors.ExColor.HslToRGB(h, 100, l));
-            SelectedColor.ColorChanged += SelectedColor_ColorChanged;
+            SelectedColor = Models.Colors.ExColor.HslToRGB(h, 100, l);
+        }
+
+        private void RaisePropertyChanged(string property)
+        {
+            if (property != null)
+            {
+                PropertyChanged(this, new PropertyChangedEventArgs(property));
+            }
         }
 
         private void Button_Click(object sender, RoutedEventArgs e)

PixiEditor/Views/MainWindow.xaml

@@ -27,7 +27,6 @@
         <helpers:ToolSizeToIntConverter x:Key="ToolSizeToIntConverter"/>
         <converters:BoolToColorConverter x:Key="BoolToColorConverter"/>
         <converters:BoolToIntConverter x:Key="BoolToIntConverter"/>
-        <converters:ColorToNotifyableColorConverter x:Key="ColorToNotifyableColorConverter"/>
     </Window.Resources>
 
     <Window.CommandBindings>
@@ -178,7 +177,7 @@
         </StackPanel>
 
         <DockPanel Grid.Column="2" Background="{StaticResource AccentColor}" Margin="0,30,0,0" Grid.RowSpan="3">
-            <vws:ColorPicker Grid.Column="2" Grid.Row="1" DockPanel.Dock="Top" SelectedColor="{Binding PrimaryColor, Converter={StaticResource ColorToNotifyableColorConverter}, Mode=TwoWay}" 
+            <vws:ColorPicker Grid.Column="2" Grid.Row="1" DockPanel.Dock="Top" SelectedColor="{Binding PrimaryColor, Mode=TwoWay}" 
                              SecondaryColor="{Binding SecondaryColor, Mode=TwoWay}"/>
             <xcad:DockingManager Grid.Column="2" BorderThickness="0" Grid.Row="1" DockPanel.Dock="Top">
                 <xcad:DockingManager.Style>