RgbColorSlider fully implemented

PixiEditor/App.xaml

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

PixiEditor/Helpers/UI/RgbColorSlider.cs

@@ -0,0 +1,80 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+
+namespace PixiEditor.Helpers.UI
+{
+    public class RgbColorSlider : Slider
+    {
+        public RgbColorSlider()
+        {
+            Minimum = 0;
+            Maximum = 255;
+            SmallChange = 1;
+            LargeChange = 10;
+            MinHeight = 12;
+        }
+
+        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,
+            };
+        }
+
+
+
+        public string SliderArgbType
+        {
+            get { return (string)GetValue(SliderArgbTypeProperty); }
+            set { SetValue(SliderArgbTypeProperty, value); }
+        }
+
+        // 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(""));
+
+
+
+        public Color CurrentColor
+        {
+            get { return (Color)GetValue(CurrentColorProperty); }
+            set { SetValue(CurrentColorProperty, value); }
+        }
+
+        // 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));
+
+        private static void ColorChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            RgbColorSlider slider = (RgbColorSlider)d;
+            slider.GenerateBackground();
+        }
+    }
+}

PixiEditor/PixiEditor.csproj

@@ -16,6 +16,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <None Remove="Images\ColorCircle.png" />
     <None Remove="Images\ColorPalette.png" />
     <None Remove="Images\MoveImage.png" />
     <None Remove="Images\PixiEditorLogo.png" />
@@ -47,6 +48,7 @@
   <ItemGroup>
     <Resource Include="Images\BucketImage.png" />
     <Resource Include="Images\CircleImage.png" />
+    <Resource Include="Images\ColorCircle.png" />
     <Resource Include="Images\ColorPalette.png" />
     <Resource Include="Images\Cross.png" />
     <Resource Include="Images\EarserImage.png" />

PixiEditor/Styles/ColorSliderStyle.xaml

@@ -0,0 +1,141 @@
+<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/Views/ColorPicker.xaml

@@ -4,7 +4,7 @@
              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: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>
@@ -44,22 +44,22 @@
         <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=NotifyableColor.R, Mode=TwoWay, ElementName=uc}"/>
+                <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"/>
-                <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}"/>
+                <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"/>
-                <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}"/>
+                <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"/>
-                <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}"/>
+                <ui:RgbColorSlider Height="12" Width="170" Minimum="0" Maximum="255" 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}"/>
                 <local:NumberInput Min="0" Max="255" Margin="5,0,0,0" Width="40" Value="{Binding Path=NotifyableColor.A, Mode=TwoWay, ElementName=uc}"/>
             </StackPanel>
         </StackPanel>
@@ -71,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, ElementName=uc}">
+                <TextBox VerticalAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Width="70" Text="{Binding Path=SelectedColor, ElementName=uc}">
                     <i:Interaction.Behaviors>
                         <behaviours:TextBoxFocusBehavior/>
                     </i:Interaction.Behaviors>