Merge remote-tracking branch 'origin/prototype-integration' into prototype-integration

src/PixiEditor/Models/DocumentModels/DocumentUpdater.cs

@@ -228,8 +228,8 @@ internal class DocumentUpdater
         }
         memberVm.SetHasMask(info.HasMask);
         memberVm.RaisePropertyChanged(nameof(memberVm.MaskPreviewBitmap));
-        if (!info.HasMask)
-            memberVm.ShouldDrawOnMask = false;
+        if (!info.HasMask && memberVm is LayerViewModel layer)
+            layer.ShouldDrawOnMask = false;
     }
 
     private void ProcessRefreshViewport(RefreshViewport_PassthroughAction info)

src/PixiEditor/Models/DocumentModels/UpdateableChangeExecutors/EraserToolExecutor.cs

@@ -23,7 +23,7 @@ internal class EraserToolExecutor : UpdateableChangeExecutor
         BasicToolbar? toolbar = eraserTool?.Toolbar as BasicToolbar;
         if (vm is null || eraserTool is null || member is null || toolbar is null)
             return ExecutionState.Error;
-        drawOnMask = member.ShouldDrawOnMask;
+        drawOnMask = member is LayerViewModel layer ? layer.ShouldDrawOnMask : true;
         if (drawOnMask && !member.HasMaskBindable)
             return ExecutionState.Error;
         if (!drawOnMask && member is not LayerViewModel)

src/PixiEditor/Models/DocumentModels/UpdateableChangeExecutors/LineToolExecutor.cs

@@ -17,12 +17,12 @@ internal class LineToolExecutor : ShapeToolExecutor<LineToolViewModel>
         StructureMemberViewModel? member = document?.SelectedStructureMember;
         if (colorsVM is null || toolbar is null || member is null)
             return ExecutionState.Error;
-        drawOnMask = member.ShouldDrawOnMask;
+        drawOnMask = member is LayerViewModel layer ? layer.ShouldDrawOnMask : true;
         if (drawOnMask && !member.HasMaskBindable)
             return ExecutionState.Error;
         if (!drawOnMask && member is not LayerViewModel)
             return ExecutionState.Error;
-        
+
         startPos = controller!.LastPixelPosition;
         strokeColor = colorsVM.PrimaryColor;
         strokeWidth = toolbar.ToolSize;

src/PixiEditor/Models/DocumentModels/UpdateableChangeExecutors/PenToolExecutor.cs

@@ -23,7 +23,7 @@ internal class PenToolExecutor : UpdateableChangeExecutor
         PenToolbar? toolbar = penTool?.Toolbar as PenToolbar;
         if (vm is null || penTool is null || member is null || toolbar is null)
             return ExecutionState.Error;
-        drawOnMask = member.ShouldDrawOnMask;
+        drawOnMask = member is LayerViewModel layer ? layer.ShouldDrawOnMask : true;
         if (drawOnMask && !member.HasMaskBindable)
             return ExecutionState.Error;
         if (!drawOnMask && member is not LayerViewModel)

src/PixiEditor/Models/DocumentModels/UpdateableChangeExecutors/ShapeToolExecutor.cs

@@ -21,7 +21,7 @@ internal abstract class ShapeToolExecutor<T> : UpdateableChangeExecutor where T
     protected T? toolViewModel;
     protected VecI startPos;
     protected RectI lastRect;
