Palette context menu

PixiEditor/Helpers/Converters/PaletteItemsToWidthConverter.cs

@@ -0,0 +1,23 @@
+using SkiaSharp;
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace PixiEditor.Helpers.Converters
+{
+    public class PaletteItemsToWidthConverter : SingleInstanceConverter<PaletteItemsToWidthConverter>
+    {
+        public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if(value is IList<SKColor> colors && colors.Count == 0)
+            {
+                return 0;
+            }
+
+            return 120;
+        }
+    }
+}

PixiEditor/Styles/ThemeStyle.xaml

@@ -16,7 +16,7 @@
     <Style TargetType="ToggleButton">
         <Setter Property="Focusable" Value="False"/>
     </Style>
-    
+
     <Style TargetType="Button" x:Key="BaseDarkButton">
         <Setter Property="Background" Value="#404040" />
         <Setter Property="Foreground" Value="White" />
@@ -267,7 +267,7 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ContextMenu}">
-                    <Border Background="#202020" BorderBrush="Black" BorderThickness="1" Opacity="0.96">
+                    <Border Background="{StaticResource AccentColor}" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
                         <StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True" />
                     </Border>
                 </ControlTemplate>

PixiEditor/Views/MainWindow.xaml

@@ -17,7 +17,7 @@
         xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
         xmlns:avalonDockTheme="clr-namespace:PixiEditor.Styles.AvalonDock" 
         xmlns:layerUserControls="clr-namespace:PixiEditor.Views.UserControls.Layers" 
-        xmlns:sys="clr-namespace:System;assembly=System.Runtime" xmlns:palettes="clr-namespace:PixiEditor.Views.UserControls.Palettes"
+        xmlns:sys="clr-namespace:System;assembly=System.Runtime" xmlns:palettes="clr-namespace:PixiEditor.Views.UserControls.Palettes" xmlns:b="http://schemas.microsoft.com/expression/2010/interactivity"
         d:DataContext="{d:DesignInstance Type=vm:ViewModelMain}"
         mc:Ignorable="d" WindowStyle="None" Initialized="MainWindow_Initialized"
         Title="PixiEditor" Name="mainWindow" Height="1000" Width="1600" Background="{StaticResource MainColor}"
@@ -299,13 +299,52 @@
                                             </i:EventTrigger>
                                         </i:Interaction.Triggers>
                                         <usercontrols:DrawingViewPort.ContextMenu>
-                                            <ContextMenu>
-                                                <MenuItem Header="_Select All" Command="{Binding XamlAccesibleViewModel.SelectionSubViewModel.SelectAllCommand}" InputGestureText="Ctrl+A" />
-                                                <MenuItem Header="_Deselect" Command="{Binding XamlAccesibleViewModel.SelectionSubViewModel.DeselectCommand}" InputGestureText="Ctrl+D" />
-                                                <Separator/>
-                                                <MenuItem Header="_Cut" Command="{Binding XamlAccesibleViewModel.ClipboardSubViewModel.CutCommand}" InputGestureText="Ctrl+X" />
-                                                <MenuItem Header="_Copy" Command="{Binding XamlAccesibleViewModel.ClipboardSubViewModel.CopyCommand}" InputGestureText="Ctrl+C" />
-                                                <MenuItem Header="_Paste" Command="{Binding XamlAccesibleViewModel.ClipboardSubViewModel.PasteCommand}" InputGestureText="Ctrl+V" />
+                                            <ContextMenu DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
+                                                <ContextMenu.Template>
+                                                    <ControlTemplate>
+                                                        <Border Height="120" Background="{StaticResource AccentColor}" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
+                                                            <Grid>
+                                                                <Grid.ColumnDefinitions>
+                                                                    <ColumnDefinition Width="100"/>
+                                                                    <ColumnDefinition Width="{Binding XamlAccesibleViewModel.BitmapManager.ActiveDocument.Palette, Converter={converters:PaletteItemsToWidthConverter}}"/>
+                                                                </Grid.ColumnDefinitions>
+                                                                <Border BorderThickness="0 0 1 0" BorderBrush="Black">
+                                                                    <StackPanel Orientation="Vertical" Grid.Column="0">
+                                                                        <MenuItem Header="_Select All" Command="{Binding XamlAccesibleViewModel.SelectionSubViewModel.SelectAllCommand}" InputGestureText="Ctrl+A" />
+                                                                        <MenuItem Header="_Deselect" Command="{Binding XamlAccesibleViewModel.SelectionSubViewModel.DeselectCommand}" InputGestureText="Ctrl+D" />
+                                                                        <Separator/>
+                                                                        <MenuItem Header="_Cut" Command="{Binding XamlAccesibleViewModel.ClipboardSubViewModel.CutCommand}" InputGestureText="Ctrl+X" />
+                                                                        <MenuItem Header="_Copy" Command="{Binding XamlAccesibleViewModel.ClipboardSubViewModel.CopyCommand}" InputGestureText="Ctrl+C" />
+                                                                        <MenuItem Header="_Paste" Command="{Binding XamlAccesibleViewModel.ClipboardSubViewModel.PasteCommand}" InputGestureText="Ctrl+V" />
+                                                                    </StackPanel>
+                                                                </Border>
+                                                                <ScrollViewer Margin="5" Grid.Column="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                                                                    <ItemsControl ItemsSource="{Binding XamlAccesibleViewModel.BitmapManager.ActiveDocument.Palette}" AlternationCount="9999">
+                                                                        <ItemsControl.ItemsPanel>
+                                                                            <ItemsPanelTemplate>
+                                                                                <WrapPanel Orientation="Horizontal"
+                                  HorizontalAlignment="Left" VerticalAlignment="Top"/>
+                                                                            </ItemsPanelTemplate>
+                                                                        </ItemsControl.ItemsPanel>
+                                                                        <ItemsControl.ItemTemplate>
+                                                                            <DataTemplate>
+                                                                                <palettes:PaletteColor CornerRadius="0" ToolTip="Click to select as main color." Width="22" Height="22" Color="{Binding}">
+                                                                                    <b:Interaction.Triggers>
+                                                                                        <b:EventTrigger EventName="MouseLeftButtonUp">
+                                                                                            <b:InvokeCommandAction
+                                     Command="{Binding DataContext.XamlAccesibleViewModel.ColorsSubViewModel.SelectColorCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}}"
+                                    CommandParameter="{Binding}" />
+                                                                                        </b:EventTrigger>
+                                                                                    </b:Interaction.Triggers>
+                                                                                </palettes:PaletteColor>
+                                                                            </DataTemplate>
+                                                                        </ItemsControl.ItemTemplate>
+                                                                    </ItemsControl>
+                                                                </ScrollViewer>
+                                                            </Grid>
+                                                        </Border>
+                                                    </ControlTemplate>
+                                                </ContextMenu.Template>
                                             </ContextMenu>
                                         </usercontrols:DrawingViewPort.ContextMenu>
                                     </usercontrols:DrawingViewPort>

