Added portable color picker

PixiEditor/App.xaml

@@ -11,6 +11,7 @@
                 <ResourceDictionary Source="Styles/Titlebar.xaml"/>
                 <ResourceDictionary Source="Styles/ComboBoxDarkStyle.xaml"/>
                 <ResourceDictionary Source="Styles/ColorSliderStyle.xaml"/>
+                <ResourceDictionary Source="Styles/ColorToggleButton.xaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>

PixiEditor/Helpers/Converters/BoolToInvertedBoolConverter.cs

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

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

@@ -1,6 +1,6 @@
-using System.Windows.Data;
+using PixiEditor.Views;
+using System.Windows.Data;
 using System.Windows.Media;
-using Xceed.Wpf.Toolkit;
 
 namespace PixiEditor.Models.Tools.ToolSettings.Settings
 {
@@ -13,19 +13,14 @@ namespace PixiEditor.Models.Tools.ToolSettings.Settings
             Value = Color.FromArgb(0, 0, 0, 0);
         }
 
-        private ColorPicker GenerateColorPicker()
+        private PortableColorPicker GenerateColorPicker()
         {
-            ColorPicker picker = new ColorPicker()
-            {
-                UsingAlphaChannel = true,
-                AvailableColorsSortingMode = ColorSortingMode.Alphabetical,
-                Width = 70
-            };
+            PortableColorPicker picker = new PortableColorPicker();
             Binding binding = new Binding("Value")
             {
                 Mode = BindingMode.TwoWay,
             };
-            picker.SetBinding(ColorPicker.SelectedColorProperty, binding);
+            picker.SetBinding(PortableColorPicker.SelectedColorProperty, binding);
             return picker;
         }
     }

PixiEditor/Styles/ColorToggleButton.xaml

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

@@ -20,7 +20,7 @@
         <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"/>
+                    <ImageBrush ImageSource="../Images/SwapArrows.png" Stretch="Fill"/>
                 </Button.Background>
             </Button>
             <Grid Height="40" Width="40" HorizontalAlignment="Right" VerticalAlignment="Bottom">

PixiEditor/Views/PortableColorPicker.xaml

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

@@ -0,0 +1,54 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace PixiEditor.Views
+{
+    /// <summary>
+    /// Interaction logic for PortableColorPicker.xaml
+    /// </summary>
+    public partial class PortableColorPicker : UserControl
+    {
+        public PortableColorPicker()
+        {
+            InitializeComponent();
+        }
+
+
+
+        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(Color), typeof(PortableColorPicker), new PropertyMetadata(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(PortableColorPicker), new PropertyMetadata(Colors.White));
+
+
+
+    }
+}