Merge with below button, improve scrollbars, make layers stretch horizontally all the way

src/PixiEditor/Images/Merge-downwards.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 6.3499199 6.3499199"
+   version="1.1"
+   id="svg1920"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="Merge-downwards.svg"
+   inkscape:export-filename="C:\Users\egor0\source\repos\PixiEditor\src\PixiEditor\Images\Merge-downwards.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1922"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="false"
+     inkscape:document-units="px"
+     showgrid="true"
+     units="px"
+     width="24mm"
+     showborder="false"
+     inkscape:showpageshadow="false"
+     inkscape:zoom="18.136363"
+     inkscape:cx="8.9874688"
+     inkscape:cy="12.957394"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="1272"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2247"
+       empspacing="2"
+       spacingy="0.13229"
+       spacingx="0.13229"
+       enabled="false"
+       visible="true"
+       dotted="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1917">
+    <marker
+       style="overflow:visible"
+       id="Arrow1Lstart"
+       refX="0.0"
+       refY="0.0"
+       orient="auto"
+       inkscape:stockid="Arrow1Lstart"
+       inkscape:isstock="true">
+      <path
+         transform="scale(0.8) translate(12.5,0)"
+         style="fill-rule:evenodd;fill:context-stroke;stroke:context-stroke;stroke-width:1.0pt"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         id="path7176" />
+    </marker>
+  </defs>
+  <g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="rect2406"
+       style="fill:none;stroke:#ffffff;stroke-width:0.52916;stroke-linecap:butt;stroke-linejoin:bevel"
+       d="M 2.38122,2.6458 H 2.6458 V 1.05832 c 0,-0.29315463 0.2360055,-0.52915998 0.5291601,-0.52915998 H 5.2916 c 0.2931547,0 0.52916,0.23600535 0.52916,0.52915998 v 2.11664 c 0,0.2931546 -0.236005,0.5291599 -0.5291601,0.5291599 L 3.70412,3.70412 V 3.9687"
+       sodipodi:nodetypes="ccsssssscc" />
+    <path
+       id="rect2406-0"
+       style="fill:none;stroke:#ffffff;stroke-width:2;stroke-opacity:1"
+       d="M 7,10 H 4 c -1.1079999,0 -2,0.892 -2,2 v 8 c 0,1.108 0.8920001,2 2,2 h 8 c 1.108,0 2,-0.892 2,-2 l 0,-3"
+       transform="scale(0.26458)"
+       sodipodi:nodetypes="cssssssc" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.52916;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 3.70412,2.6458 1.58748,4.76244"
+       id="path3902"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.52916;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 1.58748,3.70412 V 4.76244 H 2.6458"
+       id="path4182"
+       sodipodi:nodetypes="ccc" />
+  </g>
+</svg>

src/PixiEditor/PixiEditor.csproj

@@ -160,6 +160,7 @@
 		<None Remove="Images\hard-drive.png" />
 		<None Remove="Images\Layer-add.png" />
 		<None Remove="Images\Lock-alpha.png" />
+		<None Remove="Images\Merge-downwards.png" />
 		<None Remove="Images\MoveImage.png" />
 		<None Remove="Images\MoveViewportImage.png" />
 		<None Remove="Images\penMode.png" />
@@ -250,6 +251,7 @@
 		<Resource Include="Images\hard-drive.png" />
 		<Resource Include="Images\Layer-add.png" />
 		<Resource Include="Images\Lock-alpha.png" />
+		<Resource Include="Images\Merge-downwards.png" />
 		<Resource Include="Images\penMode.png" />
 		<Resource Include="Images\PixiBotLogo.png" />
 		<Resource Include="Images\PixiEditorLogo.png" />

src/PixiEditor/Styles/ComboBoxDarkStyle.xaml

@@ -1,7 +1,8 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"
-                    xmlns:controls="clr-namespace:PixiEditor.Views.UserControls">
+                    xmlns:controls="clr-namespace:PixiEditor.Views.UserControls"
+                    xmlns:sys="clr-namespace:System;assembly=mscorlib">
 
     <SolidColorBrush x:Key="ComboBox.Static.Background" Color="#252525" />
     <SolidColorBrush x:Key="ComboBox.Static.Border" Color="#2F2F37" />
