Drag n drop layers is working

PixiEditor/Models/DataHolders/Document/Document.Constructors.cs

@@ -22,11 +22,6 @@ namespace PixiEditor.Models.DataHolders
             Layers.CollectionChanged += Layers_CollectionChanged;
         }
 
-        ~Document()
-        {
-            Layers.CollectionChanged -= Layers_CollectionChanged;
-        }
-
         private void Layers_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
         {
             RaisePropertyChanged(nameof(Layers));

PixiEditor/Models/DataHolders/Document/Document.Layers.cs

@@ -20,7 +20,17 @@ namespace PixiEditor.Models.DataHolders
         private Guid activeLayerGuid;
         private LayerStructure layerStructure = new ();
 
-        public ObservableCollection<Layer> Layers { get; set; } = new ObservableCollection<Layer>();
+        private ObservableCollection<Layer> layers = new ();
+
+        public ObservableCollection<Layer> Layers
+        {
+            get => layers;
+            set
+            {
+                layers = value;
+                Layers.CollectionChanged += Layers_CollectionChanged;
+            }
+        }
 
         public LayerStructure LayerStructure
         {

PixiEditor/Views/UserControls/LayerItem.xaml

@@ -4,7 +4,6 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:PixiEditor.Views"
-             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
              xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours"
              mc:Ignorable="d" Focusable="True"
              d:DesignHeight="60" d:DesignWidth="250" Name="uc"
@@ -22,32 +21,31 @@
             </i:EventTrigger>
         </i:Interaction.Triggers>
         <Grid>
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="30"/>
-                <ColumnDefinition Width="199*"/>
-                <ColumnDefinition Width="20"/>
-            </Grid.ColumnDefinitions>
-            <CheckBox Style="{StaticResource ImageCheckBox}" VerticalAlignment="Center"
+            <Grid.RowDefinitions>
+                <RowDefinition Height="7.5"/>
+                <RowDefinition Height="20"/>
+                <RowDefinition Height="7.5"/>
+            </Grid.RowDefinitions>
+            <Grid AllowDrop="True" DragEnter="Grid_DragEnter" Drop="Grid_Drop_Top" DragLeave="Grid_DragLeave" Grid.Row="0" Grid.ColumnSpan="3" Background="Transparent"/>
+            <Grid Grid.Row="1" DragEnter="Grid_DragEnter" DragLeave="Grid_DragLeave">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="30"/>
+                    <ColumnDefinition Width="199*"/>
+                    <ColumnDefinition Width="20"/>
+                </Grid.ColumnDefinitions>
+                <CheckBox Style="{StaticResource ImageCheckBox}" VerticalAlignment="Center"
                       IsThreeState="False" HorizontalAlignment="Center" 
                       IsChecked="{Binding Path=IsVisibleUndoTriggerable, Mode=TwoWay}" Grid.Column="0" Height="16" />
-            <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left" Margin="5,0,0,0">
-                <Image Source="{Binding PreviewImage,ElementName=uc}" Stretch="Uniform" Width="50" Height="20" Margin="0,0,20,0"
+                <StackPanel Grid.Row="1" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left" Margin="5,0,0,0">
+                    <Image Source="{Binding PreviewImage,ElementName=uc}" Stretch="Uniform" Width="50" Height="20" Margin="0,0,20,0"
                        RenderOptions.BitmapScalingMode="NearestNeighbor"/>
-                <local:EditableTextBlock
+                    <local:EditableTextBlock
                     IsEditing="{Binding IsRenaming, ElementName=uc, Mode=TwoWay}" FontSize="16"
                     VerticalAlignment="Center"
                     Text="{Binding LayerName, ElementName=uc, Mode=TwoWay}" />
-            </StackPanel>
-            <StackPanel Visibility="{Binding Path=ControlButtonsVisible, ElementName=uc}" 
-                        Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Width="11" 
-                        Grid.Column="2">
-                <Button CommandParameter="{Binding LayerIndex, ElementName=uc}" Command="{Binding Path=MoveToFrontCommand, ElementName=uc}" Background="Transparent" Style="{StaticResource OpacityButtonStyle}" Foreground="White" HorizontalAlignment="Center" BorderThickness="0">
-                    <TextBlock Text="&#9650;"/>
-                </Button>
-                <Button CommandParameter="{Binding LayerIndex, ElementName=uc}" Command="{Binding Path=MoveToBackCommand, ElementName=uc}" Background="Transparent" HorizontalAlignment="Center" Style="{StaticResource OpacityButtonStyle}" Foreground="White" BorderThickness="0">
-                    <TextBlock Text="&#9660;"/>
-                </Button>
-            </StackPanel>
+                </StackPanel>
+            </Grid>
+            <Grid DragEnter="Grid_DragEnter" Drop="Grid_Drop_Bottom" DragLeave="Grid_DragLeave" Grid.Row="2" AllowDrop="True" Grid.ColumnSpan="3" Background="Transparent"/>
         </Grid>
     </Border>
 </UserControl>

PixiEditor/Views/UserControls/LayerItem.xaml.cs

@@ -3,10 +3,13 @@ using System.Collections.ObjectModel;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
+using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using PixiEditor.Helpers;
 using PixiEditor.Helpers.UI;
+using PixiEditor.Models.DataHolders;
 using PixiEditor.Models.Layers;
+using PixiEditor.Views.UserControls;
 
 namespace PixiEditor.Views
 {
@@ -15,6 +18,8 @@ namespace PixiEditor.Views
     /// </summary>
     public partial class LayerItem : UserControl
     {
+        public static Brush HighlightColor = (SolidColorBrush)new BrushConverter().ConvertFrom(Document.SecondarySelectedLayerColor);
+
         public LayerItem()
         {
             InitializeComponent();
@@ -123,5 +128,56 @@ namespace PixiEditor.Views
             ControlButtonsVisible = Visibility.Hidden;
 
         }
+
+        private void RemoveDragEffect(Grid grid)
+        {
+            grid.Background = Brushes.Transparent;
+        }
+
+        private void Grid_DragEnter(object sender, DragEventArgs e)
+        {
+            Grid item = sender as Grid;
+
+            item.Background = HighlightColor;
+        }
+
+        private void Grid_DragLeave(object sender, DragEventArgs e)
+        {
+            Grid item = sender as Grid;
+
+            RemoveDragEffect(item);
+        }
+
+        private void HandleGridDrop(object sender, DragEventArgs e, int indexModifier)
+        {
+            Grid item = sender as Grid;
+            RemoveDragEffect(item);
+
+            if (e.Data.GetDataPresent("PixiEditor.Views.UserControls.LayerStructureItemContainer"))
+            {
+                var data = (LayerStructureItemContainer)e.Data.GetData("PixiEditor.Views.UserControls.LayerStructureItemContainer");
+                for (int i = 0; i < data.Item.Children.Count; i++)
+                {
+                    int oldIndex = data.ContainerIndex + i;
+                    int moveBy = LayerIndex + indexModifier - oldIndex;
+                    if (moveBy > 0)
+                    {
+                        moveBy--;
+                    }
+
+                    data.LayerCommandsViewModel.Owner.BitmapManager.ActiveDocument.MoveLayerIndexBy(oldIndex, moveBy);
+                }
+            }
+        }
+
+        private void Grid_Drop_Top(object sender, DragEventArgs e)
+        {
+            HandleGridDrop(sender, e, 1);
+        }
+
+        private void Grid_Drop_Bottom(object sender, DragEventArgs e)
+        {
+            HandleGridDrop(sender, e, 0);
+        }
     }
 }

PixiEditor/Views/UserControls/LayerStructureItemContainer.xaml

@@ -5,7 +5,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:PixiEditor.Views.UserControls"
              xmlns:vws="clr-namespace:PixiEditor.Views" xmlns:ui="clr-namespace:PixiEditor.Helpers.UI" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
              d:DesignHeight="60" d:DesignWidth="250" Name="layerStructureContainer">
     <UserControl.Resources>
         <converters:IndexOfConverter x:Key="IndexOfConverter"/>
@@ -17,7 +17,7 @@
                 </ItemsPanelTemplate>
             </ItemsControl.ItemsPanel>
             <ItemsControl.ItemTemplate>
-                <DataTemplate>
+            <DataTemplate>
                 <vws:LayerItem Tag="{Binding ElementName=layerStructureContainer}"
                                SetActiveLayerCommand="{Binding LayerCommandsViewModel.SetActiveLayerCommand, ElementName=layerStructureContainer}"
                                        LayerName="{Binding Name, Mode=TwoWay}" 
@@ -33,8 +33,8 @@
                             <Binding Path="(ItemsControl.AlternationIndex)" RelativeSource="{RelativeSource TemplatedParent}"/>
                         </MultiBinding>
                     </vws:LayerItem.LayerIndex>
-                        <vws:LayerItem.ContextMenu>
-                            <ContextMenu>
+                    <vws:LayerItem.ContextMenu>
+                        <ContextMenu>
                             <MenuItem Header="Delete"
                                          Command="{Binding PlacementTarget.Tag.LayerCommandsViewModel.DeleteLayersCommand, 
                                             RelativeSource={RelativeSource AncestorType=ContextMenu}}">
@@ -75,8 +75,8 @@
                                     </MultiBinding>
                                 </MenuItem.CommandParameter>
                             </MenuItem>
-                                <Separator/>
-                                <MenuItem Header="Merge selected"
+                            <Separator/>
+                            <MenuItem Header="Merge selected"
                                      Command="{Binding PlacementTarget.Tag.LayerCommandsViewModel.MergeSelectedCommand, 
                                             RelativeSource={RelativeSource AncestorType=ContextMenu}}"/>
                             <MenuItem Header="Merge with above"
