Added layer item + layer opacity and fixed mouse not on canvas execution

PixiEditor/Helpers/Behaviours/TextBoxFocusBehavior.cs

@@ -91,7 +91,7 @@ namespace PixiEditor.Helpers.Behaviours
             if (_valueConverted || FillSize == false) return;
 
             if (int.TryParse(Regex.Replace(AssociatedObject.Text, "\\p{L}", ""), out int result) && result > 0)
-                AssociatedObject.Text = string.Format("{0} {1}", AssociatedObject.Text, "px");
+                AssociatedObject.Text = $"{AssociatedObject.Text} px";
             else //If text in textbox isn't number, set it to old value
                 AssociatedObject.Text = _oldText;
             _valueConverted = true;

PixiEditor/Helpers/Converters/BoolToColorConverter.cs

@@ -8,7 +8,7 @@ namespace PixiEditor.Helpers.Converters
     {
         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
         {
-            return value.ToString() == "Transparent";
+            return value?.ToString() == "Transparent";
         }
 
         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

PixiEditor/Helpers/Converters/FloatNormalizeConverter.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Text;
+using System.Windows.Data;
+
+namespace PixiEditor.Helpers.Converters
+{
+    public class FloatNormalizeConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) => 
+            (float)value * 100;
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => 
+            (float) value / 100;
+    }
+}

PixiEditor/Models/DataHolders/SerializableDocument.cs

@@ -46,7 +46,8 @@ namespace PixiEditor.Models.DataHolders
                     {
                         IsVisible = serLayer.IsVisible,
                         Name = serLayer.Name,
-                        Offset = new Thickness(serLayer.OffsetX, serLayer.OffsetY, 0, 0)
+                        Offset = new Thickness(serLayer.OffsetX, serLayer.OffsetY, 0, 0),
+                        Opacity = serLayer.Opacity
                     };
                 layers.Add(layer);
             }

PixiEditor/Models/Images/BitmapUtils.cs

@@ -45,6 +45,7 @@ namespace PixiEditor.Models.Images
                 for (int x = 0; x < finalBitmap.Width; x++)
                 {
                     Color color = layers[i].GetPixelWithOffset(x, y);
+                    color = Color.FromArgb((byte)(color.A * layers[i].Opacity), color.R,color.G, color.B);
                     if (color.A != 0 || color.R != 0 || color.B != 0 || color.G != 0) finalBitmap.SetPixel(x, y, color);
                 }
             }

PixiEditor/Models/Layers/Layer.cs

@@ -62,6 +62,18 @@ namespace PixiEditor.Models.Layers
             }
         }
 
+        private float _opacity = 1;
+
+        public float Opacity
+        {
+            get => _opacity;
+            set
+            {
+                _opacity = value;
+                RaisePropertyChanged("Opacity");
+            }
+        }
+
         public int OffsetX => (int) Offset.Left;
 
         public int OffsetY => (int) Offset.Top;

PixiEditor/Models/Layers/SerializableLayer.cs

@@ -12,6 +12,7 @@ namespace PixiEditor.Models.Layers
         public bool IsVisible { get; set; }
         public int OffsetX { get; set; }
         public int OffsetY { get; set; }
+        public float Opacity { get; set; }
 
         public SerializableLayer(Layer layer)
         {
@@ -22,6 +23,7 @@ namespace PixiEditor.Models.Layers
             IsVisible = layer.IsVisible;
             OffsetX = (int)layer.Offset.Left;
             OffsetY = (int)layer.Offset.Top;
+            Opacity = layer.Opacity;
         }
     }
 }

PixiEditor/Styles/ThemeColors.xaml

@@ -4,4 +4,6 @@
 
     <SolidColorBrush x:Key="MainColor" Color="#2D2D30" />
     <SolidColorBrush x:Key="AccentColor" Color="#252525" />
