Gradient editor - WIP commit

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditor.xaml

@@ -13,7 +13,6 @@
                          Title="Gradient Editor"
                          Background="{DynamicResource MaterialDesignPaper}"
                          FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
-                         UseLayoutRounding="True"
                          Width="500"
                          Height="600"
                          ResizeMode="NoResize"
@@ -42,20 +41,24 @@
                 <TextBlock Margin="15 15 0 0">Gradient</TextBlock>
                 <Separator Margin="15 5" />
 
-                <ItemsControl ItemsSource="{Binding ColorGradient.Colors, Mode=OneWay}" ClipToBounds="False" Margin="15 0">
+                <ItemsControl ItemsSource="{Binding ColorGradient.Colors}" ClipToBounds="False" Margin="15 0">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <Canvas Height="60" Width="435" x:Name="PreviewCanvas" >
+                            <Canvas Height="60" Width="437" x:Name="PreviewCanvas">
                                 <Canvas.Background>
                                     <VisualBrush Stretch="None" AlignmentY="Top">
                                         <VisualBrush.Visual>
-                                            <Border Width="{Binding ActualWidth, ElementName=PreviewCanvas}" Height="50">
-                                                <Rectangle x:Name="Preview" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+                                            <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Margin="15">
+                                                <Rectangle x:Name="Preview"
+                                                           VerticalAlignment="Stretch"
+                                                           HorizontalAlignment="Stretch"
+                                                           Width="{Binding ActualWidth, ElementName=PreviewCanvas}"
+                                                           Height="35">
                                                     <Rectangle.Fill>
-                                                        <LinearGradientBrush GradientStops="{Binding ColorGradient, Mode=OneWay, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
+                                                        <LinearGradientBrush GradientStops="{Binding ColorGradient.Colors, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
                                                     </Rectangle.Fill>
                                                 </Rectangle>
-                                            </Border>
+                                            </materialDesign:Card>
                                         </VisualBrush.Visual>
                                     </VisualBrush>
                                 </Canvas.Background>
@@ -64,16 +67,18 @@
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemContainerStyle>
                         <Style TargetType="ContentPresenter">
-                            <Setter Property="Canvas.Top" Value="50" />
+                            <Setter Property="Canvas.Top" Value="40" />
                         </Style>
                     </ItemsControl.ItemContainerStyle>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
-                            <local:GradientEditorColor GradientColor="{Binding}"></local:GradientEditorColor>
+                            <local:GradientEditorColor
+                                ColorGradient="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:MaterialWindow}, Path=ColorGradient}"
+                                GradientColor="{Binding}" />
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
-                
+
                 <TextBlock Margin="15 15 0 0">Stops</TextBlock>
                 <Separator Margin="15 5" />
 

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditor.xaml.cs

@@ -1,4 +1,5 @@
-using System.ComponentModel;
+using System;
+using System.ComponentModel;
 using System.Runtime.CompilerServices;
 using System.Windows;
 using Artemis.Core.Models.Profile;
@@ -26,11 +27,12 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
 
         public GradientEditor(ColorGradient colorGradient)
         {
-            InitializeComponent();
             DataContext = this;
+
+            InitializeComponent();
             ColorGradient = colorGradient;
         }