@@ -92,7 +92,7 @@
                             <MenuItem Header="Merge with below"
                                     Command="{Binding PlacementTarget.Tag.LayerCommandsViewModel.MergeWithBelowCommand, 
                                             RelativeSource={RelativeSource AncestorType=ContextMenu}}">
-                                 <MenuItem.CommandParameter>
+                                <MenuItem.CommandParameter>
                                     <MultiBinding Converter="{StaticResource IndexOfConverter}">
                                         <Binding Path="PlacementTarget.Tag.ContainerIndex" RelativeSource="{RelativeSource AncestorType=ContextMenu}" />
                                         <Binding Path="(ItemsControl.AlternationIndex)" RelativeSource="{RelativeSource TemplatedParent}"/>
@@ -100,9 +100,9 @@
                                 </MenuItem.CommandParameter>
                             </MenuItem>
                         </ContextMenu>
-                        </vws:LayerItem.ContextMenu>
-                    </vws:LayerItem>
-                </DataTemplate>
+                    </vws:LayerItem.ContextMenu>
+                </vws:LayerItem>
+            </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>
 </UserControl>

PixiEditor/Views/UserControls/LayersManager.xaml

@@ -30,7 +30,7 @@
                     IsEnabled="{Binding Path=OpacityInputEnabled, ElementName=layersManager}" 
                     Width="40" Height="20"
                     VerticalAlignment="Center"
