Now using extracted Color Picker (Moved to nuget as separate project)

PixiEditor/App.xaml

@@ -10,8 +10,6 @@
                 <ResourceDictionary Source="Styles/ThemeStyle.xaml" />
                 <ResourceDictionary Source="Styles/Titlebar.xaml" />
                 <ResourceDictionary Source="Styles/ComboBoxDarkStyle.xaml" />
-                <ResourceDictionary Source="Styles/ColorSliderStyle.xaml" />
-                <ResourceDictionary Source="Styles/ColorToggleButton.xaml" />
                 <ResourceDictionary Source="Styles/AnchorPointToggleButtonStyle.xaml" />
                 <ResourceDictionary Source="Styles/DockingManagerStyle.xaml" />
             </ResourceDictionary.MergedDictionaries>

PixiEditor/Helpers/Converters/BoolToInvertedBoolConverter.cs

@@ -1,21 +0,0 @@
-using System;
-using System.Globalization;
-using System.Windows.Data;
-
-namespace PixiEditor.Helpers.Converters
-{
-    public class BoolToInvertedBoolConverter : IValueConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            if (value is bool boolValue)
-                return !boolValue;
-            return false;
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            throw new NotImplementedException("ConvertBack() of BoolToInvertedBoolConverter is not implemented");
-        }
-    }
-}

PixiEditor/Helpers/Converters/ColorToBrushConverter.cs

@@ -1,24 +0,0 @@
-using System;
-using System.Globalization;
-using System.Windows.Data;
-using System.Windows.Media;
-
-namespace PixiEditor.Helpers.Converters
-{
-    public class ColorToBrushConverter : IValueConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            Color col = (Color) value;
-            Color c = Color.FromArgb(col.A, col.R, col.G, col.B);
-            return new SolidColorBrush(c);
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
-        {
-            SolidColorBrush c = (SolidColorBrush) value;
-            Color col = Color.FromArgb(c.Color.A, c.Color.R, c.Color.G, c.Color.B);
-            return col;
-        }
-    }
-}

PixiEditor/Helpers/UI/RgbColorSlider.cs

@@ -1,76 +0,0 @@
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Media;
-
-namespace PixiEditor.Helpers.UI
-{
-    public class RgbColorSlider : Slider
-    {
-        // Using a DependencyProperty as the backing store for SliderArgbType.  This enables animation, styling, binding, etc...
-        public static readonly DependencyProperty SliderArgbTypeProperty =
-            DependencyProperty.Register("SliderArgbType", typeof(string), typeof(RgbColorSlider),
-                new PropertyMetadata(""));
-
-        // Using a DependencyProperty as the backing store for CurrentColor.  This enables animation, styling, binding, etc...
-        public static readonly DependencyProperty CurrentColorProperty =
-            DependencyProperty.Register("CurrentColor", typeof(Color), typeof(RgbColorSlider),
-                new PropertyMetadata(Colors.Black, ColorChangedCallback));
-
-        public RgbColorSlider()
-        {
-            Minimum = 0;
-            Maximum = 255;
-            SmallChange = 1;
-            LargeChange = 10;
-            MinHeight = 12;
-        }
-
-
-        public string SliderArgbType
-        {
-            get => (string) GetValue(SliderArgbTypeProperty);
-            set => SetValue(SliderArgbTypeProperty, value);
-        }
-
-
-        public Color CurrentColor
-        {
-            get => (Color) GetValue(CurrentColorProperty);
-            set => SetValue(CurrentColorProperty, value);
-        }
-
-        public override void EndInit()
-        {
-            base.EndInit();
-            GenerateBackground();
-        }
-
-
-        private void GenerateBackground()
-        {
-            Background = new LinearGradientBrush(new GradientStopCollection
-            {
-                new GradientStop(GetColorForSelectedArgb(0), 0.0),
-                new GradientStop(GetColorForSelectedArgb(255), 1)
-            });
-        }
-
-        private Color GetColorForSelectedArgb(byte value)
-        {
-            return SliderArgbType switch
-            {
-                "A" => Color.FromArgb(value, CurrentColor.R, CurrentColor.G, CurrentColor.B),
-                "R" => Color.FromArgb(CurrentColor.A, value, CurrentColor.G, CurrentColor.B),
-                "G" => Color.FromArgb(CurrentColor.A, CurrentColor.R, value, CurrentColor.B),
-                "B" => Color.FromArgb(CurrentColor.A, CurrentColor.R, CurrentColor.G, value),
-                _ => CurrentColor
-            };
-        }
-
-        private static void ColorChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            RgbColorSlider slider = (RgbColorSlider) d;
-            slider.GenerateBackground();
-        }
-    }
-}