@@ -188,11 +189,11 @@
             <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2"
                    IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                    Margin="1" Placement="Bottom">
-                <theme:SystemDropShadowChrome x:Name="shadow" Color="Transparent"
+                <theme:SystemDropShadowChrome x:Name="shadow" Color="Transparent" CornerRadius="5"
                                               MinWidth="{Binding ActualWidth, ElementName=templateRoot}"
                                               MaxHeight="{TemplateBinding MaxDropDownHeight}">
                     <Border x:Name="dropDownBorder"
-                            Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderThickness="1"
+                            Background="{StaticResource DarkerAccentColor}" BorderThickness="0"
                             BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}">
                         <ScrollViewer x:Name="DropDownScrollViewer">
                             <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
@@ -260,7 +261,7 @@
     </Style>
     
     <Style TargetType="ComboBoxItem">
-        <Setter Property="Background" Value="#111111" />
+        <Setter Property="Background" Value="{StaticResource DarkerAccentColor}" />
         <Setter Property="Foreground" Value="White" />
         <Setter Property="BorderThickness" Value="0" />
         <Setter Property="OverridesDefaultStyle" Value="True" />
@@ -268,8 +269,8 @@
             <Setter.Value>
                 <ControlTemplate TargetType="ComboBoxItem">
                     <Border Name="Bd" Background="{TemplateBinding Background}" BorderThickness="0">
-                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center"
-                                          VerticalAlignment="Center" />
+                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Stretch"
+                                          VerticalAlignment="Center" Margin="3,2"/>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsHighlighted" Value="True">
@@ -283,4 +284,22 @@
             </Setter.Value>
         </Setter>
     </Style>
+
+    <Style TargetType="Separator">
+        <Setter Property="Height"
+                Value="1" />
+        <Setter Property="Margin"
+                Value="0,4,0,4" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Separator">
+                    <Border BorderThickness="1">
+                        <Border.BorderBrush>
+                            <SolidColorBrush Color="#FF4D4D4D" />
+                        </Border.BorderBrush>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>

src/PixiEditor/Styles/DarkScrollBarStyle.xaml

@@ -8,7 +8,7 @@
     <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
     <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
     <SolidColorBrush x:Key="GlyphBrush" Color="#444" />
-    <SolidColorBrush x:Key="NormalBrush" Color="#888" />
+    <SolidColorBrush x:Key="NormalBrush" Color="#FF686868" />
     <SolidColorBrush x:Key="NormalBorderBrush" Color="#888" />
     <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#FF686868" />
     <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#888" />
@@ -27,8 +27,16 @@
                             <RowDefinition Height="Auto"/>
                         </Grid.RowDefinitions>
                         <ScrollContentPresenter Grid.Column="0" />
-                        <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Row="0" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
-                        <ScrollBar x:Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Grid.Column="0" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
+                        <ScrollBar x:Name="PART_VerticalScrollBar"
+                                   Grid.Row="0" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" 
+                                   Maximum="{TemplateBinding ScrollableHeight}" 
+                                   ViewportSize="{TemplateBinding ViewportHeight}" 
+                                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
+                        <ScrollBar x:Name="PART_HorizontalScrollBar" 
+                                   Orientation="Horizontal" Grid.Row="1" Grid.Column="0" 
+                                   Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" 
+                                   ViewportSize="{TemplateBinding ViewportWidth}" 
+                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
@@ -109,7 +117,7 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Thumb}">
-                    <Border CornerRadius="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0"  Width="Auto" Margin="8,0,-2,0"/>
+                    <Border CornerRadius="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Width="Auto" />
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
@@ -152,7 +160,7 @@
                     <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" />
                 </Track.DecreaseRepeatButton>
                 <Track.Thumb>
-                    <Thumb Height="10" Style="{StaticResource ScrollBarThumb}" Margin="0,1,0,1" Background="{StaticResource NormalBrush}" BorderBrush="{StaticResource NormalBorderBrush}" />
+                    <Thumb Style="{StaticResource ScrollBarThumb}" Margin="0,1,0,1" Background="{StaticResource NormalBrush}" BorderBrush="{StaticResource NormalBorderBrush}" />
                 </Track.Thumb>
                 <Track.IncreaseRepeatButton>
                     <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" />