-    
+
     public override ExecutionState Start()
     {
         ColorsViewModel? colorsVM = ViewModelMain.Current?.ColorsSubViewModel;
@@ -30,7 +30,7 @@ internal abstract class ShapeToolExecutor<T> : UpdateableChangeExecutor where T
         StructureMemberViewModel? member = document?.SelectedStructureMember;
         if (colorsVM is null || toolbar is null || member is null)
             return ExecutionState.Error;
-        drawOnMask = member.ShouldDrawOnMask;
+        drawOnMask = member is LayerViewModel layer ? layer.ShouldDrawOnMask : true;
         if (drawOnMask && !member.HasMaskBindable)
             return ExecutionState.Error;
         if (!drawOnMask && member is not LayerViewModel)
@@ -55,12 +55,12 @@ internal abstract class ShapeToolExecutor<T> : UpdateableChangeExecutor where T
     {
         if (!transforming)
             return;
-        
+
         var rect = (RectI)RectD.FromCenterAndSize(corners.RectCenter, corners.RectSize);
         ShapeData shapeData = new ShapeData(rect.Center, rect.Size, corners.RectRotation, strokeWidth, strokeColor,
             fillColor);
         IAction drawAction = TransformMovedAction(shapeData, corners);
-        
+
         helpers!.ActionAccumulator.AddActions(drawAction);
     }
 
@@ -75,7 +75,7 @@ internal abstract class ShapeToolExecutor<T> : UpdateableChangeExecutor where T
     {
         if (transforming)
             return;
-        
+
         DrawShape(pos);
     }
 
@@ -86,7 +86,7 @@ internal abstract class ShapeToolExecutor<T> : UpdateableChangeExecutor where T
         transforming = true;
         document!.TransformViewModel.ShowFixedAngleShapeTransform(new ShapeCorners(lastRect));
     }
-    
+
     public override void ForceStop()
     {
         if (transforming)

src/PixiEditor/Styles/ComboBoxDarkStyle.xaml

@@ -1,6 +1,7 @@
 <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:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"
+                    xmlns:controls="clr-namespace:PixiEditor.Views.UserControls">
 
     <SolidColorBrush x:Key="ComboBox.Static.Background" Color="#252525" />
     <SolidColorBrush x:Key="ComboBox.Static.Border" Color="#2F2F37" />
@@ -253,6 +254,11 @@
         <Setter Property="Template" Value="{DynamicResource DarkComboBox}" />
     </Style>
 
+    <Style TargetType="controls:BlendModeComboBox">
+        <Setter Property="Foreground" Value="White" />
+        <Setter Property="Template" Value="{DynamicResource DarkComboBox}" />
+    </Style>
+    
     <Style TargetType="ComboBoxItem">
         <Setter Property="Background" Value="#111111" />
         <Setter Property="Foreground" Value="White" />

src/PixiEditor/ViewModels/SubViewModels/Document/LayerViewModel.cs

@@ -19,6 +19,20 @@ internal class LayerViewModel : StructureMemberViewModel
                 Helpers.ActionAccumulator.AddFinishedActions(new LayerLockTransparency_Action(GuidValue, value));
         }
     }
+
+    private bool shouldDrawOnMask = false;
+    public bool ShouldDrawOnMask
+    {
+        get => shouldDrawOnMask;
+        set
+        {
+            if (value == shouldDrawOnMask)
+                return;
+            shouldDrawOnMask = value;
+            RaisePropertyChanged(nameof(ShouldDrawOnMask));
+        }
+    }
+
     public LayerViewModel(DocumentViewModel doc, DocumentHelpers helpers, Guid guidValue) : base(doc, helpers, guidValue)
     {
     }

src/PixiEditor/ViewModels/SubViewModels/Document/StructureMemberViewModel.cs

@@ -128,19 +128,6 @@ internal abstract class StructureMemberViewModel : INotifyPropertyChanged
 
     public StructureMemberSelectionType Selection { get; set; }
 
-    private bool shouldDrawOnMask = false;
-    public bool ShouldDrawOnMask
-    {
-        get => shouldDrawOnMask;
-        set
-        {
-            if (value == shouldDrawOnMask)
-                return;
-            shouldDrawOnMask = value;
-            PropertyChanged?.Invoke(this, new(nameof(ShouldDrawOnMask)));
-        }
-    }
-
     public const int PreviewSize = 48;
     public WriteableBitmap PreviewBitmap { get; set; }
     public SKSurface PreviewSurface { get; set; }

src/PixiEditor/ViewModels/SubViewModels/Main/LayersViewModel.cs

@@ -239,17 +239,32 @@ internal class LayersViewModel : SubViewModel<ViewModelMain>
         doc!.DeleteMask(member.GuidValue);
     }
 