-
+        
         public ColorGradient ColorGradient
         {
             get => (ColorGradient) GetValue(ColorGradientProperty);

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorColor.xaml

@@ -4,22 +4,29 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorColor"
     mc:Ignorable="d"
     d:DesignHeight="450" d:DesignWidth="800">
     <Canvas>
         <Path x:Name="ColorStop"
               Data="M13.437011,33.065002 C9.7268463,29.334181 7.812011,26.379009 4.874511,23.379009 1.687011,19.566509 0.12600673,17.206803 5.6843419E-14,14.127608 0.062010996,2.0027046 11.158781,-0.062991121 13.43702,0.0014351187 M13.438011,33.065016 C17.148173,29.334199 19.063008,26.379023 22.00051,23.379017 25.188007,19.566519 26.749013,17.206806 26.875018,14.127613 26.813007,2.002704 15.716239,-0.062987381 13.438,0.0014388781"
-              Stroke="White"
+              Stroke="{DynamicResource NormalBorderBrush}"
               StrokeThickness="2"
-              Cursor="Hand">
+              Cursor="Hand"
+              MouseDown="ColorStop_MouseDown"
+              MouseUp="ColorStop_MouseUp"
+              MouseMove="ColorStop_MouseMove">
             <Path.RenderTransform>
                 <TransformGroup>
                     <RotateTransform Angle="180" />
                     <TranslateTransform X="14" Y="33" />
-                    <ScaleTransform ScaleX="0.5" ScaleY="0.5" />
+                    <ScaleTransform ScaleX="0.45" ScaleY="0.5" />
                 </TransformGroup>
             </Path.RenderTransform>
+            <Path.Effect>
+                <DropShadowEffect BlurRadius="15" Opacity="0.25" Direction="180"></DropShadowEffect>
+            </Path.Effect>
         </Path>
     </Canvas>
 </UserControl>

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorColor.xaml.cs

@@ -1,10 +1,14 @@
-using System.ComponentModel;
+using System;
+using System.ComponentModel;
+using System.Linq;
 using System.Runtime.CompilerServices;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Input;
 using System.Windows.Media;
 using Artemis.Core.Models.Profile;
 using Artemis.UI.Shared.Annotations;
+using Artemis.UI.Shared.Utilities;
 
 namespace Artemis.UI.Shared.Screens.GradientEditor
 {
@@ -13,14 +17,32 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
     /// </summary>
     public partial class GradientEditorColor : UserControl, INotifyPropertyChanged
     {
+        private const double CanvasWidth = 435.0;
+
         public static readonly DependencyProperty ColorGradientColorProperty = DependencyProperty.Register(nameof(GradientColor), typeof(ColorGradientColor), typeof(GradientEditorColor),
             new FrameworkPropertyMetadata(default(ColorGradientColor), ColorGradientColorPropertyChangedCallback));
 
+        public static readonly DependencyProperty ColorGradientProperty = DependencyProperty.Register(nameof(ColorGradient), typeof(ColorGradient), typeof(GradientEditorColor),
+            new FrameworkPropertyMetadata(default(ColorGradient)));
+
+        private readonly Canvas _previewCanvas;
+
         private bool _inCallback;
+        private double _mouseDownOffset;
+        private DateTime _mouseDownTime;
 
         public GradientEditorColor()
         {
             InitializeComponent();
+
+            var window = Application.Current.Windows.OfType<GradientEditor>().FirstOrDefault();
+            _previewCanvas = UIUtilities.FindChild<Canvas>(window, "PreviewCanvas");
+        }
+
+        public ColorGradient ColorGradient
+        {
+            get => (ColorGradient) GetValue(ColorGradientProperty);
+            set => SetValue(ColorGradientProperty, value);
         }
 
         public ColorGradientColor GradientColor
@@ -44,28 +66,52 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
                 return;
 
             self._inCallback = true;
-            self.OnPropertyChanged(nameof(GradientColor));
 
-            // Get the parent canvas
-            DependencyObject parent = null;
-            DependencyObject current = self;
-            while (current != null && !(parent is Canvas))
+
+            self.OnPropertyChanged(nameof(GradientColor));
+            self.Update();
+            self._inCallback = false;
+        }
+
+        private void Update()
+        {
+            ColorStop.SetValue(Canvas.LeftProperty, CanvasWidth * GradientColor.Position);
+            ColorStop.Fill = new SolidColorBrush(Color.FromArgb(
+                GradientColor.Color.Alpha,
+                GradientColor.Color.Red,
+                GradientColor.Color.Green,
+                GradientColor.Color.Blue
+            ));
+        }
+
+        private void ColorStop_MouseDown(object sender, MouseButtonEventArgs e)
+        {
+            ((IInputElement) sender).CaptureMouse();
+            _mouseDownOffset = (double) ColorStop.GetValue(Canvas.LeftProperty) - e.GetPosition(_previewCanvas).X;
+            _mouseDownTime = DateTime.Now;
+        }
+
+        private void ColorStop_MouseUp(object sender, MouseButtonEventArgs e)
+        {
+            // On regular click, select this color stop
+            if (DateTime.Now - _mouseDownTime <= TimeSpan.FromMilliseconds(250))
             {
-                parent = VisualTreeHelper.GetParent(current);
-                current = parent;
             }
 
-            if (parent is Canvas canvas)
-                self.ColorStop.SetValue(Canvas.LeftProperty, (double) 435f * self.GradientColor.Position);
+            ((IInputElement) sender).ReleaseMouseCapture();
+        }
 
-            self.ColorStop.Fill = new SolidColorBrush(Color.FromArgb(
-                self.GradientColor.Color.Alpha,
-                self.GradientColor.Color.Red,
-                self.GradientColor.Color.Green,
-                self.GradientColor.Color.Blue
-            ));
+        private void ColorStop_MouseMove(object sender, MouseEventArgs e)
+        {
+            if (!((IInputElement) sender).IsMouseCaptured)
+                return;
 
-            self._inCallback = false;
+            var position = e.GetPosition(_previewCanvas);
+            // Position ranges from 0.0 to 1.0
+            var newPosition = Math.Min(1, Math.Max(0, Math.Round((position.X + _mouseDownOffset) / CanvasWidth, 3, MidpointRounding.AwayFromZero)));
+            GradientColor.Position = (float) newPosition;
+            ColorGradient.OnColorValuesUpdated();
+            Update();
         }
     }
 }