ColorPicker WIP

PixiEditor/App.xaml

@@ -5,6 +5,7 @@
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Styles/ThemeColors.xaml"/>
                 <ResourceDictionary Source="Styles/MenuButtonStyle.xaml"/>
                 <ResourceDictionary Source="Styles/ThemeStyle.xaml"/>
                 <ResourceDictionary Source="Styles/Titlebar.xaml"/>

PixiEditor/Helpers/Converters/ColorToBrushConverter.cs

@@ -0,0 +1,26 @@
+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 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/Models/Tools/Tools/ColorPickerTool.cs

@@ -16,15 +16,21 @@ namespace PixiEditor.Models.Tools.Tools
 
         public override void Use(Coordinates[] coordinates)
         {
+            ViewModelMain.Current.PrimaryColor = GetColorUnderMouse();
+        }
+
+        public Color GetColorUnderMouse()
+        {
+            System.Drawing.Color color;
             using (var bitmap = new System.Drawing.Bitmap(1, 1))
             {
                 using (var graphics = System.Drawing.Graphics.FromImage(bitmap))
                 {
                     graphics.CopyFromScreen(MousePositionConverter.GetCursorPosition(), new System.Drawing.Point(0, 0), new System.Drawing.Size(1, 1));
                 }
-                var color = bitmap.GetPixel(0, 0);
-                ViewModelMain.Current.PrimaryColor = Color.FromArgb(color.A, color.R, color.G, color.B);
+                color = bitmap.GetPixel(0, 0);
             }
+            return Color.FromArgb(color.A, color.R, color.G, color.B);
         }
     }
 }

PixiEditor/Styles/ThemeColors.xaml

@@ -0,0 +1,7 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:PixiEditor.Styles">
+
+    <SolidColorBrush x:Key="MainColor" Color="#2D2D30"/>
+    <SolidColorBrush x:Key="AccentColor" Color="#252525"/>
+</ResourceDictionary>

PixiEditor/Views/ColorPicker.xaml

@@ -3,32 +3,35 @@
              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:local="clr-namespace:PixiEditor.Views" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
              mc:Ignorable="d" 
-             Width="270" Height="120">
-    <Grid Background="#FF252424" >
+             Width="270" Height="120" Name="uc">
+    <UserControl.Resources>
+        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
+    </UserControl.Resources>
+    <Grid Background="{StaticResource AccentColor}" MouseMove="Image_MouseMove">
         <Grid.RowDefinitions>
-            <RowDefinition Height="50"/>
+            <RowDefinition Height="53"/>
             <RowDefinition Height="8*"/>
             <RowDefinition Height="17*"/>
         </Grid.RowDefinitions>
-        <Image Source="/Images/ColorPalette.png" Stretch="Fill" VerticalAlignment="Center" Height="50"/>
+        <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">
                 <TextBlock Text="R" Foreground="White" Padding="5,0,5,0"/>
-                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="40" Text="255"/>
+                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="40" Text="{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="255"/>
+                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="{Binding Path=SelectedColor.G, ElementName=uc}"/>
             </StackPanel>
             <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                 <TextBlock Text="B" Foreground="White" Padding="5,0,5,0"/>
-                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="255"/>
+                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="{Binding Path=SelectedColor.B, 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="255"/>
+                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="{Binding Path=SelectedColor.A, ElementName=uc}"/>
             </StackPanel>
         </StackPanel>
         <Grid Grid.Row="2">
@@ -39,9 +42,9 @@
             </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="#FFFFFFFF"/>
+                <TextBox VerticalAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Width="65" Text="{Binding Path=SelectedColor, ElementName=uc}"/>
             </StackPanel>
-            <Rectangle Fill="White" Stroke="#FF3C3C3C" StrokeThickness="2" Grid.Column="2"/>
+            <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,5 +1,7 @@
-using System;
+using PixiEditor.Models.Tools.Tools;
+using System;
 using System.Collections.Generic;
+using System.Security.Permissions;
 using System.Text;
 using System.Windows;
 using System.Windows.Controls;
@@ -18,9 +20,37 @@ namespace PixiEditor.Views
     /// </summary>
     public partial class ColorPicker : UserControl
     {
+        private Image _colorPalette;
+
         public ColorPicker()
         {
             InitializeComponent();
+            _colorPalette = (FindName("colorPalette") as Image);
+        }
+
+        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(ColorPicker), new PropertyMetadata(Colors.White));
+
+
+
+        private void Image_MouseMove(object sender, MouseEventArgs e)
+        {
+            if (e.LeftButton == MouseButtonState.Pressed)
+            {
+                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);
+            }
         }
     }
 }

PixiEditor/Views/MainWindow.xaml