+    <SolidColorBrush x:Key="DarkerAccentColor" Color="#202020" />
+    <SolidColorBrush x:Key="BrighterAccentColor" Color="#3F3F46" />
 </ResourceDictionary>

PixiEditor/Styles/ThemeStyle.xaml

@@ -97,6 +97,32 @@
         <Setter Property="Foreground" Value="Snow" />
     </Style>
 
+    <Style TargetType="Button" x:Key="OpacityButtonStyle">
+        <Setter Property="OverridesDefaultStyle" Value="True" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border Name="brd" BorderBrush="{TemplateBinding BorderBrush}"
+                            Background="{TemplateBinding Background}"
+                            BorderThickness="{TemplateBinding BorderThickness}">
+                        <ContentPresenter />
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter Property="Opacity" Value="0.5" />
+                        </Trigger>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="Opacity" Value="1" />
+                        </Trigger>
+                        <Trigger Property="IsMouseOver" Value="False">
+                            <Setter Property="Opacity" Value="0.6" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style TargetType="Button" x:Key="ToolButtonStyle">
         <Setter Property="Height" Value="32" />
         <Setter Property="Width" Value="32" />

PixiEditor/ViewModels/ViewModelMain.cs

@@ -147,7 +147,6 @@ namespace PixiEditor.ViewModels
         public RelayCommand OpenFileCommand { get; set; }
         public RelayCommand SetActiveLayerCommand { get; set; }
         public RelayCommand NewLayerCommand { get; set; }
-        public RelayCommand ReloadImageCommand { get; set; }
         public RelayCommand DeleteLayerCommand { get; set; }
         public RelayCommand RenameLayerCommand { get; set; }
         public RelayCommand MoveToBackCommand { get; set; }
@@ -278,6 +277,8 @@ namespace PixiEditor.ViewModels
             }
         }
 
+        private bool _mouseMoveStartedOnCanvas = false;
+
         public ClipboardController ClipboardController { get; set; }
 
         private void CenterContent(object property)
@@ -593,18 +594,25 @@ namespace PixiEditor.ViewModels
         /// <param name="parameter"></param>
         private void MouseUp(object parameter)
         {
-            BitmapManager.MouseController.StopRecordingMouseMovementChanges();
+            if (_mouseMoveStartedOnCanvas)
+            {
+                BitmapManager.MouseController.StopRecordingMouseMovementChanges();
+                _mouseMoveStartedOnCanvas = false;
+            }
         }
 
         private void MouseDown(object parameter)
         {
             if (BitmapManager.ActiveDocument.Layers.Count == 0) return;
             if (Mouse.LeftButton == MouseButtonState.Pressed)
+            {
+                _mouseMoveStartedOnCanvas = true;
                 if (!BitmapManager.MouseController.IsRecordingChanges)
                 {
                     BitmapManager.MouseController.StartRecordingMouseMovementChanges();
                     BitmapManager.MouseController.RecordMouseMovementChange(MousePositionConverter.CurrentCoordinates);
                 }
+            }
         }
 
         /// <summary>
@@ -616,6 +624,9 @@ namespace PixiEditor.ViewModels
             Coordinates cords = new Coordinates((int) MouseXOnCanvas, (int) MouseYOnCanvas);
             MousePositionConverter.CurrentCoordinates = cords;
 
+            if (_mouseMoveStartedOnCanvas == false) return;
+
+
             if (BitmapManager.MouseController.IsRecordingChanges && Mouse.LeftButton == MouseButtonState.Pressed)
                 BitmapManager.MouseController.RecordMouseMovementChange(cords);
             else

PixiEditor/Views/LayerItem.xaml

