Color picker almost finished

PixiEditor/Helpers/Converters/BoolToColorConverter.cs

@@ -8,18 +8,14 @@ namespace PixiEditor.Helpers.Converters
     {
         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
         {
-            if (value.ToString() == "Transparent")
-            {
-                return false;
-            }
-            return true;
+            return value.ToString() == "Transparent";
         }
 
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
-            if (value is bool)
+            if (value is bool boolean)
             {
-                if ((bool)value == false)
+                if (boolean == false)
                 {
                     return "Transparent";
                 }

PixiEditor/Helpers/Converters/BoolToIntConverter.cs

@@ -8,18 +8,14 @@ namespace PixiEditor.Helpers.Converters
     {
         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
         {
-            if (value.ToString() == "0")
-            {
-                return false;
-            }
-            return true;
+            return value.ToString() == "0";
         }
 
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
         {
-            if (value is bool)
+            if (value is bool boolean)
             {
-                if ((bool)value == false)
+                if (boolean == false)
                 {
                     return 0;
                 }

PixiEditor/Helpers/Converters/ColorToNotifyableColorConverter.cs

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,71 @@
+using PixiEditor.Helpers;
+using System;
+using System.Collections.Generic;
+using System.Drawing;
+using System.Text;
+
+namespace PixiEditor.Models.DataHolders
+{
+    public class NotifyableColor : NotifyableObject
+    {
+        public event EventHandler ColorChanged;
+        public byte A
+        {
+            get => Color.A;
+            set
+            {
+                Color = System.Windows.Media.Color.FromArgb(value, Color.R, Color.G, Color.B);
+            }
+        }
+        public byte R
+        {
+            get => _color.R;
+            set
+            {
+                Color = System.Windows.Media.Color.FromArgb(Color.A, value, Color.G, Color.B);
+            }
+        }
+
+
+        public byte G
+        {
+            get => Color.G;
+            set
+            {
+                Color = System.Windows.Media.Color.FromArgb(Color.A, Color.R, value, Color.B);
+            }
+        }
+
+        public byte B
+        {
+            get => Color.B;
+            set
+            {
+                Color = System.Windows.Media.Color.FromArgb(Color.A, Color.R, Color.G, value);
+            }
+        }
+
+        private System.Windows.Media.Color _color;
+
+        public System.Windows.Media.Color Color
+        {
+            get => _color;
+            set
+            {
+                _color = value;
+                RaisePropertyChanged("Color");
+                RaisePropertyChanged("A");
+                RaisePropertyChanged("R");
+                RaisePropertyChanged("G");
+                RaisePropertyChanged("B");
+                ColorChanged?.Invoke(this, EventArgs.Empty);
+            }
+        }
+
+        public NotifyableColor(System.Windows.Media.Color color)
+        {
+            Color = color;
+        }
+
+    }
+}

PixiEditor/Views/ColorPicker.xaml

@@ -3,38 +3,68 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
-             xmlns:local="clr-namespace:PixiEditor.Views" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+             xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
+             xmlns:local="clr-namespace:PixiEditor.Views" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours"
              mc:Ignorable="d" 
-             Width="270" Height="120" Name="uc">
+             Width="270" Height="320" Name="uc">
     <UserControl.Resources>
         <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
+        <converters:NotifyableColorToHexConverter x:Key="NotifyableColorToHexConverter"/>
     </UserControl.Resources>
-    <Grid Background="{StaticResource AccentColor}" MouseMove="Image_MouseMove">
+    <Grid Background="{StaticResource AccentColor}">
         <Grid.RowDefinitions>
+            <RowDefinition Height="100*"/>
             <RowDefinition Height="53"/>
-            <RowDefinition Height="8*"/>
-            <RowDefinition Height="17*"/>
+            <RowDefinition Height="129*"/>
+            <RowDefinition Height="38*"/>
         </Grid.RowDefinitions>
-        <Image Source="/Images/ColorPalette.png" Name="colorPalette" MouseDown="Image_MouseMove" Stretch="Fill" VerticalAlignment="Center" Height="50"/>
-        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
-            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+        <Grid HorizontalAlignment="Left" Margin="20,0,0,0" Width="70" Height="70">
+            <Button Opacity="0.3" ToolTip="Swap colors (X)" Click="Button_Click" Width="25" Height="25" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0 0 0 3" Style="{StaticResource ImageButtonStyle}">
+                <Button.Background>
+                    <ImageBrush ImageSource="/Images/SwapArrows.png" Stretch="Fill"/>
+                </Button.Background>
+            </Button>
+            <Grid Height="40" Width="40" HorizontalAlignment="Right" VerticalAlignment="Bottom">
+                <Rectangle Stroke="Black" StrokeThickness="1" Panel.ZIndex="1">
+                    <Rectangle.Fill>
+                        <SolidColorBrush Color="{Binding SecondaryColor, ElementName=uc}"/>
+                    </Rectangle.Fill>
+                </Rectangle>
+                <Image Source="/Images/transparentbg.png" Panel.ZIndex="0" Stretch="None"/>
+            </Grid>
+            <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}"/>
+                    </Rectangle.Fill>
+                </Rectangle>
+                <Image Source="/Images/transparentbg.png" Panel.ZIndex="2" Stretch="None"/>
+            </Grid>
+        </Grid>
+        <Image Grid.Row="1" Source="/Images/ColorPalette.png" Name="colorPalette" MouseUp="colorPalette_MouseUp" MouseDown="colorPalette_MouseDown"  Stretch="Fill" VerticalAlignment="Center" Height="50"/>
+        <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"/>
-                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="40" Text="{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=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}"/>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
-                <TextBlock Text="G" Foreground="White" Padding="5,0,5,0"/>
-                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="{Binding Path=SelectedColor.G, ElementName=uc}"/>
+            <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}"/>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,0,10">
                 <TextBlock Text="B" Foreground="White" Padding="5,0,5,0"/>
-                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="{Binding Path=SelectedColor.B, ElementName=uc}"/>
+                <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}"/>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
-                <TextBlock Text="A" Foreground="White" Padding="5,0,5,0"/>
-                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="{Binding Path=SelectedColor.A, ElementName=uc}"/>
+            <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}"/>
             </StackPanel>
         </StackPanel>
-        <Grid Grid.Row="2">
+        <Grid Grid.Row="3">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="39*"/>
                 <ColumnDefinition Width="28*"/>
@@ -42,9 +72,12 @@
             </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, ElementName=uc}"/>