@@ -14,7 +14,7 @@
         xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
         xmlns:cmd="http://www.galasoft.ch/mvvmlight" xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Xceed.Wpf.AvalonDock"
         mc:Ignorable="d" WindowStyle="None" 
-        Title="PixiEditor" Name="mainWindow" Height="1000" Width="1600" Background="#FF252424" 
+        Title="PixiEditor" Name="mainWindow" Height="1000" Width="1600" Background="{StaticResource MainColor}" 
         WindowStartupLocation="CenterScreen"  WindowState="Maximized" DataContext="{DynamicResource ViewModelMain}">
 
     <WindowChrome.WindowChrome>
@@ -54,7 +54,7 @@
             <RowDefinition Height="30*"/>
         </Grid.RowDefinitions>
 
-        <DockPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
+        <DockPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="{StaticResource MainColor}">
             <Image DockPanel.Dock="Left" HorizontalAlignment="Left" VerticalAlignment="Top" Source="/Images/PixiEditorLogo.png" Width="20" Height="20" Margin="5,5,0,0"/>
             <Menu WindowChrome.IsHitTestVisibleInChrome="True" Margin="10, 4, 0, 0" DockPanel.Dock="Left" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Transparent" IsMainMenu="True">
                 <Menu.Resources>
@@ -96,7 +96,7 @@
                             Command="{x:Static SystemCommands.CloseWindowCommand}"/>
             </StackPanel>
         </DockPanel>
-        <StackPanel Background="#404040" Orientation="Horizontal" Grid.ColumnSpan="3" Margin="0,30,146,0" Grid.RowSpan="2">
+        <StackPanel Background="{StaticResource AccentColor}" Orientation="Horizontal" Grid.ColumnSpan="3" Margin="0,30,146,0" Grid.RowSpan="2">
             <ItemsControl ItemsSource="{Binding BitmapManager.SelectedTool.Toolbar.Settings}">
                 <ItemsControl.ItemsPanel>
                     <ItemsPanelTemplate>
@@ -157,7 +157,7 @@
             </Grid>
         </Grid>
 
-        <StackPanel Orientation="Vertical" Cursor="Arrow" Grid.Row="2" Grid.Column="0" Margin="0,7,5,0" Background="#404040" Grid.RowSpan="2">
+        <StackPanel Orientation="Vertical" Cursor="Arrow" Grid.Row="2" Grid.Column="0" Margin="0,7,5,0" Background="{StaticResource AccentColor}" Grid.RowSpan="2">
 
             <ItemsControl ItemsSource="{Binding ToolSet}">
                 <ItemsControl.ItemTemplate>
@@ -176,7 +176,7 @@
             </ItemsControl>
         </StackPanel>
 
-        <DockPanel Grid.Column="2" Background="#404040" Margin="0,30,0,0" Grid.RowSpan="3">
+        <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>
@@ -197,7 +197,7 @@
                 <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"/>
-            <xcad:DockingManager Grid.Column="2" Grid.Row="1" DockPanel.Dock="Top">
+            <xcad:DockingManager Grid.Column="2" BorderThickness="0" Grid.Row="1" DockPanel.Dock="Top">
                 <xcad:DockingManager.Style>
                     <Style TargetType="xcad:DockingManager">
                         <Setter Property="Foreground" Value="Snow"/>

PixiEditor/Views/NewFilePopup.xaml

@@ -15,12 +15,12 @@
         <converters:ToolSizeToIntConverter x:Key="ToolSizeToIntConverter"/>
     </Window.Resources>
     <Border BorderBrush="Black" BorderThickness="1">
-        <Grid Background="#404040">
+        <Grid Background="{StaticResource AccentColor}">
             <Grid.RowDefinitions>
                 <RowDefinition Height="25*"/>
                 <RowDefinition Height="577*"/>
             </Grid.RowDefinitions>
-            <Grid Grid.Row="0" Background="#303030">
+            <Grid Grid.Row="0" Background="{StaticResource MainColor}">
                 <i:Interaction.Triggers>
                     <i:EventTrigger EventName="MouseDown">
                         <i:InvokeCommandAction Command="{Binding DragMoveCommand}"/>
@@ -33,7 +33,7 @@
                     </Button.Background>
                 </Button>
             </Grid>
-            <StackPanel HorizontalAlignment="Center" Margin="0,50,0,0" Background="#303030" VerticalAlignment="Top" Grid.Row="1" Width="350" Height="150">
+            <StackPanel HorizontalAlignment="Center" Margin="0,50,0,0" Background="{StaticResource MainColor}" VerticalAlignment="Top" Grid.Row="1" Width="350" Height="150">
                 <DockPanel Margin="50,35,0,0">
                     <TextBlock Height="30" Foreground="Snow" Text="Height:" TextAlignment="Center" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                     <TextBox Height="30" Width="150" Style="{StaticResource DarkTextBoxStyle}" FontSize="16"