+    [Evaluator.CanExecute("PixiEditor.Layer.CanEnableClipToMemberBelow")]
+    public bool CanClipToMemberBelow() => !Owner.DocumentManagerSubViewModel.ActiveDocument?.SelectedStructureMember?.ClipToMemberBelowEnabledBindable ?? false;
+    [Evaluator.CanExecute("PixiEditor.Layer.CanDisableClipToMemberBelow")]
+    public bool CanDisableClipToMemberBelow() => Owner.DocumentManagerSubViewModel.ActiveDocument?.SelectedStructureMember?.ClipToMemberBelowEnabledBindable ?? false;
+
+    [Command.Basic("PixiEditor.Layer.EnableClipToMemberBelow", "Clip to layer below", "Clip to layer below", Parameter = true, CanExecute = "PixiEditor.Layer.CanEnableClipToMemberBelow")]
+    [Command.Basic("PixiEditor.Layer.DisableClipToMemberBelow", "Disable clip to layer below", "Disable clip to layer below", Parameter = false, CanExecute = "PixiEditor.Layer.CanDisableClipToMemberBelow")]
+    public void ToogleClipToMemberBelow(bool newValue)
+    {
+        var member = Owner.DocumentManagerSubViewModel.ActiveDocument?.SelectedStructureMember;
+        if (member is null || member.ClipToMemberBelowEnabledBindable == newValue)
+            return;
+        member.ClipToMemberBelowEnabledBindable = newValue;
+    }
+
     [Evaluator.CanExecute("PixiEditor.Layer.HasMemberAbove")]
     public bool HasMemberAbove(object property) => HasSelectedMember(true);
     [Evaluator.CanExecute("PixiEditor.Layer.HasMemberBelow")]
     public bool HasMemberBelow(object property) => HasSelectedMember(false);
 
-    [Command.Basic("PixiEditor.Layer.MoveSelectedMemberUpwards", "Move selected layer or folder upwards", "Move selected layer or folder upwards", CanExecute = "PixiEditor.Layer.HasMemberAbove")]
+    [Command.Basic("PixiEditor.Layer.MoveSelectedMemberUpwards", "Move selected layer upwards", "Move selected layer or folder upwards", CanExecute = "PixiEditor.Layer.HasMemberAbove")]
     public void MoveSelectedMemberUpwards(object parameter) => MoveSelectedMember(true);
-    [Command.Basic("PixiEditor.Layer.MoveSelectedMemberDownwards", "Move selected layer or folder downwards", "Move selected layer or folder downwards", CanExecute = "PixiEditor.Layer.HasMemberBelow")]
+    [Command.Basic("PixiEditor.Layer.MoveSelectedMemberDownwards", "Move selected layer downwards", "Move selected layer or folder downwards", CanExecute = "PixiEditor.Layer.HasMemberBelow")]
     public void MoveSelectedMemberDownwards(object parameter) => MoveSelectedMember(false);
 
