Fixed layers ui order

PixiEditor/Helpers/UI/ReversedOrderStackPanel.cs

@@ -0,0 +1,44 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Windows;
+using System.Windows.Controls;
+
+namespace PixiEditor.Helpers.UI
+{
+    public class ReversedOrderStackPanel : StackPanel
+    {
+        protected override System.Windows.Size ArrangeOverride(System.Windows.Size arrangeSize)
+        {
+            bool fHorizontal = (Orientation == Orientation.Horizontal);
+            var rcChild = new Rect(arrangeSize);
+            double previousChildSize = 0.0;
+
+            var children = InternalChildren.Cast<UIElement>().Reverse();
+            foreach (UIElement child in children)
+            {
+                if (child == null)
+                    continue;
+
+                if (fHorizontal)
+                {
+                    rcChild.X += previousChildSize;
+                    previousChildSize = child.DesiredSize.Width;
+                    rcChild.Width = previousChildSize;
+                    rcChild.Height = Math.Max(arrangeSize.Height, child.DesiredSize.Height);
+                }
+                else
+                {
+                    rcChild.Y += previousChildSize;
+                    previousChildSize = child.DesiredSize.Height;
+                    rcChild.Height = previousChildSize;
+                    rcChild.Width = Math.Max(arrangeSize.Width, child.DesiredSize.Width);
+                }
+
+                child.Arrange(rcChild);
+            }
+
+            return arrangeSize;
+        }
+    }
+}

PixiEditor/PixiEditor.csproj

@@ -35,8 +35,5 @@
     <Resource Include="Images\RectangleImage.png" />
     <Resource Include="Images\transparentbg.png" />
   </ItemGroup>
-  <ItemGroup>
-    <Folder Include="Helpers\UI\" />
-  </ItemGroup>
   
 </Project>

PixiEditor/Views/MainWindow.xaml

@@ -9,7 +9,8 @@
         xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours"
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
-        xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
+        xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
+        xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
         mc:Ignorable="d"
         Title="PixiEditor" Height="1000" Width="1600" Background="#FF252424" WindowStartupLocation="CenterScreen"  WindowState="Maximized" DataContext="{DynamicResource ViewModelMain}">
     <Window.Resources>
@@ -223,17 +224,22 @@
                             <StackPanel  Orientation="Vertical">
                                 <Button Command="{Binding NewLayerCommand}" Height="30" Content="New Layer" HorizontalAlignment="Stretch" Margin="5" Style="{StaticResource DarkRoundButton}"/>
                                     <ItemsControl ItemsSource="{Binding BitmapUtility.Layers}" AlternationCount="9999">
+                                        <ItemsControl.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <ui:ReversedOrderStackPanel Orientation="Vertical"/>
+                                            </ItemsPanelTemplate>
+                                        </ItemsControl.ItemsPanel>
                                         <ItemsControl.ItemTemplate>
-                                        <DataTemplate>
-                                            <Border BorderBrush="Gray" BorderThickness="1">
+                                            <DataTemplate>
+                                                <Border BorderThickness="1" BorderBrush="Gray" MinWidth="60">
                                                 <DockPanel>
                                                     <CheckBox VerticalAlignment="Center" Command="{Binding Path=DataContext.ReloadImageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" IsThreeState="False" IsChecked="{Binding Path=IsVisible}"/>
                                                     <Button Style="{StaticResource BaseDarkButton}" Background="Transparent" FontSize="16" DockPanel.Dock="Left" Content="{Binding Name}" Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, 
                             Path=DataContext.SetActiveLayerCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
                             Path=(ItemsControl.AlternationIndex)}"/>
                                                 </DockPanel>
-                                            </Border>
-                                        </DataTemplate>
+                                                </Border>
+                                            </DataTemplate>
                                     </ItemsControl.ItemTemplate>
                                 </ItemsControl>
                             </StackPanel>