+                <TextBox VerticalAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Width="65" Text="{Binding Path=SelectedColor,Converter={StaticResource NotifyableColorToHexConverter}, ElementName=uc}">
+                    <i:Interaction.Behaviors>
+                        <behaviours:TextBoxFocusBehavior/>
+                    </i:Interaction.Behaviors>
+                </TextBox>
             </StackPanel>
-            <Rectangle Fill="{Binding Path=SelectedColor, ElementName=uc, Converter={StaticResource ColorToBrushConverter}}" Stroke="#FF3C3C3C" StrokeThickness="2" Grid.Column="2"/>
         </Grid>
     </Grid>
 </UserControl>

PixiEditor/Views/ColorPicker.xaml.cs

@@ -1,8 +1,14 @@
-using PixiEditor.Models.Tools.Tools;
+using GalaSoft.MvvmLight.Command;
+using PixiEditor.Models.DataHolders;
+using PixiEditor.Models.Position;
+using PixiEditor.Models.Tools.Tools;
 using System;
 using System.Collections.Generic;
+using System.ComponentModel;
+using System.Security.Cryptography;
 using System.Security.Permissions;
 using System.Text;
+using System.Threading;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
@@ -12,6 +18,7 @@ using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
+using System.Windows.Threading;
 
 namespace PixiEditor.Views
 {
@@ -26,31 +33,84 @@ namespace PixiEditor.Views
         {
             InitializeComponent();
             _colorPalette = (FindName("colorPalette") as Image);
+            _dispatcher = Application.Current.Dispatcher;
+            SelectedColor.ColorChanged += SelectedColor_ColorChanged;
         }
 
-        public Color SelectedColor
+        private void SelectedColor_ColorChanged(object sender, EventArgs e)
         {
-            get { return (Color)GetValue(SelectedColorProperty); }
+            SelectedColor.ColorChanged -= SelectedColor_ColorChanged;
+            SelectedColor = new NotifyableColor(SelectedColor.Color);
+            
+        }
+
+        private void SwapColors()
+        {
+            Color tmp = SecondaryColor;
+            SecondaryColor = SelectedColor.Color;
+            SelectedColor.Color = tmp;
+        }
+
+        public NotifyableColor SelectedColor
+        {
+            get { return (NotifyableColor)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(Color), typeof(ColorPicker), new PropertyMetadata(Colors.White));
+            DependencyProperty.Register("SelectedColor", typeof(NotifyableColor), typeof(ColorPicker), 
+                new PropertyMetadata(new NotifyableColor(Colors.Black)));
+
+        public Color SecondaryColor
+        {
+            get { return (Color)GetValue(SecondaryColorProperty); }
+            set { SetValue(SecondaryColorProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for SecondaryColor.  This enables animation, styling, binding, etc...
+        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);
 
+        private void CalculateColor(Point pos)
+        {
+            pos.X = Math.Clamp(pos.X, 0, _colorPalette.ActualWidth);
+            pos.Y = Math.Abs(Math.Clamp(pos.Y, 0, _colorPalette.ActualHeight) - _colorPalette.ActualHeight);
+            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;
+        }
 
+        private void Button_Click(object sender, RoutedEventArgs e)
+        {
+            SwapColors();            
+        }
 
-        private void Image_MouseMove(object sender, MouseEventArgs e)
+        private void colorPalette_MouseDown(object sender, MouseButtonEventArgs e)
         {
-            if (e.LeftButton == MouseButtonState.Pressed)
+            _timer.Elapsed += _timer_Elapsed;
+            _timer.Start();
+        }
+
+        private void _timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
+        {
+            _dispatcher.Invoke(() =>
             {
-                Point pos = e.GetPosition(_colorPalette);
-                pos.X = Math.Clamp(pos.X, 0, _colorPalette.ActualWidth);
-                pos.Y = Math.Abs(Math.Clamp(pos.Y, 0, _colorPalette.ActualHeight) - _colorPalette.ActualHeight);
-                int h = (int)(pos.X * 360f / _colorPalette.ActualWidth);
-                float l = (float)(pos.Y * 100f / _colorPalette.ActualHeight);
-                SelectedColor = Models.Colors.ExColor.HslToRGB(h, 100, l);
-            }
+                System.Drawing.Point point = MousePositionConverter.GetCursorPosition();
+                Point relativePoint = _colorPalette.PointFromScreen(new Point(point.X, point.Y));
+                CalculateColor(relativePoint);
+            });
+        }
+
+        private void colorPalette_MouseUp(object sender, MouseButtonEventArgs e)
+        {
+            _timer.Stop();
         }
     }
 }

PixiEditor/Views/MainWindow.xaml

@@ -27,6 +27,7 @@
         <helpers:ToolSizeToIntConverter x:Key="ToolSizeToIntConverter"/>
         <converters:BoolToColorConverter x:Key="BoolToColorConverter"/>
         <converters:BoolToIntConverter x:Key="BoolToIntConverter"/>
+        <converters:ColorToNotifyableColorConverter x:Key="ColorToNotifyableColorConverter"/>
     </Window.Resources>
 
     <Window.CommandBindings>
@@ -177,26 +178,8 @@
         </StackPanel>
 
         <DockPanel Grid.Column="2" Background="{StaticResource AccentColor}" Margin="0,30,0,0" Grid.RowSpan="3">
-            <Grid DockPanel.Dock="Top" HorizontalAlignment="Center" Width="70"  Margin="0,20,0,0" Height="70">
-                <Rectangle Height="40" Width="40" HorizontalAlignment="Left" VerticalAlignment="Top" Stroke="Black" StrokeThickness="1" Panel.ZIndex="1">
-                    <Rectangle.Fill>
-                        <SolidColorBrush Color="{Binding PrimaryColor, Mode=OneWay}"/>
-                    </Rectangle.Fill>
-                </Rectangle>
-                <xctk:ColorPicker Width="40" Panel.ZIndex="2" Height="40" VerticalAlignment="Top" HorizontalAlignment="Left" UsingAlphaChannel="True" AvailableColorsSortingMode="Alphabetical" ShowDropDownButton="False" Background="Transparent" BorderThickness="0" ShowRecentColors="True" SelectedColor="{Binding PrimaryColor, Mode=TwoWay}"></xctk:ColorPicker>
-                <Button Opacity="0.3" ToolTip="Swap colors (X)" Command="{Binding SwapColorsCommand}" Width="25" Height="25" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0 0 0 3" Style="{StaticResource ImageButtonStyle}">
-                    <Button.Background>
-                        <ImageBrush ImageSource="/Images/SwapArrows.png" Stretch="Fill"/>
-                    </Button.Background>
-                </Button>
-                <Rectangle Height="40" Width="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Stroke="Black" StrokeThickness="1" Margin="0,0,4,5">
-                    <Rectangle.Fill>
-                        <SolidColorBrush Color="{Binding SecondaryColor, Mode=OneWay}"/>
-                    </Rectangle.Fill>
-                </Rectangle>
-                <xctk:ColorPicker Width="40" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" UsingAlphaChannel="True" AvailableColorsSortingMode="Alphabetical" ShowDropDownButton="False" Background="Transparent" BorderThickness="0" ShowRecentColors="True" Margin="0,0,4,5" SelectedColor="{Binding SecondaryColor, Mode=TwoWay}"/>
-            </Grid>
-            <vws:ColorPicker Grid.Column="2" Grid.Row="1" DockPanel.Dock="Top"/>
+            <vws:ColorPicker Grid.Column="2" Grid.Row="1" DockPanel.Dock="Top" SelectedColor="{Binding PrimaryColor, Converter={StaticResource ColorToNotifyableColorConverter}, Mode=TwoWay}" 
+                             SecondaryColor="{Binding SecondaryColor, Mode=TwoWay}"/>
             <xcad:DockingManager Grid.Column="2" BorderThickness="0" Grid.Row="1" DockPanel.Dock="Top">
                 <xcad:DockingManager.Style>
                     <Style TargetType="xcad:DockingManager">