@@ -0,0 +1,45 @@
+<UserControl x:Class="PixiEditor.Views.LayerItem"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             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:local="clr-namespace:PixiEditor.Views"
+             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+             mc:Ignorable="d" 
+             d:DesignHeight="60" d:DesignWidth="250" Name="uc" MouseLeave="LayerItem_OnMouseLeave" MouseEnter="LayerItem_OnMouseEnter">
+    <UserControl.Resources>
+        <converters:BoolToColorConverter x:Key="BoolToColorConverter" />
+    </UserControl.Resources>
+    <Border BorderThickness="1" BorderBrush="Gray" MinWidth="60"
+            Background="{Binding IsActive, Mode=TwoWay, Converter={StaticResource BoolToColorConverter}}">
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="35"/>
+                <ColumnDefinition Width="199*"/>
+                <ColumnDefinition Width="35"/>
+            </Grid.ColumnDefinitions>
+            <CheckBox VerticalAlignment="Center"
+                      IsThreeState="False" HorizontalAlignment="Center"
+                      IsChecked="{Binding Path=IsVisible, Mode=TwoWay}" Grid.Column="0" Height="16" />
+            <Button Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center"
+                    Style="{StaticResource BaseDarkButton}" FontSize="16"
+                    Command="{Binding ElementName=uc, 
+                            Path=SetActiveLayerCommand}"
+                    CommandParameter="{Binding Path=LayerIndex, ElementName=uc}" Grid.Column="1">
+                <local:EditableTextBlock
+                    IsEditing="{Binding IsRenaming, ElementName=uc, Mode=TwoWay}"
+                    Text="{Binding LayerName, ElementName=uc, Mode=TwoWay}" />
+            </Button>
+            <StackPanel Visibility="{Binding Path=ControlButtonsVisible, ElementName=uc}" 
+                        Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" 
+                        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>
+        </Grid>
+    </Border>
+</UserControl>

PixiEditor/Views/LayerItem.xaml.cs