-    [Command.Basic("PixiEditor.Layer.MergeSelected", "Merge all selected layers/folders", "Merge all selected layers/folders", CanExecute = "PixiEditor.Layer.HasMultipleSelectedMembers")]
+    [Command.Basic("PixiEditor.Layer.MergeSelected", "Merge all selected layers", "Merge all selected layers", CanExecute = "PixiEditor.Layer.HasMultipleSelectedMembers")]
     public void MergeSelected(object parameter)
     {
         var doc = Owner.DocumentManagerSubViewModel.ActiveDocument;

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

@@ -9,9 +9,10 @@
              xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" xmlns:helpers="clr-namespace:PixiEditor.Helpers.UI"
              xmlns:userControls1="clr-namespace:PixiEditor.Views.UserControls"
              xmlns:cmds="clr-namespace:PixiEditor.Models.Commands.XAML"
+             xmlns:sys="clr-namespace:System;assembly=mscorlib"
              mc:Ignorable="d" 
              Focusable="True"
-             d:DesignHeight="60" 
+             d:DesignHeight="35" 
              d:DesignWidth="250" 
              x:Name="folderControl" 
              DragEnter="FolderControl_DragEnter" 
@@ -45,7 +46,7 @@
             <Grid Visibility="Collapsed" x:Name="middleDropGrid" Grid.Row="1" AllowDrop="True" Panel.ZIndex="2" Background="Transparent" DragEnter="Grid_CenterEnter" Drop="Grid_Drop_Center" DragLeave="Grid_CenterLeave"></Grid>
             <Grid x:Name="centerGrid" Grid.Row="0" Grid.RowSpan="3" Background="Transparent">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="30"/>
+                    <ColumnDefinition Width="24"/>
                     <ColumnDefinition Width="*"/>
                 </Grid.ColumnDefinitions>
                 <CheckBox Style="{StaticResource ImageCheckBox}" VerticalAlignment="Center"
@@ -54,10 +55,11 @@
 
                 <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left">
                     <Rectangle Width="{Binding Path=(helpers:TreeViewItemHelper.Indent).Value, Mode=OneWay, RelativeSource={RelativeSource AncestorType=ItemsPresenter}}" Fill="Transparent" StrokeThickness="0"/>
-
+                    <Border 
+                        Visibility="{Binding Folder.ClipToMemberBelowEnabledBindable, ElementName=folderControl, Converter={converters:BoolToVisibilityConverter}}"
+                        Background="{StaticResource PixiRed}" Width="3" Margin="1,1,2,1" CornerRadius="1"/>
                     <StackPanel Grid.Row="1" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
-                        <Border Width="30" Height="30" BorderThickness="1" BorderBrush="Black" Background="{StaticResource MainColor}"
-                           Margin="5, 0, 10, 0">
+                        <Border Width="30" Height="30" BorderThickness="1" BorderBrush="Black" Background="{StaticResource MainColor}">
                             <Image Source="{Binding Folder.PreviewBitmap, ElementName=folderControl}" Stretch="Uniform" Width="20" Height="20">
                                 <RenderOptions.BitmapScalingMode>
                                     <MultiBinding Converter="{converters:WidthToBitmapScalingModeConverter}">
@@ -67,11 +69,47 @@
                                 </RenderOptions.BitmapScalingMode>
                             </Image>
                         </Border>
-                        <userControls1:EditableTextBlock
+                        <Border 
+                            Width="30" Height="30" 
+                            BorderThickness="1" 
+                            Background="{StaticResource MainColor}"
+                            Margin="3,0,0,0"
+                            Visibility="{Binding Folder.HasMaskBindable, ElementName=folderControl, Converter={converters:BoolToVisibilityConverter}}"
+                            BorderBrush="White">
+                            <Grid IsHitTestVisible="False">
+                                <Image Source="{Binding Folder.MaskPreviewBitmap,ElementName=folderControl}" Stretch="Uniform" Width="20" Height="20"
+                           RenderOptions.BitmapScalingMode="NearestNeighbor" IsHitTestVisible="False"/>
+                                <Path 
+                                Data="M 2 0 L 10 8 L 18 0 L 20 2 L 12 10 L 20 18 L 18 20 L 10 12 L 2 20 L 0 18 L 8 10 L 0 2 Z" 
+                                Fill="{StaticResource PixiRed}" HorizontalAlignment="Center" VerticalAlignment="Center"
+                                Visibility="{Binding Folder.MaskIsVisibleBindable, ElementName=folderControl, Converter={InverseBoolToVisibilityConverter}}"/>
+                            </Grid>
+                        </Border>
+                        <StackPanel Orientation="Vertical"  Margin="3,0,5,0">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock d:Text="100" Foreground="White">
+                                    <TextBlock.Text>
+                                        <Binding ElementName="folderControl" Path="Folder.OpacityBindable" Converter="{converters:MultiplyConverter}" StringFormat="N0">
+                                            <Binding.ConverterParameter>
+                                                <sys:Double>100.0</sys:Double>
+                                            </Binding.ConverterParameter>
+                                        </Binding>
+                                    </TextBlock.Text>
+                                </TextBlock>
+                                <TextBlock Foreground="White">%</TextBlock>
+                                <TextBlock 
+                                Margin="5,0,0,0" 
+                                d:Text="Normal" 
+                                Foreground="White" 
+                                Text="{Binding Folder.BlendModeBindable, ElementName=folderControl, Converter={converters:BlendModeToStringConverter}}"/>
+                            </StackPanel>
+                            <userControls1:EditableTextBlock
                             x:Name="editableTextBlock"
-                            FontSize="15"
+                            d:Text="New Folder"
+                            FontSize="12"
                             VerticalAlignment="Center"
                             Text="{Binding Folder.NameBindable, ElementName=folderControl, Mode=TwoWay}" />
+                        </StackPanel>
                     </StackPanel>
                     <Image Source="/Images/Folder.png" Height="20" Margin="0,0,10,0" HorizontalAlignment="Right"/>
                 </StackPanel>
@@ -83,8 +121,22 @@
         </Grid>
         <Border.ContextMenu>
             <ContextMenu>
-                <MenuItem Header="Rename" Click="RenameMenuItem_Click"/>
                 <MenuItem Header="Delete" Command="{cmds:Command PixiEditor.Layer.DeleteAllSelected}"/>
+                <MenuItem Header="Rename" Click="RenameMenuItem_Click"/>
+                <MenuItem Header="Move upwards" Command="{cmds:Command PixiEditor.Layer.MoveSelectedMemberUpwards}"/>
+                <MenuItem Header="Move downwards" Command="{cmds:Command PixiEditor.Layer.MoveSelectedMemberDownwards}"/>
+                <Separator/>
+                <MenuItem Header="Clip to layer below" Command="{cmds:Command PixiEditor.Layer.EnableClipToMemberBelow}"/>
+                <MenuItem Header="Disable clip to layer below" Command="{cmds:Command PixiEditor.Layer.DisableClipToMemberBelow}"/>
+                <Separator/>
+                <MenuItem Header="Create mask" Command="{cmds:Command PixiEditor.Layer.CreateMask}"/>
+                <MenuItem Header="Delete mask" Command="{cmds:Command PixiEditor.Layer.DeleteMask}"/>
+                <MenuItem Header="Enable mask" Command="{cmds:Command PixiEditor.Layer.EnableMask}"/>
+                <MenuItem Header="Disable mask" Command="{cmds:Command PixiEditor.Layer.DisableMask}"/>
+                <Separator/>
+                <MenuItem Header="Merge selected" Command="{cmds:Command PixiEditor.Layer.MergeSelected}"/>
+                <MenuItem Header="Merge with above" Command="{cmds:Command PixiEditor.Layer.MergeWithAbove}"/>
+                <MenuItem Header="Merge with below" Command="{cmds:Command PixiEditor.Layer.MergeWithBelow}"/>
             </ContextMenu>
         </Border.ContextMenu>
     </Border>

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

@@ -52,6 +52,9 @@
                       Grid.Column="0" Height="16" />
                 <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left">
                     <Rectangle Width="{Binding Path=(helpers:TreeViewItemHelper.Indent).Value, Mode=OneWay, RelativeSource={RelativeSource AncestorType=ItemsPresenter}}" Fill="Transparent" StrokeThickness="0"/>
+                    <Border 
+                        Visibility="{Binding Layer.ClipToMemberBelowEnabledBindable, ElementName=uc, Converter={conv:BoolToVisibilityConverter}}"
+                        Background="{StaticResource PixiRed}" Width="3" Margin="1,1,2,1" CornerRadius="1"/>
                     <Border 
                         Width="30" Height="30" 
                         BorderThickness="1"
@@ -112,8 +115,10 @@
                             d:Text="New Layer"
                             Text="{Binding Layer.NameBindable, ElementName=uc, Mode=TwoWay}" />
                     </StackPanel>
-                    <WrapPanel Orientation="Vertical">
-                        
+                    <WrapPanel Orientation="Vertical" Margin="0,3,3,3" >
+                        <Grid Background="Black" Visibility="{Binding Layer.LockTransparencyBindable, ElementName=uc, Converter={BoolToVisibilityConverter}}">
+                            <Path Fill="White" Data="M 0 0 L 12 0 L 12 3 L 0 3 L 0 6 L 12 6 L 12 9 L 0 9 L 0 12 L 12 12 L 12 0 L 9 0 L 9 12 L 6 12 L 6 0 L 3 0 L 3 12 L 0 12 L 0 12 Z"/>
+                        </Grid>
                     </WrapPanel>
                 </StackPanel>
                 <Grid Margin="0, 0, 0, -2.5" DragEnter="Grid_DragEnter" VerticalAlignment="Bottom" Height="10" Drop="Grid_Drop_Below"  DragLeave="Grid_DragLeave" Grid.Row="2" Grid.Column="0" AllowDrop="True"  Background="Transparent" Name="dropBelowGrid"/>
@@ -130,6 +135,9 @@
                 <MenuItem Header="Move upwards" Command="{cmds:Command PixiEditor.Layer.MoveSelectedMemberUpwards}"/>
                 <MenuItem Header="Move downwards" Command="{cmds:Command PixiEditor.Layer.MoveSelectedMemberDownwards}"/>
                 <Separator/>
+                <MenuItem Header="Clip to layer below" Command="{cmds:Command PixiEditor.Layer.EnableClipToMemberBelow}"/>
+                <MenuItem Header="Disable clip to layer below" Command="{cmds:Command PixiEditor.Layer.DisableClipToMemberBelow}"/>
+                <Separator/>
                 <MenuItem Header="Create mask" Command="{cmds:Command PixiEditor.Layer.CreateMask}"/>
                 <MenuItem Header="Delete mask" Command="{cmds:Command PixiEditor.Layer.DeleteMask}"/>
                 <MenuItem Header="Enable mask" Command="{cmds:Command PixiEditor.Layer.EnableMask}"/>

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

@@ -18,7 +18,7 @@
              d:DesignHeight="450" d:DesignWidth="250" x:Name="layersManager">
     <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="75"/>
+            <RowDefinition Height="65"/>
             <RowDefinition Height="15"/>
             <RowDefinition Height="1*"/>
         </Grid.RowDefinitions>
@@ -27,31 +27,61 @@
                 <StackPanel Orientation="Horizontal" DockPanel.Dock="Left">
                     <Button Command="{commands:Command PixiEditor.Layer.NewLayer}" 
                         Height="24" Width="24" Cursor="Hand" ToolTip="New Layer"
-                                                HorizontalAlignment="Stretch" Margin="5"
-                                                Style="{StaticResource ToolButtonStyle}">
+                        HorizontalAlignment="Stretch" Margin="5,5,0,5"
+                        Style="{StaticResource ToolButtonStyle}">
                         <Button.Background>
                             <ImageBrush ImageSource="/Images/Layer-add.png"/>
                         </Button.Background>
                     </Button>
                     <Button Command="{commands:Command PixiEditor.Layer.NewFolder}" 
                         Height="24" Width="24" ToolTip="New Folder" Cursor="Hand"
-                                                HorizontalAlignment="Stretch" Margin="5"
+                                                HorizontalAlignment="Stretch"  Margin="5,5,0,5"
                                                 Style="{StaticResource ToolButtonStyle}">
                         <Button.Background>
                             <ImageBrush ImageSource="/Images/Folder-add.png"/>
                         </Button.Background>
                     </Button>
                     <Button Command="{commands:Command PixiEditor.Layer.DeleteSelected}" Height="24" Width="24" ToolTip="Delete selected" Cursor="Hand"
-                                                HorizontalAlignment="Stretch" Margin="5"
-                                                Style="{StaticResource ToolButtonStyle}">
+                            HorizontalAlignment="Stretch" Margin="5,5,0,5"
+                            Style="{StaticResource ToolButtonStyle}">
                         <Button.Background>
                             <ImageBrush ImageSource="/Images/Trash.png"/>
                         </Button.Background>
                     </Button>
                 </StackPanel>
                 <StackPanel Orientation="Horizontal" DockPanel.Dock="Right" Margin="0,0,10,0" HorizontalAlignment="Right" Focusable="True">
-                    <Slider
-                    Width="50"
+
+                </StackPanel>
+            </DockPanel>
+            <DockPanel>
+                <userControls:BlendModeComboBox
+                    DockPanel.Dock="Left"
+                    Margin="5,0"
+                    Width="80"
+                    SelectedBlendMode="{Binding ActiveDocument.SelectedStructureMember.BlendModeBindable, Mode=TwoWay, ElementName=layersManager}" />
+                <userControls:NumberInput
+                    Min="0" Max="100"
+                    x:Name="numberInput"
+                    d:Value="100"
+                    DockPanel.Dock="Right"
+                    IsEnabled="{Binding Path=ActiveDocument, ElementName=layersManager, Converter={converters:NotNullToVisibilityConverter}}" 
+                    Width="35" Height="20"
+                    Margin="0,0,5,0"
+                    VerticalAlignment="Center"
+                    LostFocus="NumberInput_LostFocus">
+                    <userControls:NumberInput.Value>
+                        <Binding
+                            Mode="TwoWay"
+                            ElementName="layersManager"
+                            Path="ActiveDocument.SelectedStructureMember.OpacityBindable"
+                            Converter="{converters:MultiplyConverter}">
+                            <Binding.ConverterParameter>
+                                <sys:Double>100</sys:Double>
+                            </Binding.ConverterParameter>
+                        </Binding>
+                    </userControls:NumberInput.Value>
+                </userControls:NumberInput>
+                <Slider
                     Minimum="0"
                     Maximum="1"
                     SmallChange="0.01"
@@ -60,43 +90,16 @@
                     x:Name="opacitySlider"
                     VerticalAlignment="Center"
                     HorizontalAlignment="Stretch">
-                        <i:Interaction.Behaviors>
-                            <beh:SliderUpdateBehavior
+                    <i:Interaction.Behaviors>
+                        <beh:SliderUpdateBehavior
                                 Binding="{Binding ElementName=layersManager, Path=ActiveDocument.SelectedStructureMember.OpacityBindable, Mode=OneWay}"
                                 DragStarted="{commands:Command PixiEditor.Layer.OpacitySliderDragStarted}"
                                 DragValueChanged="{commands:Command PixiEditor.Layer.OpacitySliderDragged, UseProvided=True}"
                                 DragEnded="{commands:Command PixiEditor.Layer.OpacitySliderDragEnded}"
                                 ValueFromSlider="{Binding ElementName=opacitySlider, Path=Value, Mode=TwoWay}" />
-                        </i:Interaction.Behaviors>
-                    </Slider>
-                    <userControls:NumberInput
-                    Min="0" Max="100"
-                    x:Name="numberInput"
-                    IsEnabled="{Binding Path=ActiveDocument, ElementName=layersManager, Converter={converters:NotNullToVisibilityConverter}}" 
-                    Width="40" Height="20"
-                    VerticalAlignment="Center"
-                    LostFocus="NumberInput_LostFocus">
-                        <userControls:NumberInput.Value>
-                            <Binding
-                            Mode="TwoWay"
-                            ElementName="layersManager"
-                            Path="ActiveDocument.SelectedStructureMember.OpacityBindable"
-                            Converter="{converters:MultiplyConverter}">
-                                <Binding.ConverterParameter>
-                                    <sys:Double>100</sys:Double>
-                                </Binding.ConverterParameter>
-                            </Binding>
-                        </userControls:NumberInput.Value>
-                    </userControls:NumberInput>
-                    <Label Content="%" Foreground="White" VerticalAlignment="Center"/>
-                </StackPanel>
+                    </i:Interaction.Behaviors>
+                </Slider>
             </DockPanel>
-            <StackPanel Orientation="Horizontal">
-                <userControls:BlendModeComboBox
-                            Margin="5,0"
-                            Width="80"
-                            SelectedBlendMode="{Binding ActiveDocument.SelectedStructureMember.BlendModeBindable, Mode=TwoWay, ElementName=layersManager}" />
-            </StackPanel>
         </StackPanel>
         <Separator Grid.Row="1" Margin="0,-12, 0, 0" BorderBrush="{StaticResource DarkerAccentColor}" BorderThickness="2" />
         <DockPanel LastChildFill="True" Grid.Row="2" Margin="0, -12, 0, 0">