Color picker - Remember last 18 picked colors

src/Artemis.UI.Shared/Controls/ColorPicker.xaml

@@ -94,19 +94,20 @@
                StaysOpen="{Binding StaysOpen, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                PopupAnimation="Fade"
                IsOpen="{Binding PopupOpen, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
-            <materialDesign:Card Width="200" Height="230" Margin="30" materialDesign:ShadowAssist.ShadowDepth="Depth4">
+            <materialDesign:Card Width="200" Height="260" Margin="30" materialDesign:ShadowAssist.ShadowDepth="Depth4">
                 <Grid>
                     <Grid.RowDefinitions>
-                        <RowDefinition Height="160" />
+                        <RowDefinition Height="*" />
-                        <RowDefinition />
+                        <RowDefinition Height="Auto" />
-                        <RowDefinition />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
                     <materialDesign:ColorPicker Grid.Row="0"
                                                 Color="{Binding Color, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                                                 MouseUp="ColorGradient_OnMouseUp"
                                                 PreviewMouseDown="Slider_OnMouseDown"
                                                 PreviewMouseUp="Slider_OnMouseUp" />
-                    <Slider Grid.Row="1" Margin="8"
+                    <Slider Grid.Row="1" Margin="8 2 8 8"
                             IsMoveToPointEnabled="True"
                             Orientation="Horizontal"
                             Style="{DynamicResource MaterialDesignColorSlider}"
@@ -116,16 +117,33 @@
                             PreviewMouseUp="Slider_OnMouseUp"
                             Maximum="255" />
                    
-                    <!-- Checkboxes don't work inside popups inside tree views, which is where the color picker is regularly used -->
+                    <ItemsControl Grid.Row="2" x:Name="RecentColorsContainer" Margin="10 0" HorizontalAlignment="Left">
-                    <CheckBox Grid.Row="2"
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <Border CornerRadius="4" Background="{StaticResource Checkerboard}" Width="16" Height="16" Margin="2">
+                                    <Rectangle RadiusX="4" RadiusY="4" Cursor="Hand" MouseLeftButtonDown="SelectRecentColor" ToolTip="{Binding}">
+                                        <Rectangle.Fill>
+                                            <SolidColorBrush Color="{Binding}" />
+                                        </Rectangle.Fill>
+                                    </Rectangle>
+                                </Border>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                        <ItemsControl.ItemsPanel>
+                          <ItemsPanelTemplate>
+                              <WrapPanel Orientation="Horizontal"></WrapPanel>
+                          </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                    </ItemsControl>
+
+                    <CheckBox Grid.Row="3"
                               x:Name="PreviewCheckBox"
-                              Margin="10 0"
+                              Margin="10 5 0 10"
                               VerticalAlignment="Center"
                               Style="{StaticResource MaterialDesignCheckBox}"
                               Click="PreviewCheckBoxClick">
                         Preview on devices
                     </CheckBox>
-
                 </Grid>
             </materialDesign:Card>
         </Popup>

src/Artemis.UI.Shared/Controls/ColorPicker.xaml.cs

@@ -1,9 +1,11 @@
 using System;
+using System.Collections.ObjectModel;
 using System.ComponentModel;
 using System.Runtime.CompilerServices;
 using System.Windows;
 using System.Windows.Input;
 using System.Windows.Media;
+using System.Windows.Shapes;
 using Artemis.UI.Shared.Services;
 
 namespace Artemis.UI.Shared
@@ -146,6 +148,12 @@ namespace Artemis.UI.Shared
 
             colorPicker._inCallback = true;
             colorPicker.OnPropertyChanged(nameof(PopupOpen));
+
+            if ((bool) e.NewValue)
+                colorPicker.PopupOpened();
+            else
+                colorPicker.PopupClosed();
+
             colorPicker._inCallback = false;
         }
 
@@ -230,6 +238,22 @@ namespace Artemis.UI.Shared
             PreviewCheckBox.IsChecked = _colorPickerService.PreviewSetting.Value;
         }
 