@@ -0,0 +1,114 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+using PixiEditor.Helpers;
+
+namespace PixiEditor.Views
+{
+    /// <summary>
+    /// Interaction logic for LayerItem.xaml
+    /// </summary>
+    public partial class LayerItem : UserControl
+    {
+        public LayerItem()
+        {
+            InitializeComponent();
+        }
+
+        public static readonly DependencyProperty IsRenamingProperty = DependencyProperty.Register(
+            "IsRenaming", typeof(bool), typeof(LayerItem), new PropertyMetadata(default(bool)));
+
+        public bool IsRenaming
+        {
+            get { return (bool) GetValue(IsRenamingProperty); }
+            set { SetValue(IsRenamingProperty, value); }
+        }
+
+        public static readonly DependencyProperty IsActiveProperty = DependencyProperty.Register(
+            "IsActive", typeof(bool), typeof(LayerItem), new PropertyMetadata(default(bool)));
+
+        public bool IsActive
+        {
+            get { return (bool) GetValue(IsActiveProperty); }
+            set { SetValue(IsActiveProperty, value); }
+        }
+
+        public static readonly DependencyProperty SetActiveLayerCommandProperty = DependencyProperty.Register(
+            "SetActiveLayerCommand", typeof(RelayCommand), typeof(LayerItem), new PropertyMetadata(default(RelayCommand)));
+
+        public RelayCommand SetActiveLayerCommand
+        {
+            get { return (RelayCommand) GetValue(SetActiveLayerCommandProperty); }
+            set { SetValue(SetActiveLayerCommandProperty, value); }
+        }
+
+        public static readonly DependencyProperty LayerIndexProperty = DependencyProperty.Register(
+            "LayerIndex", typeof(int), typeof(LayerItem), new PropertyMetadata(default(int)));
+
+        public int LayerIndex
+        {
+            get { return (int) GetValue(LayerIndexProperty); }
+            set { SetValue(LayerIndexProperty, value); }
+        }
+
+        public static readonly DependencyProperty LayerNameProperty = DependencyProperty.Register(
+            "LayerName", typeof(string), typeof(LayerItem), new PropertyMetadata(default(string)));
+
+        public string LayerName
+        {
+            get { return (string) GetValue(LayerNameProperty); }
+            set { SetValue(LayerNameProperty, value); }
+        }
+
+        public static readonly DependencyProperty ControlButtonsVisibleProperty = DependencyProperty.Register(
+            "ControlButtonsVisible", typeof(Visibility), typeof(LayerItem), new PropertyMetadata(System.Windows.Visibility.Hidden));
+
+        public Visibility ControlButtonsVisible
+        {
+            get { return (Visibility) GetValue(ControlButtonsVisibleProperty); }
+            set { SetValue(ControlButtonsVisibleProperty, value); }
+        }
+
+
+
+        public RelayCommand MoveToBackCommand
+        {
+            get { return (RelayCommand)GetValue(MoveToBackCommandProperty); }
+            set { SetValue(MoveToBackCommandProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for MoveToBackCommand.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty MoveToBackCommandProperty =
+            DependencyProperty.Register("MoveToBackCommand", typeof(RelayCommand), typeof(LayerItem), new PropertyMetadata(default(RelayCommand)));
+
+        public static readonly DependencyProperty MoveToFrontCommandProperty = DependencyProperty.Register(
+            "MoveToFrontCommand", typeof(RelayCommand), typeof(LayerItem), new PropertyMetadata(default(RelayCommand)));
+
+        public RelayCommand MoveToFrontCommand
+        {
+            get { return (RelayCommand) GetValue(MoveToFrontCommandProperty); }
+            set { SetValue(MoveToFrontCommandProperty, value); }
+        }
+
+
+        private void LayerItem_OnMouseEnter(object sender, MouseEventArgs e)
+        {
+            ControlButtonsVisible = Visibility.Visible;
+        }
+
+        private void LayerItem_OnMouseLeave(object sender, MouseEventArgs e)
+        {
+            ControlButtonsVisible = Visibility.Hidden;
+
+        }
+    }
+}

PixiEditor/Views/MainWindow.xaml

@@ -25,6 +25,7 @@
         <helpers:ToolSizeToIntConverter x:Key="ToolSizeToIntConverter" />
         <converters:BoolToColorConverter x:Key="BoolToColorConverter" />
         <converters:BoolToIntConverter x:Key="BoolToIntConverter" />
+        <converters:FloatNormalizeConverter x:Key="FloatNormalizeConverter" />
     </Window.Resources>
 
     <Window.CommandBindings>
@@ -185,6 +186,7 @@
                                         <Image VerticalAlignment="Top" HorizontalAlignment="Left" Source="{Binding LayerBitmap}"
                                                Visibility="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"
                                                RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="Uniform"
+                                               Opacity="{Binding Opacity}"
                                                Width="{Binding Width}" Height="{Binding Height}" Margin="{Binding Offset}" />
                                     </DataTemplate>
                                 </ItemsControl.ItemTemplate>
@@ -243,6 +245,14 @@
                                     <Button Command="{Binding NewLayerCommand}" Height="30" Content="New Layer"
                                             HorizontalAlignment="Stretch" Margin="5"
                                             Style="{StaticResource DarkRoundButton}" />
+                                    <StackPanel Orientation="Horizontal" Margin="10,0">
+                                        <Label Content="Opacity" Foreground="White" VerticalAlignment="Center"/>
+                                        <vws:NumberInput Min="0" Max="100" Width="40" Height="20" VerticalAlignment="Center"
+                                                         Value="{Binding BitmapManager.ActiveDocument.ActiveLayer.Opacity, Mode=TwoWay, 
+                                            Converter={StaticResource FloatNormalizeConverter}}" />
+                                        <Label Content="%" Foreground="White" VerticalAlignment="Center"/>
+                                    </StackPanel>
+                                    <Separator Background="{StaticResource BrighterAccentColor}" Margin="0,10,0,10"/>
                                     <ItemsControl ItemsSource="{Binding BitmapManager.ActiveDocument.Layers}"
                                                   x:Name="layersItemsControl" AlternationCount="9999">
                                         <ItemsControl.ItemsPanel>
@@ -252,46 +262,33 @@
                                         </ItemsControl.ItemsPanel>
                                         <ItemsControl.ItemTemplate>
                                             <DataTemplate>
-                                                <Border BorderThickness="1" BorderBrush="Gray" MinWidth="60"
-                                                        Background="{Binding IsActive, Mode=TwoWay, Converter={StaticResource BoolToColorConverter}}">
-                                                    <DockPanel>
-                                                        <CheckBox VerticalAlignment="Center"
-                                                                  Command="{Binding Path=DataContext.ReloadImageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
-                                                                  IsThreeState="False"
-                                                                  IsChecked="{Binding Path=IsVisible}" />
-                                                        <Button Background="Transparent"
-                                                                Style="{StaticResource BaseDarkButton}" FontSize="16"
-                                                                DockPanel.Dock="Left"
-                                                                Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, 
-                            Path=DataContext.SetActiveLayerCommand}"
-                                                                CommandParameter="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
-                            Path=(ItemsControl.AlternationIndex)}">
-                                                            <Button.ContextMenu>
-                                                                <ContextMenu>
-                                                                    <MenuItem Header="Delete"
+                                                <vws:LayerItem LayerIndex="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
+                            Path=(ItemsControl.AlternationIndex)}" SetActiveLayerCommand="{Binding Path=DataContext.SetActiveLayerCommand, ElementName=mainWindow}"
+                                                               LayerName="{Binding Name, Mode=TwoWay}" IsActive="{Binding IsActive, Mode=TwoWay}"
+                                                               IsRenaming="{Binding IsRenaming, Mode=TwoWay}"
+                                                               MoveToBackCommand="{Binding DataContext.MoveToBackCommand, ElementName=mainWindow}"
+                                                               MoveToFrontCommand="{Binding DataContext.MoveToFrontCommand, ElementName=mainWindow}">
+                                                    <vws:LayerItem.ContextMenu>
+                                                        <ContextMenu>
+                                                            <MenuItem Header="Delete"
                                                                               Command="{Binding DeleteLayerCommand, Source={StaticResource ViewModelMain}}"
                                                                               CommandParameter="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
                             Path=(ItemsControl.AlternationIndex)}" />