PixiEditor/Models/DataHolders/NotifyableColor.cs

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

PixiEditor/Models/Tools/ToolSettings/Settings/ColorSetting.cs

@@ -1,6 +1,6 @@
 using System.Windows.Data;
 using System.Windows.Media;
-using PixiEditor.Views;
+using ColorPicker;
 
 namespace PixiEditor.Models.Tools.ToolSettings.Settings
 {

PixiEditor/PixiEditor.csproj

@@ -28,12 +28,9 @@
 
   <ItemGroup>
     <None Remove="Images\AnchorDot.png" />
-    <None Remove="Images\ColorCircle.png" />
-    <None Remove="Images\ColorPalette.png" />
     <None Remove="Images\MoveImage.png" />
     <None Remove="Images\PixiEditorLogo.png" />
     <None Remove="Images\SelectImage.png" />
-    <None Remove="Images\SwapArrows.png" />
     <None Include="..\icon.ico">
       <Pack>True</Pack>
       <PackagePath></PackagePath>
@@ -44,23 +41,22 @@
     </None>
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="Dirkster.AvalonDock.Themes.VS2013" Version="4.20.0" />
+    <PackageReference Include="Dirkster.AvalonDock.Themes.VS2013" Version="4.30.0" />
     <PackageReference Include="Expression.Blend.Sdk">
       <Version>1.0.2</Version>
     </PackageReference>
     <PackageReference Include="Extended.Wpf.Toolkit" Version="3.8.2" />
     <PackageReference Include="MvvmLightLibs" Version="5.4.1.1" />
+    <PackageReference Include="PixiEditor.ColorPicker" Version="1.0.0" />
     <PackageReference Include="System.Drawing.Common" Version="4.7.0" />
     <PackageReference Include="WriteableBitmapEx">
-      <Version>1.6.5</Version>
+      <Version>1.6.7</Version>
     </PackageReference>
   </ItemGroup>
   <ItemGroup>
     <Resource Include="Images\AnchorDot.png" />
     <Resource Include="Images\BucketImage.png" />
     <Resource Include="Images\CircleImage.png" />
-    <Resource Include="Images\ColorCircle.png" />
-    <Resource Include="Images\ColorPalette.png" />
     <Resource Include="Images\EarserImage.png" />
     <Resource Include="Images\BrightnessImage.png" />
     <Resource Include="Images\LineImage.png" />
@@ -72,7 +68,6 @@
     </Resource>
     <Resource Include="Images\RectangleImage.png" />
     <Resource Include="Images\SelectImage.png" />
-    <Resource Include="Images\SwapArrows.png" />
     <Resource Include="Images\transparentbg.png" />
   </ItemGroup>
   <ItemGroup>

PixiEditor/Styles/ColorSliderStyle.xaml

@@ -1,156 +0,0 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:local="clr-namespace:PixiEditor.Helpers.UI">
-
-    <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
-        <Setter Property="OverridesDefaultStyle" Value="true" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Focusable" Value="false" />
-        <Setter Property="IsTabStop" Value="false" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="{x:Type RepeatButton}">
-                    <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}"
-                               Width="{TemplateBinding Width}" />
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-    <SolidColorBrush x:Key="SliderThumb.Static.Background" Color="#FFF0F0F0" />
-    <SolidColorBrush x:Key="SliderThumb.Static.Border" Color="White" />
-    <SolidColorBrush x:Key="SliderThumb.MouseOver.Background" Color="#FFDCECFC" />
-    <SolidColorBrush x:Key="SliderThumb.MouseOver.Border" Color="#FF7Eb4EA" />
-    <SolidColorBrush x:Key="SliderThumb.Pressed.Background" Color="#FFDAECFC" />
-    <SolidColorBrush x:Key="SliderThumb.Pressed.Border" Color="#FF569DE5" />
-    <SolidColorBrush x:Key="SliderThumb.Disabled.Background" Color="#FFF0F0F0" />
-    <SolidColorBrush x:Key="SliderThumb.Disabled.Border" Color="#FFD9D9D9" />
-    <SolidColorBrush x:Key="SliderThumb.Track.Background" Color="#FFE7EAEA" />
-    <SolidColorBrush x:Key="SliderThumb.Track.Border" Color="#FFD6D6D6" />
-    <ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
-        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
-            <Ellipse x:Name="grip" Width="12" Height="12" ClipToBounds="False">
-                <Ellipse.Fill>
-                    <ImageBrush ImageSource="../Images/ColorCircle.png" />
-                </Ellipse.Fill>
-            </Ellipse>
-        </Grid>
-        <ControlTemplate.Triggers>
-            <Trigger Property="IsEnabled" Value="false">
-                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}" />
-                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}" />
-            </Trigger>
-        </ControlTemplate.Triggers>
-    </ControlTemplate>
-    <ControlTemplate x:Key="SliderThumbHorizontalTop" TargetType="{x:Type Thumb}">
-        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
-            <Ellipse x:Name="grip" Width="12" Height="12" ClipToBounds="False">
-                <Ellipse.Fill>
-                    <ImageBrush ImageSource="../Images/ColorCircle.png" />
-                </Ellipse.Fill>
-            </Ellipse>
-        </Grid>
-        <ControlTemplate.Triggers>
-            <Trigger Property="IsMouseOver" Value="true">
-                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}" />
-                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}" />
-            </Trigger>
-            <Trigger Property="IsDragging" Value="true">
-                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}" />
-                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}" />
-            </Trigger>
-            <Trigger Property="IsEnabled" Value="false">
-                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}" />
-                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}" />
-            </Trigger>
-        </ControlTemplate.Triggers>
-    </ControlTemplate>
-    <ControlTemplate x:Key="SliderThumbHorizontalBottom" TargetType="{x:Type Thumb}">
-        <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
-            <Path x:Name="grip" Data="M -1,0 A 1,1 0 1 1 1,0 M -1,0 A 1,1 0 1 0 1,0"
-                  Fill="{StaticResource SliderThumb.Static.Background}" SnapsToDevicePixels="True" StrokeThickness="1"
-                  Stretch="Fill" Stroke="{StaticResource SliderThumb.Static.Border}" UseLayoutRounding="True"
-                  VerticalAlignment="Center" />
-        </Grid>
-        <ControlTemplate.Triggers>
-            <Trigger Property="IsMouseOver" Value="true">
-                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}" />
-                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}" />
-            </Trigger>
-            <Trigger Property="IsDragging" Value="true">
-                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}" />
-                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}" />
-            </Trigger>
-            <Trigger Property="IsEnabled" Value="false">
-                <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}" />
-                <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}" />
-            </Trigger>
-        </ControlTemplate.Triggers>
-    </ControlTemplate>
-    <ControlTemplate x:Key="RgbColorSliderTemplate1" TargetType="{x:Type Slider}">
-        <Border x:Name="border" CornerRadius="5" Background="{TemplateBinding Background}"
-                BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
-                SnapsToDevicePixels="True">
-            <Grid>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
-                    <RowDefinition Height="Auto" />
-                </Grid.RowDefinitions>
-                <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2"
-                         Placement="Top" Grid.Row="0" Visibility="Collapsed" />
-                <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0"
-                         Placement="Bottom" Grid.Row="2" Visibility="Collapsed" />
-                <Border x:Name="TrackBackground" Background="Transparent" BorderThickness="0" Height="0" Margin="5,0"
-                        Grid.Row="1" VerticalAlignment="center">
-                    <Canvas Margin="-6,-1">
-                        <Rectangle x:Name="PART_SelectionRange"
-                                   Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0"
-                                   Visibility="Hidden" />
-                    </Canvas>
-                </Border>
-                <Track x:Name="PART_Track" Grid.Row="1">
-                    <Track.DecreaseRepeatButton>
-                        <RepeatButton Command="{x:Static Slider.DecreaseLarge}"
-                                      Style="{StaticResource RepeatButtonTransparent}" />
-                    </Track.DecreaseRepeatButton>
-                    <Track.IncreaseRepeatButton>
-                        <RepeatButton Command="{x:Static Slider.IncreaseLarge}"
-                                      Style="{StaticResource RepeatButtonTransparent}" />
-                    </Track.IncreaseRepeatButton>
-                    <Track.Thumb>
-                        <Thumb x:Name="Thumb" Focusable="False" Height="12" OverridesDefaultStyle="True"
-                               Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center"
-                               Width="12" />
-                    </Track.Thumb>
-                </Track>
-            </Grid>
-        </Border>
-        <ControlTemplate.Triggers>
-            <Trigger Property="TickPlacement" Value="TopLeft">
-                <Setter Property="Visibility" TargetName="TopTick" Value="Visible" />
-                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalTop}" />
-                <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0" />
-            </Trigger>
-            <Trigger Property="TickPlacement" Value="BottomRight">
-                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible" />
-                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalBottom}" />
-                <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2" />
-            </Trigger>
-            <Trigger Property="TickPlacement" Value="Both">
-                <Setter Property="Visibility" TargetName="TopTick" Value="Visible" />
-                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible" />
-            </Trigger>
-            <Trigger Property="IsSelectionRangeEnabled" Value="true">
-                <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible" />
-            </Trigger>
-            <Trigger Property="IsKeyboardFocused" Value="true">
-                <Setter Property="Foreground" TargetName="Thumb" Value="Blue" />
-            </Trigger>
-        </ControlTemplate.Triggers>
-    </ControlTemplate>
-
-    <Style TargetType="{x:Type local:RgbColorSlider}">
-        <Setter Property="Template" Value="{StaticResource RgbColorSliderTemplate1}" />
-    </Style>
-
-</ResourceDictionary>

