Added basic reference layer

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

@@ -19,6 +19,8 @@ namespace PixiEditor.Models.DataHolders
             UndoManager = new UndoManager();
             XamlAccesibleViewModel = ViewModelMain.Current;
             GeneratePreviewLayer();
+
+            ReferenceLayer = new Layers.Layer($"_{nameof(ReferenceLayer)}");
         }
     }
 }

PixiEditor/Models/DataHolders/Document/Document.cs

@@ -14,6 +14,7 @@ using System.IO;
 using System.Linq;
 using System.Windows;
 using System.Windows.Media;
+using System.Windows.Media.Imaging;
 
 namespace PixiEditor.Models.DataHolders
 {
@@ -32,6 +33,14 @@ namespace PixiEditor.Models.DataHolders
             }
         }
 
+        private Layer referenceLayer;
+
+        public Layer ReferenceLayer
+        {
+            get => referenceLayer;
+            set => SetProperty(ref referenceLayer, value);
+        }
+
         public string Name
         {
             get => (string.IsNullOrEmpty(DocumentFilePath) ? "Untitled" : Path.GetFileName(DocumentFilePath))

PixiEditor/Views/MainWindow.xaml

@@ -12,7 +12,8 @@
         xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
         xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
         xmlns:avalondock="https://github.com/Dirkster99/AvalonDock"
-        xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker" xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours" 
+        xmlns:colorpicker="clr-namespace:ColorPicker;assembly=ColorPicker" xmlns:usercontrols="clr-namespace:PixiEditor.Views.UserControls" xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours"
+        xmlns:avalonDockWindows="clr-namespace:PixiEditor.Views.UserControls.AvalonDockWindows"
         xmlns:avalonDockTheme="clr-namespace:PixiEditor.Styles.AvalonDock" d:DataContext="{d:DesignInstance Type=vm:ViewModelMain}" xmlns:dataHolders="clr-namespace:PixiEditor.Models.DataHolders"
         mc:Ignorable="d" WindowStyle="None" Initialized="MainWindow_Initialized"
         Title="PixiEditor" Name="mainWindow" Height="1000" Width="1600" Background="{StaticResource MainColor}"
@@ -401,6 +402,13 @@
                                                                     PrimaryColor="{Binding ColorsSubViewModel.PrimaryColor, Mode=TwoWay}"/>
                                     </LayoutAnchorable>
                                 </LayoutAnchorablePane>
+                                <LayoutAnchorablePane>
+                                    <LayoutAnchorable ContentId="referenceLayer" Title="Reference Layer" 
+                                                      CanHide="False" CanAutoHide="False"
+                                                      CanDockAsTabbedDocument="False" CanFloat="True">
+                                        <avalonDockWindows:ReferenceLayerWindow Document="{Binding BitmapManager.ActiveDocument}"/>
+                                    </LayoutAnchorable>
+                                </LayoutAnchorablePane>
                             </LayoutAnchorablePaneGroup>
                         </LayoutPanel>
                     </avalondock:LayoutRoot>

PixiEditor/Views/UserControls/AvalonDockWindows/ReferenceLayerWindow.xaml

@@ -0,0 +1,42 @@
+<UserControl x:Class="PixiEditor.Views.UserControls.AvalonDockWindows.ReferenceLayerWindow"
+             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.UserControls.AvalonDockWindows" xmlns:views="clr-namespace:PixiEditor.Views" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+             mc:Ignorable="d" 
+             d:DesignHeight="200" d:DesignWidth="200"
+             Name="uc">
+    <UserControl.Resources>
+        <Style TargetType="TextBlock">
+            <Setter Property="Foreground" Value="White"/>
+        </Style>
+        <converters:NotNullToBoolConverter x:Key="NotNullToBoolConverter"/>
+    </UserControl.Resources>
+    
+    <StackPanel Margin="5">
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+            <TextBlock Margin="0,0,5,0" VerticalAlignment="Center">Path:</TextBlock>
+            <TextBox Text="{Binding FilePath, ElementName=uc}" Grid.Column="1"
+                     Style="{StaticResource DarkTextBoxStyle}" FontSize="14"/>
+            <Button Grid.Column="2" Content="&#xE838;" VerticalAlignment="Center"
+                    Style="{StaticResource ToolSettingsGlyphButton}" Width="20"
+                    Command="{Binding OpenFilePickerCommand, ElementName=uc}"></Button>
+        </Grid>
+        <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
+            <TextBlock Text="Opacity: " Foreground="White" VerticalAlignment="Center"/>
+            <views:NumberInput Min="0" Max="100" Value="{Binding LayerOpacity, ElementName=uc, Mode=TwoWay}"
+                               Width="40" Height="20" VerticalAlignment="Center"/>
+            <TextBlock Text=" %" Foreground="White" VerticalAlignment="Center"/>
+        </StackPanel>
+        <Button Command="{Binding UpdateLayerCommand, ElementName=uc}"
+                Style="{StaticResource DarkRoundButton}" FontSize="14" 
+                Height="25" Margin="0,5"
+                IsEnabled="{Binding HasDocument, ElementName=uc}" >Update</Button>
+    </StackPanel>
+</UserControl>

PixiEditor/Views/UserControls/AvalonDockWindows/ReferenceLayerWindow.xaml.cs

@@ -0,0 +1,82 @@
+using Microsoft.Win32;
+using PixiEditor.Helpers;
+using PixiEditor.Models.DataHolders;
+using PixiEditor.Models.IO;
+using System.Windows;
+using System.Windows.Controls;
+
+namespace PixiEditor.Views.UserControls.AvalonDockWindows
+{
+    /// <summary>
+    /// Interaction logic for ReferenceLayerWindow.xaml
+    /// </summary>
+    public partial class ReferenceLayerWindow : UserControl
+    {
+        public static readonly DependencyProperty DocumentProperty =
+            DependencyProperty.Register(nameof(Document), typeof(Document), typeof(ReferenceLayerWindow));
+
+        public Document Document
+        {
+            get => (Document)GetValue(DocumentProperty);
+            set => SetValue(DocumentProperty, value);
+        }
+
+        public static readonly DependencyProperty FilePathProperty =
+            DependencyProperty.Register(nameof(FilePath), typeof(string), typeof(ReferenceLayerWindow));
+
+        public string FilePath
+        {
+            get => (string)GetValue(FilePathProperty);
+            set => SetValue(FilePathProperty, value);
+        }
+
+        public static readonly DependencyProperty LayerOpacityProperty =
+            DependencyProperty.Register(nameof(LayerOpacity), typeof(float), typeof(ReferenceLayerWindow), new PropertyMetadata(100f));
+
+        public float LayerOpacity
+        {
+            get => (float)GetValue(LayerOpacityProperty);
+            set => SetValue(LayerOpacityProperty, value);
+        }
+
+        public static readonly DependencyProperty HasDocumentProperty =
+            DependencyProperty.Register(nameof(HasDocument), typeof(bool), typeof(ReferenceLayerWindow));
+
+        public bool HasDocument
+        {
+            get => (bool)GetValue(HasDocumentProperty);
+            set => SetValue(HasDocumentProperty, value);
+        }
+
+        public RelayCommand UpdateLayerCommand { get; set; }
+
+        public RelayCommand OpenFilePickerCommand { get; set; }
+
+        public ReferenceLayerWindow()
+        {
+            UpdateLayerCommand = new RelayCommand(UpdateLayer);
+            OpenFilePickerCommand = new RelayCommand(OpenFilePicker);
+            InitializeComponent();
+        }
+
+        private void UpdateLayer(object obj)
+        {
+            Document.ReferenceLayer.LayerBitmap = Importer.ImportImage(FilePath);
+            Document.ReferenceLayer.Opacity = LayerOpacity;
+        }
+
+        private void OpenFilePicker(object obj)
+        {
+            OpenFileDialog dialog = new OpenFileDialog()
+            {
+                Filter = "PNG Files|*.png|JPEG Files|*.jpg;*.jpeg",
+                CheckFileExists = true
+            };
+
+            if ((bool)dialog.ShowDialog())
+            {
+                FilePath = dialog.FileName;
+            }
+        }
+    }
+}

PixiEditor/Views/UserControls/DrawingViewPort.xaml

@@ -7,8 +7,8 @@
              xmlns:tools="clr-namespace:PixiEditor.Models.Tools.Tools"
              xmlns:vws="clr-namespace:PixiEditor.Views" 
              xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
-             xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
-             mc:Ignorable="d" 
+             xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours" xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" xmlns:dataholders="clr-namespace:PixiEditor.Models.DataHolders"
+             mc:Ignorable="d"
              d:DesignHeight="450" d:DesignWidth="800" Name="uc">
     <UserControl.Resources>
         <converters:BoolToIntConverter x:Key="BoolToIntConverter" />
@@ -16,7 +16,7 @@
         <converters:IntToViewportRectConverter x:Key="IntToViewportRectConverter" />
     </UserControl.Resources>
 
-    <local:Zoombox x:Name="zoombox" ClipToBounds="True">
+    <local:Zoombox x:Name="zoombox" ClipToBounds="True" d:DataContext="{d:DesignInstance dataholders:Document}">
         <i:Interaction.Triggers>
             <i:EventTrigger EventName="MouseMove">
                 <i:InvokeCommandAction Command="{Binding MouseMoveCommand, ElementName=uc}" />
@@ -43,6 +43,10 @@
                                    Height="{Binding Height}"
                                    Width="{Binding Width}" Opacity="0.9"
                                    Stretch="UniformToFill" />
+                <Image Source="{Binding ReferenceLayer.LayerBitmap}"
+                       RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="Uniform"
+                       Opacity="{Binding ReferenceLayer.Opacity}"
+                       Width="{Binding Width}" Height="{Binding Height}"/>
                 <Image Source="{Binding PreviewLayer.LayerBitmap}" Panel.ZIndex="2"
                                    RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="Uniform"
                                    Width="{Binding PreviewLayer.Width}"