-                                                                    <MenuItem Header="Rename"
+                                                            <MenuItem Header="Rename"
                                                                               Command="{Binding RenameLayerCommand, Source={StaticResource ViewModelMain}}"
                                                                               CommandParameter="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
                             Path=(ItemsControl.AlternationIndex)}" />
-                                                                    <MenuItem Header="Move to front"
+                                                            <MenuItem Header="Move to front"
                                                                               Command="{Binding MoveToFrontCommand, Source={StaticResource ViewModelMain}}"
                                                                               CommandParameter="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
                             Path=(ItemsControl.AlternationIndex)}" />
-                                                                    <MenuItem Header="Move to back"
+                                                            <MenuItem Header="Move to back"
                                                                               Command="{Binding MoveToBackCommand, Source={StaticResource ViewModelMain}}"
                                                                               CommandParameter="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},
                             Path=(ItemsControl.AlternationIndex)}" />
-                                                                </ContextMenu>
-                                                            </Button.ContextMenu>
-                                                            <vws:EditableTextBlock
-                                                                IsEditing="{Binding IsRenaming, Mode=TwoWay}"
-                                                                Text="{Binding Name, Mode=TwoWay}" />
-                                                        </Button>
-                                                    </DockPanel>
-                                                </Border>
+                                                        </ContextMenu>
+                                                    </vws:LayerItem.ContextMenu>
+                                                </vws:LayerItem>
                                             </DataTemplate>
                                         </ItemsControl.ItemTemplate>
                                     </ItemsControl>