PixiEditor/Styles/ColorToggleButton.xaml

@@ -1,17 +0,0 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
-    <Style TargetType="ToggleButton" x:Key="ColorToggleButtonStyle">
-        <Setter Property="OverridesDefaultStyle" Value="True" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="ToggleButton">
-                    <Border BorderThickness="0" Background="{TemplateBinding Background}">
-                        <ContentPresenter Content="{TemplateBinding Content}" />
-                    </Border>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
-</ResourceDictionary>

PixiEditor/Views/ColorPicker.xaml

@@ -1,116 +0,0 @@
-<UserControl x:Class="PixiEditor.Views.ColorPicker"
-             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             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: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"
-             xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
-             mc:Ignorable="d"
-             Width="270" Height="320" Name="uc">
-    <UserControl.Resources>
-        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
-    </UserControl.Resources>
-    <Grid Background="{StaticResource AccentColor}">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="100*" />
-            <RowDefinition Height="53" />
-            <RowDefinition Height="129*" />
-            <RowDefinition Height="38*" />
-        </Grid.RowDefinitions>
-        <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, 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" />
-                <ui:RgbColorSlider Height="12" Width="170" Minimum="0"
-                                   CurrentColor="{Binding Path=SelectedColor, ElementName=uc}" SliderArgbType="R"
-                                   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" />
-                <ui:RgbColorSlider Height="12" Width="170" Minimum="0" Maximum="255"
-                                   CurrentColor="{Binding Path=SelectedColor, ElementName=uc}" SliderArgbType="G"
-                                   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" />
-                <ui:RgbColorSlider Height="12" Width="170" Minimum="0" Maximum="255"
-                                   CurrentColor="{Binding Path=SelectedColor, ElementName=uc}" SliderArgbType="B"
-                                   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" />
-                <Grid Width="170" Height="12">
-                    <ui:RgbColorSlider CurrentColor="{Binding Path=SelectedColor, ElementName=uc}" SliderArgbType="A"
-                                       IsMoveToPointEnabled="True" TickFrequency="1" IsSnapToTickEnabled="True"
-                                       SmallChange="1" LargeChange="10"
-                                       Value="{Binding Path=NotifyableColor.A, Mode=TwoWay, ElementName=uc}" />
-                    <Border BorderThickness="0" CornerRadius="5" Panel.ZIndex="-1">
-                        <Border.Background>
-                            <ImageBrush ImageSource="../Images/transparentbg.png" Stretch="UniformToFill" />
-                        </Border.Background>
-                    </Border>
-                </Grid>
-                <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">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="39*" />
-                <ColumnDefinition Width="28*" />
-                <ColumnDefinition Width="23*" />
-            </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="70"
-                         Text="{Binding Path=SelectedColor, ElementName=uc}">
-                    <i:Interaction.Behaviors>
-                        <behaviours:TextBoxFocusBehavior />
-                    </i:Interaction.Behaviors>
-                </TextBox>
-            </StackPanel>
-        </Grid>
-    </Grid>
-</UserControl>