+        private void PopupClosed()
+        {
+            _colorPickerService?.QueueRecentColor(Color);
+        }
+
+        private void PopupOpened()
+        {
+            RecentColorsContainer.ItemsSource = new ObservableCollection<Color>(_colorPickerService.RecentColors);
+        }
+
+        private void SelectRecentColor(object sender, MouseButtonEventArgs e)
+        {
+            Color = (Color) ((Rectangle) sender).DataContext;
+            PopupOpen = false;
+        }
+
         /// <inheritdoc />
         public event PropertyChangedEventHandler? PropertyChanged;
 

src/Artemis.UI.Shared/Services/ColorPickerService.cs

@@ -24,9 +24,34 @@ namespace Artemis.UI.Shared.Services
 
             PreviewSetting = settingsService.GetSetting("UI.PreviewColorPickerOnDevices", false);
             PreviewSetting.AutoSave = true;
+            RecentColorsSetting = settingsService.GetSetting("UI.ColorPickerRecentColors", new LinkedList<Color>());
+        }
+
+        private void RenderColorPickerOverlay(object? sender, FrameRenderingEventArgs e)
+        {
+            if (_mustRenderOverlay)
+                _overlayOpacity += 0.2f;
+            else
+                _overlayOpacity -= 0.2f;
+
+            if (_overlayOpacity <= 0f)
+            {
+                _coreService.FrameRendering -= RenderColorPickerOverlay;
+                return;
+            }
+
+            if (_overlayOpacity > 1f)
+                _overlayOpacity = 1f;
+
+            using SKPaint overlayPaint = new() {Color = new SKColor(0, 0, 0, (byte) (255 * _overlayOpacity))};
+            overlayPaint.Color = _overlayColor.WithAlpha((byte) (_overlayColor.Alpha * _overlayOpacity));
+            e.Canvas.DrawRect(0, 0, e.Canvas.LocalClipBounds.Width, e.Canvas.LocalClipBounds.Height, overlayPaint);
         }
 
         public PluginSetting<bool> PreviewSetting { get; }
+        public PluginSetting<LinkedList<Color>> RecentColorsSetting { get; }
+
+        public LinkedList<Color> RecentColors => RecentColorsSetting.Value;
 
         public Task<object> ShowGradientPicker(ColorGradient colorGradient, string dialogHost)
         {
@@ -56,25 +81,16 @@ namespace Artemis.UI.Shared.Services
             _overlayColor = new SKColor(color.R, color.G, color.B, color.A);
         }
 
-        private void RenderColorPickerOverlay(object? sender, FrameRenderingEventArgs e)
+        public void QueueRecentColor(Color color)
         {
-            if (_mustRenderOverlay)
+            if (RecentColors.Contains(color)) 
-                _overlayOpacity += 0.2f;
+                RecentColors.Remove(color);
-            else
-                _overlayOpacity -= 0.2f;
 
-            if (_overlayOpacity <= 0f)
+            RecentColors.AddFirst(color);
-            {
+            while (RecentColors.Count > 18)
-                _coreService.FrameRendering -= RenderColorPickerOverlay;
+                RecentColors.RemoveLast();
-                return;
-            }
 
-            if (_overlayOpacity > 1f)
+            RecentColorsSetting.Save();
-                _overlayOpacity = 1f;
-
-            using SKPaint overlayPaint = new() {Color = new SKColor(0, 0, 0, (byte) (255 * _overlayOpacity))};
-            overlayPaint.Color = _overlayColor.WithAlpha((byte) (_overlayColor.Alpha * _overlayOpacity));
-            e.Canvas.DrawRect(0, 0, e.Canvas.LocalClipBounds.Width, e.Canvas.LocalClipBounds.Height, overlayPaint);
         }
     }
 }

src/Artemis.UI.Shared/Services/Interfaces/IColorPickerService.cs

@@ -1,4 +1,5 @@
-using System.Threading.Tasks;
+using System.Collections.Generic;
+using System.Threading.Tasks;
 using System.Windows.Media;
 using Artemis.Core;
 
@@ -9,8 +10,11 @@ namespace Artemis.UI.Shared.Services
         Task<object> ShowGradientPicker(ColorGradient colorGradient, string dialogHost);
 
         PluginSetting<bool> PreviewSetting { get; }
+        LinkedList<Color> RecentColors { get; }
+        PluginSetting<LinkedList<Color>> RecentColorsSetting { get; }
         void StartColorDisplay();
         void StopColorDisplay();
         void UpdateColorDisplay(Color color);
+        void QueueRecentColor(Color color);
     }
 }