-                    Value="{Binding LayerOpacity, Mode=TwoWay, 
+                    Value="{Binding LayerOpacity, Mode=TwoWay,
                     Converter={StaticResource FloatNormalizeConverter}, ElementName=layersManager}" />
             <Label Content="%" Foreground="White" VerticalAlignment="Center"/>
         </StackPanel>
@@ -45,7 +45,8 @@
                 </ItemsControl.ItemsPanel>
                 <ItemsControl.ItemTemplate>
                     <DataTemplate>
-                        <local:LayerStructureItemContainer Item="{Binding}" ContainerIndex="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource TemplatedParent}}"
+                        <local:LayerStructureItemContainer MouseMove="LayerStructureItemContainer_MouseMove"
+                            Item="{Binding}" ContainerIndex="{Binding Path=(ItemsControl.AlternationIndex), RelativeSource={RelativeSource TemplatedParent}}"
                                                            LayerCommandsViewModel="{Binding LayerCommandsViewModel, ElementName=layersManager}"/>
                     </DataTemplate>
                 </ItemsControl.ItemTemplate>

PixiEditor/Views/UserControls/LayersManager.xaml.cs

@@ -46,7 +46,7 @@ namespace PixiEditor.Views.UserControls
         // Using a DependencyProperty as the backing store for LayerCommandsViewModel.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty LayerCommandsViewModelProperty =
             DependencyProperty.Register("LayerCommandsViewModel", typeof(LayersViewModel), typeof(LayersManager), new PropertyMetadata(default(LayersViewModel)));
-      
+
         public bool OpacityInputEnabled
         {
             get { return (bool)GetValue(OpacityInputEnabledProperty); }
@@ -61,5 +61,14 @@ namespace PixiEditor.Views.UserControls
         {
             InitializeComponent();
         }
+
+        private void LayerStructureItemContainer_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
+        {
+            LayerStructureItemContainer container = sender as LayerStructureItemContainer;
+            if (container != null && e.LeftButton == System.Windows.Input.MouseButtonState.Pressed)
+            {
+                DragDrop.DoDragDrop(container, container, DragDropEffects.Move);
+            }
+        }
     }
 }