PixiEditor/Views/ColorPicker.xaml.cs

@@ -1,143 +0,0 @@
-using System;
-using System.ComponentModel;
-using System.Timers;
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Input;
-using System.Windows.Media;
-using System.Windows.Threading;
-using PixiEditor.Models.Colors;
-using PixiEditor.Models.DataHolders;
-using PixiEditor.Models.Position;
-
-namespace PixiEditor.Views
-{
-    /// <summary>
-    ///     Interaction logic for ColorPicker.xaml
-    /// </summary>
-    public partial class ColorPicker : UserControl, INotifyPropertyChanged
-    {
-        // 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.Black, OnSelectedColorChanged));
-
-        // 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 readonly Image _colorPalette;
-
-
-        private readonly Dispatcher _dispatcher;
-
-        private NotifyableColor _notifyableColor;
-        private readonly Timer _timer = new Timer(5);
-
-        public ColorPicker()
-        {
-            InitializeComponent();
-            _colorPalette = FindName("colorPalette") as Image;
-            _dispatcher = Application.Current.Dispatcher;
-            NotifyableColor = new NotifyableColor(SelectedColor);
-            NotifyableColor.ColorChanged += SelectedColor_ColorChanged;
-            _colorPalette.IsVisibleChanged += _colorPalette_IsVisibleChanged;
-        }
-
-        public NotifyableColor NotifyableColor
-        {
-            get => _notifyableColor;
-            set
-            {
-                _notifyableColor = value;
-                RaisePropertyChanged("NotifyableColor");
-            }
-        }
-
-
-        public Color SelectedColor
-        {
-            get => (Color) GetValue(SelectedColorProperty);
-            set => SetValue(SelectedColorProperty, value);
-        }
-
-        public Color SecondaryColor
-        {
-            get => (Color) GetValue(SecondaryColorProperty);
-            set => SetValue(SecondaryColorProperty, value);
-        }
-
-        public event PropertyChangedEventHandler PropertyChanged = delegate { };
-
-        private void _colorPalette_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
-        {
-            _timer.Stop();
-        }
-
-        private void SelectedColor_ColorChanged(object sender, EventArgs e)
-        {
-            SelectedColor = Color.FromArgb(NotifyableColor.A, NotifyableColor.R, NotifyableColor.G, NotifyableColor.B);
-        }
-
-        private void SwapColors()
-        {
-            Color tmp = SecondaryColor;
-            SecondaryColor = SelectedColor;
-            SelectedColor = tmp;
-        }
-
-        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);
-        }
-
-        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 = 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)
-        {
-            SwapColors();
-        }
-
-        private void colorPalette_MouseDown(object sender, MouseButtonEventArgs e)
-        {
-            _timer.Elapsed += _timer_Elapsed;
-            _timer.Start();
-        }
-
-        private void _timer_Elapsed(object sender, ElapsedEventArgs e)
-        {
-            _dispatcher.Invoke(() =>
-            {
-                if (Mouse.LeftButton == MouseButtonState.Released)
-                {
-                    _timer.Stop();
-                    return;
-                }
-
-                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

@@ -10,7 +10,9 @@
         xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours"
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
-        xmlns:cmd="http://www.galasoft.ch/mvvmlight" xmlns:avalondock="https://github.com/Dirkster99/AvalonDock" xmlns:position="clr-namespace:PixiEditor.Models.Position"
+        xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
+        xmlns:avalondock="https://github.com/Dirkster99/AvalonDock"
+        xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker"
         mc:Ignorable="d" WindowStyle="None"
         Title="PixiEditor" Name="mainWindow" Height="1000" Width="1600" Background="{StaticResource MainColor}"
         WindowStartupLocation="CenterScreen" WindowState="Maximized" DataContext="{DynamicResource ViewModelMain}">
@@ -247,7 +249,7 @@
             </Grid.RowDefinitions>
             <StackPanel Grid.Row="2" Orientation="Vertical" ZIndex="15">
             </StackPanel>
-            <vws:ColorPicker Grid.Row="0" SelectedColor="{Binding PrimaryColor, Mode=TwoWay}"
+            <colorpicker:StandardColorPicker Grid.Row="0" SelectedColor="{Binding PrimaryColor, Mode=TwoWay}"
                              SecondaryColor="{Binding SecondaryColor, Mode=TwoWay}" />
             <avalondock:DockingManager Foreground="White" Background="{StaticResource AccentColor}" BorderThickness="0"
                                        Grid.Row="1">

PixiEditor/Views/PortableColorPicker.xaml

@@ -1,44 +0,0 @@
-<UserControl x:Class="PixiEditor.Views.PortableColorPicker"
-             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             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"
-             mc:Ignorable="d"
-             d:DesignHeight="20" d:DesignWidth="40" x:Name="uc">
-    <UserControl.Resources>
-        <converters:BoolToInvertedBoolConverter x:Key="BoolToInvertedBoolConverter" />
-        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
-    </UserControl.Resources>
-    <Grid>
-        <Border CornerRadius="2" Width="40" Height="20" BorderThickness="1" BorderBrush="Transparent" Panel.ZIndex="0"
-                Padding="0" Margin="0">
-            <Border.Background>
-                <ImageBrush ImageSource="../Images/transparentbg.png" Stretch="UniformToFill">
-                    <ImageBrush.RelativeTransform>
-                        <TransformGroup>
-                            <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleX="6" ScaleY="6" />
-                            <SkewTransform CenterY="0.5" CenterX="0.5" />
-                            <RotateTransform CenterY="0.5" CenterX="0.5" />
-                            <TranslateTransform />
-                        </TransformGroup>
-                    </ImageBrush.RelativeTransform>
-                </ImageBrush>
-            </Border.Background>
-            <ToggleButton Style="{StaticResource ColorToggleButtonStyle}" Padding="0" Margin="0" Height="20" Width="40"
-                          IsEnabled="{Binding Path=IsOpen, ElementName=popup, Converter={StaticResource BoolToInvertedBoolConverter}}"
-                          x:Name="toggleButton" BorderThickness="0" Panel.ZIndex="1"
-                          Background="{Binding Path=SelectedColor, ElementName=colorPicker, Converter={StaticResource ColorToBrushConverter}}">
-                <Border Height="20" Width="40" BorderThickness="0" BorderBrush="Transparent" Background="Transparent" />
-            </ToggleButton>
-        </Border>
-        <Popup Name="popup" StaysOpen="False" IsOpen="{Binding Path=IsChecked, ElementName=toggleButton, Mode=TwoWay}">
-            <Border BorderThickness="1" BorderBrush="Black">
-                <local:ColorPicker x:Name="colorPicker"
-                                   SelectedColor="{Binding ElementName=uc, Path=SelectedColor, Mode=TwoWay}"
-                                   SecondaryColor="{Binding ElementName=uc, Path=SecondaryColor, Mode=TwoWay}" />
-            </Border>
-        </Popup>
-    </Grid>
-</UserControl>

PixiEditor/Views/PortableColorPicker.xaml.cs

@@ -1,41 +0,0 @@
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Media;
-
-namespace PixiEditor.Views
-{
-    /// <summary>
-    ///     Interaction logic for PortableColorPicker.xaml
-    /// </summary>
-    public partial class PortableColorPicker : UserControl
-    {
-        // 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(PortableColorPicker),
-                new PropertyMetadata(Colors.Black));
-
-        // 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(PortableColorPicker),
-                new PropertyMetadata(Colors.White));
-
-        public PortableColorPicker()
-        {
-            InitializeComponent();
-        }
-
-
-        public Color SelectedColor
-        {
-            get => (Color) GetValue(SelectedColorProperty);
-            set => SetValue(SelectedColorProperty, value);
-        }
-
-
-        public Color SecondaryColor
-        {
-            get => (Color) GetValue(SecondaryColorProperty);
-            set => SetValue(SecondaryColorProperty, value);
-        }
-    }
-}

PixiEditorTests/PixiEditorTests.csproj

@@ -12,7 +12,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Codecov" Version="1.12.0" />
+    <PackageReference Include="Codecov" Version="1.12.1" />
     <PackageReference Include="Microsoft.CodeAnalysis.FxCopAnalyzers" Version="3.0.0">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>