Added compact mode

PixiEditor/Helpers/Converters/PaletteViewerWidthToVisibilityConverter.cs

@@ -0,0 +1,19 @@
+using System;
+using System.Globalization;
+using System.Windows;
+
+namespace PixiEditor.Helpers.Converters;
+
+public class PaletteViewerWidthToVisibilityConverter : SingleInstanceConverter<PaletteViewerWidthToVisibilityConverter>
+{
+    public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        bool isCompact = value is double and < 100;
+        if(parameter is string and "Hidden")
+        {
+            return isCompact ? Visibility.Hidden : Visibility.Visible;
+        }
+
+        return isCompact ? Visibility.Visible : Visibility.Hidden;
+    }
+}

PixiEditor/Views/MainWindow.xaml

@@ -382,12 +382,23 @@
                                     <avalondock:LayoutAnchorable ContentId="palette" Title="Palette" CanHide="False"
                                                                  CanClose="False" CanAutoHide="False"
                                                                  CanDockAsTabbedDocument="False" CanFloat="True">
-                                        <palettes:PaletteViewer IsEnabled="{Binding DocumentSubViewModel.Owner.BitmapManager.ActiveDocument,
+                                        <Grid>
+                                            <palettes:CompactPaletteViewer IsEnabled="{Binding DocumentSubViewModel.Owner.BitmapManager.ActiveDocument,
+                                        Converter={converters:NotNullToBoolConverter}}"
+                                                                           SelectColorCommand="{Binding ColorsSubViewModel.SelectColorCommand}"
+                                                                           Colors="{Binding BitmapManager.ActiveDocument.Palette}" 
+                                                                           Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, 
+                                                Path=ActualWidth, Converter={converters:PaletteViewerWidthToVisibilityConverter}}"/>
+                                            <palettes:PaletteViewer IsEnabled="{Binding DocumentSubViewModel.Owner.BitmapManager.ActiveDocument,
                                         Converter={converters:NotNullToBoolConverter}}" Colors="{Binding BitmapManager.ActiveDocument.Palette}"
                                                               SelectColorCommand="{Binding ColorsSubViewModel.SelectColorCommand}"
                                                                 DataSources="{Binding ColorsSubViewModel.PaletteDataSources}"
                                                                 FileParsers="{Binding ColorsSubViewModel.PaletteParsers}"
+                                                                    Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, 
+                                                Path=ActualWidth, Converter={converters:PaletteViewerWidthToVisibilityConverter},
+                                                ConverterParameter=Hidden}"
                                                                 ImportPaletteCommand="{Binding ColorsSubViewModel.ImportPaletteCommand}"/>
+                                        </Grid>
                                     </avalondock:LayoutAnchorable>
                                     <avalondock:LayoutAnchorable ContentId="swatches" Title="Swatches" CanHide="False"
                                                                  CanClose="False" CanAutoHide="False"

PixiEditor/Views/UserControls/Palettes/CompactPaletteViewer.xaml

@@ -0,0 +1,46 @@
+<UserControl x:Class="PixiEditor.Views.UserControls.Palettes.CompactPaletteViewer"
+             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.UserControls.Palettes" xmlns:b="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+             mc:Ignorable="d"  Name="compactPaletteViewer"
+             d:DesignHeight="900" d:DesignWidth="30">
+    <Grid Background="{StaticResource AccentColor}">
+        <ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+            <ItemsControl ItemsSource="{Binding Colors, ElementName=compactPaletteViewer}" AlternationCount="9999">
+                <d:ItemsControl.ItemsSource>
+                    <x:Array Type="{x:Type Color}">
+                        <Color R="0" G="0" B="0" A="255"/>
+                        <Color R="255" G="255" B="255" A="255"/>
+                        <Color R="255" G="255" B="255" A="150"/>
+                        <Color R="255" G="255" B="255" A="0"/>
+                        <Color R="255" G="0" B="0" A="255"/>
+                        <Color R="0" G="255" B="0" A="255"/>
+                        <Color R="0" G="0" B="255" A="255"/>
+                    </x:Array>
+                </d:ItemsControl.ItemsSource>
+                <ItemsControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <WrapPanel Orientation="Horizontal"
+                                  HorizontalAlignment="Center" VerticalAlignment="Top"/>
+                    </ItemsPanelTemplate>
+                </ItemsControl.ItemsPanel>
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                        <local:PaletteColor ToolTip="Click to select as main color. Drag and drop onto another palette color to swap them." 
+                                            Color="{Binding}" Width="20" Height="20" CornerRadius="0">
+                            <b:Interaction.Triggers>
+                                <b:EventTrigger EventName="MouseLeftButtonUp">
+                                    <b:InvokeCommandAction
+                                    Command="{Binding SelectColorCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CompactPaletteViewer}}}"
+                                    CommandParameter="{Binding}" />
+                                </b:EventTrigger>
+                            </b:Interaction.Triggers>
+                        </local:PaletteColor>
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
+        </ScrollViewer>
+    </Grid>
+</UserControl>

PixiEditor/Views/UserControls/Palettes/CompactPaletteViewer.xaml.cs

@@ -0,0 +1,48 @@
+using PixiEditor.Models.DataHolders;
+using SkiaSharp;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+
+namespace PixiEditor.Views.UserControls.Palettes
+{
+    /// <summary>
+    /// Interaction logic for CompactPaletteViewer.xaml
+    /// </summary>
+    public partial class CompactPaletteViewer : UserControl
+    {
+        public static readonly DependencyProperty ColorsProperty = DependencyProperty.Register(
+            "Colors", typeof(WpfObservableRangeCollection<SKColor>), typeof(CompactPaletteViewer));
+
+        public WpfObservableRangeCollection<SKColor> Colors
+        {
+            get { return (WpfObservableRangeCollection<SKColor>)GetValue(ColorsProperty); }
+            set { SetValue(ColorsProperty, value); }
+        }
+
+        public ICommand SelectColorCommand
+        {
+            get { return (ICommand)GetValue(SelectColorCommandProperty); }
+            set { SetValue(SelectColorCommandProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for SelectColorCommand.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty SelectColorCommandProperty =
+            DependencyProperty.Register("SelectColorCommand", typeof(ICommand), typeof(CompactPaletteViewer));
+
+        public CompactPaletteViewer()
+        {
+            InitializeComponent();
+        }
+
+        private void RemoveColorMenuItem_OnClick(object sender, RoutedEventArgs e)
+        {
+            MenuItem menuItem = (MenuItem)sender;
+            SKColor color = (SKColor)menuItem.CommandParameter;
+            if (Colors.Contains(color))
+            {
+                Colors.Remove(color);
+            }
+        }
+    }
+}

PixiEditor/Views/UserControls/Palettes/PaletteViewer.xaml

@@ -59,13 +59,14 @@
                </d:ItemsControl.ItemsSource>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
-                       <WrapPanel Margin="10,10,0,10" Orientation="Horizontal"
+                       <WrapPanel Margin="10" Orientation="Horizontal"
                                   HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                     <DataTemplate>
-                        <palettes:PaletteColor ToolTip="Click to select as main color. Drag and drop onto another pallete color to swap them." AllowDrop="True" Color="{Binding}" Margin="0 5 5 5" MouseMove="PaletteColor_MouseMove"
+                        <palettes:PaletteColor ToolTip="Click to select as main color. Drag and drop onto another palette color to swap them." AllowDrop="True" Color="{Binding}" 
+                                               Margin="2.5" MouseMove="PaletteColor_MouseMove"
                                             Drop="PaletteColor_Drop"
                                             AssociatedKey="{Binding Path=(ItemsControl.AlternationIndex), 
                 RelativeSource={RelativeSource TemplatedParent}, Converter={converters:IndexToAssociatedKeyConverter}}">