PixiEditor/Views/UserControls/Palettes/PaletteColor.xaml

@@ -3,15 +3,22 @@
              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:converters="clr-namespace:PixiEditor.Helpers.Converters" xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls"
+             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+             xmlns:palettes="clr-namespace:PixiEditor.Views.UserControls.Palettes"
              mc:Ignorable="d"
              d:DesignHeight="45" d:DesignWidth="45" Name="uc">
     <UserControl.Resources>
         <converters:SKColorToMediaColorConverter x:Key="SKColorToMediaColorConverter" />
         <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter" />
     </UserControl.Resources>
-    <Grid Width="45" Height="45">
-        <Border CornerRadius="5.5" Width="44" Height="44" RenderOptions.BitmapScalingMode="NearestNeighbor">
+    <UserControl.Style>
+        <Style TargetType="{x:Type palettes:PaletteColor}">
+            <Setter Property="Width" Value="45"/>
+            <Setter Property="Height" Value="45"/>
+        </Style>
+    </UserControl.Style>
+    <Grid Width="{Binding ElementName=uc, Path=Width}" Height="{Binding ElementName=uc, Path=Height}">
+        <Border CornerRadius="{Binding ElementName=uc, Path=CornerRadius}" Width="{Binding ElementName=uc, Path=Width}" Height="{Binding ElementName=uc, Path=Height}" RenderOptions.BitmapScalingMode="NearestNeighbor">
             <Border.Background>
                 <VisualBrush>
                     <VisualBrush.Visual>
@@ -20,7 +27,7 @@
                 </VisualBrush>
             </Border.Background>
         </Border>
-        <Border CornerRadius="5.5" BorderThickness="0 0 0 0.1" BorderBrush="White" Cursor="Hand">
+        <Border CornerRadius="{Binding ElementName=uc, Path=CornerRadius}" BorderThickness="0 0 0 0.1" BorderBrush="White" Cursor="Hand">
             <Border.Background>
                 <SolidColorBrush Color="{Binding Color, Converter={StaticResource SKColorToMediaColorConverter}, ElementName=uc}" />
             </Border.Background>

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

@@ -26,6 +26,17 @@ public partial class PaletteColor : UserControl
     public static readonly DependencyProperty AssociatedKeyProperty =
         DependencyProperty.Register("AssociatedKey", typeof(int?), typeof(PaletteColor), new PropertyMetadata(null));
 
+    public CornerRadius CornerRadius
+    {
+        get { return (CornerRadius)GetValue(CornerRadiusProperty); }
+        set { SetValue(CornerRadiusProperty, value); }
+    }
+
+    // Using a DependencyProperty as the backing store for CornerRadius.  This enables animation, styling, binding, etc...
+    public static readonly DependencyProperty CornerRadiusProperty =
+        DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(PaletteColor), new PropertyMetadata(new CornerRadius(5f)));
+
+
 
     public PaletteColor()
     {