@@ -167,11 +175,11 @@
         <Style.Triggers>
             <Trigger Property="Orientation" Value="Horizontal">
                 <Setter Property="Width" Value="Auto"/>
-                <Setter Property="Height" Value="18" />
+                <Setter Property="Height" Value="10" />
                 <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
             </Trigger>
             <Trigger Property="Orientation" Value="Vertical">
-                <Setter Property="Width" Value="18"/>
+                <Setter Property="Width" Value="10"/>
                 <Setter Property="Height" Value="Auto" />
                 <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
             </Trigger>

src/PixiEditor/Styles/TreeViewStyle.xaml

@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:views="clr-namespace:PixiEditor.Views.UserControls"
+                    xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" xmlns:local="clr-namespace:PixiEditor.Helpers.UI">
 
     <converters:IndentConverter x:Key="IndentConverter" />
@@ -66,6 +67,13 @@
         <Setter Property="Padding" Value="0,0,0,0"/>
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
         <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
+        <Setter Property="ItemsPanel">
+            <Setter.Value>
+                <ItemsPanelTemplate>
+                    <ui:ReversedOrderStackPanel />
+                </ItemsPanelTemplate>
+            </Setter.Value>
+        </Setter>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type TreeViewItem}">

src/PixiEditor/Views/UserControls/Layers/LayerControl.xaml

@@ -105,7 +105,7 @@
                             <TextBlock 
                                 Margin="5,0,0,0" 
                                 d:Text="Normal" 
-                                Foreground="White" 
+                                Foreground="White"
                                 Text="{Binding Layer.BlendModeBindable, ElementName=uc, Converter={conv:BlendModeToStringConverter}}"/>
                         </StackPanel>
                         <controls:EditableTextBlock

src/PixiEditor/Views/UserControls/Layers/LayersManager.xaml

@@ -54,7 +54,16 @@
                     </Button.Background>
                 </Button>
                 <Button 
-                    Height="24" Width="24" ToolTip="Delete selected" Cursor="Hand"
+                    Command="{commands:Command PixiEditor.Layer.MergeWithBelow}" Height="24" Width="24" ToolTip="Merge with below" Cursor="Hand"
+                    HorizontalAlignment="Stretch" Margin="5,5,0,5"
+                    DockPanel.Dock="Left"
+                    Style="{StaticResource ToolButtonStyle}">
+                    <Button.Background>
+                        <ImageBrush ImageSource="/Images/Merge-downwards.png"/>
+                    </Button.Background>
+                </Button>
+                <Button 
+                    Height="24" Width="24" ToolTip="Lock transparency" Cursor="Hand"
                     DockPanel.Dock="Right"
                     HorizontalAlignment="Stretch" Margin="5"
                     Style="{StaticResource ToolButtonStyle}"
@@ -121,25 +130,12 @@
                 Visibility="{Binding Path=ActiveDocument, ElementName=layersManager, Converter={converters:NotNullToVisibilityConverter}}" 
                 Background="{StaticResource MainColor}" 
                 Grid.Row="3" VerticalAlignment="Bottom"/>
-            <TreeView DockPanel.Dock="Top" Name="treeView" ItemsSource="{Binding ActiveDocument.StructureRoot.Children, ElementName=layersManager}">
+            <TreeView ItemContainerStyle="{StaticResource TreeViewItemStyle}" DockPanel.Dock="Top" Name="treeView" ItemsSource="{Binding ActiveDocument.StructureRoot.Children, ElementName=layersManager}" HorizontalContentAlignment="Stretch">
                 <TreeView.ItemsPanel>
                     <ItemsPanelTemplate>
-                        <ui:ReversedOrderStackPanel/>
+                        <ui:ReversedOrderStackPanel />
                     </ItemsPanelTemplate>
                 </TreeView.ItemsPanel>
-                <TreeView.ItemContainerStyle>
-                    <Style
-                            TargetType="TreeViewItem">
-                        <Setter
-                                Property="ItemsPanel">
-                            <Setter.Value>
-                                <ItemsPanelTemplate>
-                                    <ui:ReversedOrderStackPanel />
-                                </ItemsPanelTemplate>
-                            </Setter.Value>
-                        </Setter>
-                    </Style>
-                </TreeView.ItemContainerStyle>
                 <TreeView.Resources>
                     <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                     <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />