Reference layer works

PixiEditor/PixiEditor.csproj

@@ -115,6 +115,7 @@
   <ItemGroup>
     <None Remove="Images\AnchorDot.png" />
     <None Remove="Images\CheckerTile.png" />
+    <None Remove="Images\ChevronDown.png" />
     <None Remove="Images\DiagonalRed.png" />
     <None Remove="Images\Eye-off.png" />
     <None Remove="Images\Eye.png" />
@@ -163,6 +164,7 @@
   <ItemGroup>
     <Resource Include="Images\AnchorDot.png" />
     <Resource Include="Images\CheckerTile.png" />
+    <Resource Include="Images\ChevronDown.png" />
     <Resource Include="Images\DiagonalRed.png" />
     <Resource Include="Images\FloodFillImage.png" />
     <Resource Include="Images\CircleImage.png" />

PixiEditor/Views/UserControls/DrawingViewPort.xaml

@@ -52,6 +52,12 @@
                         </ImageBrush.Viewport>
                     </ImageBrush>
                 </Canvas.Background>
+                <Image Source="{Binding ReferenceLayer.LayerBitmap}"
+                       VerticalAlignment="Center" Stretch="Uniform"
+                       Visibility="{Binding ReferenceLayer.IsVisible, Converter={BoolToVisibilityConverter}}"
+                       HorizontalAlignment="Center" Width="{Binding Width}"
+                       Height="{Binding Height}"
+                       RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                 <Image Source="{Binding PreviewLayer.LayerBitmap}" Panel.ZIndex="2"
                                    RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="Uniform"
                                    Width="{Binding PreviewLayer.Width}"

PixiEditor/Views/UserControls/Layers/LayersManager.xaml

@@ -89,6 +89,6 @@
             </TreeView>
             <Border Name="dropBorder" DragEnter="Grid_DragEnter" DragLeave="Grid_DragLeave" AllowDrop="True" Drop="Grid_Drop" Background="Transparent" BorderThickness="0, 5, 0, 0"></Border>
         </DockPanel>
-        <layerUserControls:ReferenceLayer Background="{StaticResource MainColor}" Grid.Row="3" VerticalAlignment="Bottom"/>
+        <layerUserControls:ReferenceLayer Background="{StaticResource MainColor}" Layer="{Binding LayerCommandsViewModel.Owner.BitmapManager.ActiveDocument.ReferenceLayer, ElementName=layersManager, Mode=TwoWay}" Grid.Row="3" VerticalAlignment="Bottom"/>
     </Grid>
 </UserControl>

PixiEditor/Views/UserControls/Layers/ReferenceLayer.xaml

@@ -5,33 +5,84 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:PixiEditor.Views.UserControls.Layers" xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:local1="clr-namespace:PixiEditor.Views.UserControls"
              mc:Ignorable="d" 
-             d:DesignHeight="60" d:DesignWidth="250" VerticalAlignment="Center" Name="uc">
-    <Border BorderBrush="{StaticResource DarkerAccentColor}" BorderThickness="0 2 0 0" MinWidth="60" Height="40" Focusable="True">
+             d:DesignHeight="60" d:DesignWidth="350" VerticalAlignment="Center" Name="uc">
+    <Border BorderBrush="{StaticResource DarkerAccentColor}" BorderThickness="0 2 0 0" MinWidth="60" Focusable="True">
         <i:Interaction.Behaviors>
             <behaviors:ClearFocusOnClickBehavior/>
         </i:Interaction.Behaviors>
-        <Grid Height="35">
+        <Grid>
             <Grid Background="Transparent"/>
         <Grid Grid.Row="1" Grid.RowSpan="3" VerticalAlignment="Center">
                 <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="30"/>
-                <ColumnDefinition Width="*"/>
-            </Grid.ColumnDefinitions>
-                <Grid MouseDown="Grid_MouseDown" Visibility="{Binding ReferenceLayerSelected, ElementName=uc, Converter={InverseBoolToVisibilityConverter}}" Cursor="Hand" Grid.ColumnSpan="2" Grid.RowSpan="2" Background="Transparent" Panel.ZIndex="5"/>
+                    <ColumnDefinition Width="30"/>
+                    <ColumnDefinition Width="*"/>
+                </Grid.ColumnDefinitions>
+                <Grid  Visibility="{Binding ReferenceLayerSelected, ElementName=uc, Converter={InverseBoolToVisibilityConverter}}"  Grid.ColumnSpan="2" Grid.RowSpan="2" Panel.ZIndex="5">
+                    <Grid MouseDown="Grid_MouseDown" Cursor="Hand" Visibility="{Binding ElementName=visibilityCheckbox, Path=IsChecked, Converter={InverseBoolToVisibilityConverter}}"  Background="Transparent"/>
+                </Grid>
+                <Grid Grid.Column="0" Height="16" Name="layerVisibilityCheckboxGrid">
                 <CheckBox Visibility="{Binding ReferenceLayerSelected, ElementName=uc, Converter={BoolToVisibilityConverter}}" Style="{StaticResource ImageCheckBox}" VerticalAlignment="Center"
                       IsThreeState="False" HorizontalAlignment="Center" 
-                      IsChecked="{Binding Path=IsLayerVisible, Mode=TwoWay, ElementName=uc}" Grid.Column="0" Height="16" />
-                <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center">
+                      IsChecked="{Binding Path=Layer.IsVisible, Mode=TwoWay, ElementName=uc}"/>
+                </Grid>
+                <StackPanel Name="middleStackPanel" Height="40" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center">
                     <Border HorizontalAlignment="Left" Visibility="{Binding ReferenceLayerSelected, ElementName=uc, Converter={BoolToVisibilityConverter}}" Width="30" Height="30" BorderThickness="1" BorderBrush="Black" Background="{StaticResource MainColor}"
                            Margin="5, 0, 10, 0">
-                        <Image Source="{Binding PreviewImage}" Stretch="Uniform" Width="25" Height="25" 
+                        <Image Source="{Binding Layer.LayerBitmap, ElementName=uc}" Stretch="Uniform" Width="25" Height="25" 
                        RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                     </Border>
                     <Image Margin="0 0 5 0" Width="20" Source="/Images/Layer-add.png"  Visibility="{Binding ReferenceLayerSelected, ElementName=uc, Converter={InverseBoolToVisibilityConverter}}"/>
 
-                    <local1:PrependTextBlock Prepend="Select " Foreground="White" HidePrepend="{Binding ReferenceLayerSelected, ElementName=uc}"
+                    <local1:PrependTextBlock Margin="0 0 5 0" Prepend="Select " Foreground="White" HidePrepend="{Binding ReferenceLayerSelected, ElementName=uc}"
                                              FontSize="15" VerticalAlignment="Center" Text="Reference Layer" />
+                    <Button Click="TrashButton_Click" Cursor="Hand" Grid.Column="1" Visibility="{Binding ReferenceLayerSelected, ElementName=uc, Converter={BoolToVisibilityConverter}}" Style="{StaticResource ImageButtonStyle}" Width="20" Height="20" HorizontalAlignment="Right">
+                        <Button.Background>
+                            <ImageBrush ImageSource="/Images/Trash.png"/>
+                        </Button.Background>
+                    </Button>
                 </StackPanel>
+                <CheckBox Panel.ZIndex="10" Name="visibilityCheckbox" Grid.Column="1" Margin="0,0,5,0" Height="16" HorizontalAlignment="Right">
+                    <CheckBox.Triggers>
+                        <EventTrigger RoutedEvent="CheckBox.Checked">
+                            <BeginStoryboard>
+                                <Storyboard>
+                                    <DoubleAnimation Storyboard.TargetName="middleStackPanel" Storyboard.TargetProperty="Height" From="40" To="0" Duration="0:0:0.15"/>
+                                    <DoubleAnimation Storyboard.TargetName="layerVisibilityCheckboxGrid" Storyboard.TargetProperty="Height" From="16" To="0" Duration="0:0:0.15"/>
+                                </Storyboard>
+                            </BeginStoryboard>
+                        </EventTrigger>
+                        <EventTrigger RoutedEvent="CheckBox.Unchecked">
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation Storyboard.TargetName="middleStackPanel" Storyboard.TargetProperty="Height" From="0" To="40" Duration="0:0:0.15"/>
+                                    <DoubleAnimation Storyboard.TargetName="layerVisibilityCheckboxGrid" Storyboard.TargetProperty="Height" From="0" To="16" Duration="0:0:0.15"/>
+                                </Storyboard>
+                        </BeginStoryboard>
+                        </EventTrigger>
+
+                    </CheckBox.Triggers>
+                    <CheckBox.Template>
+                        <ControlTemplate TargetType="{x:Type CheckBox}">
+                            <StackPanel Orientation="Horizontal">
+                                <Image Width="14" Cursor="Hand" x:Name="checkboxImage" Source="/Images/ChevronDown.png">
+                                    <Image.RenderTransform>
+                                        <RotateTransform Angle="0"/>
+                                    </Image.RenderTransform>
+                                </Image>
+                                <ContentPresenter/>
+                            </StackPanel>
+                            <ControlTemplate.Triggers>
+                                <Trigger Property="IsChecked" Value="True">
+                                    <Setter TargetName="checkboxImage" Property="RenderTransform">
+                                        <Setter.Value>
+                                            <RotateTransform Angle="180" CenterX="7" CenterY="4"/>
+                                        </Setter.Value>
+                                    </Setter>
+                                </Trigger>
+                            </ControlTemplate.Triggers>
+                        </ControlTemplate>
+                    </CheckBox.Template>
+                </CheckBox>
             </Grid>
     </Grid>
     </Border>

PixiEditor/Views/UserControls/Layers/ReferenceLayer.xaml.cs

@@ -1,4 +1,7 @@
-using System;
+using Microsoft.Win32;
+using PixiEditor.Models.IO;
+using PixiEditor.Models.Layers;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -20,28 +23,6 @@ namespace PixiEditor.Views.UserControls.Layers
     /// </summary>
     public partial class ReferenceLayer : UserControl
     {
-        public WriteableBitmap PreviewImage
-        {
-            get { return (WriteableBitmap)GetValue(PreviewImageProperty); }
-            set { SetValue(PreviewImageProperty, value); }
-        }
-
-        // Using a DependencyProperty as the backing store for PreviewImage.  This enables animation, styling, binding, etc...
-        public static readonly DependencyProperty PreviewImageProperty =
-            DependencyProperty.Register("PreviewImage", typeof(WriteableBitmap), typeof(ReferenceLayer), new PropertyMetadata(default(WriteableBitmap)));
-
-
-        public bool IsLayerVisible
-        {
-            get { return (bool)GetValue(IsLayerVisibleProperty); }
-            set { SetValue(IsLayerVisibleProperty, value); }
-        }
-
-        // Using a DependencyProperty as the backing store for IsLayerVisible.  This enables animation, styling, binding, etc...
-        public static readonly DependencyProperty IsLayerVisibleProperty =
-            DependencyProperty.Register("IsLayerVisible", typeof(bool), typeof(ReferenceLayer), new PropertyMetadata(true));
-
-
         public bool ReferenceLayerSelected
         {
             get { return (bool)GetValue(ReferenceLayerSelectedProperty); }
@@ -52,6 +33,15 @@ namespace PixiEditor.Views.UserControls.Layers
         public static readonly DependencyProperty ReferenceLayerSelectedProperty =
             DependencyProperty.Register("ReferenceLayerSelected", typeof(bool), typeof(ReferenceLayer), new PropertyMetadata(false));
 
+        public Layer Layer
+        {
+            get { return (Layer)GetValue(ReferenceLayerProperty); }
+            set { SetValue(ReferenceLayerProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for ReferenceLayer.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty ReferenceLayerProperty =
+            DependencyProperty.Register("Layer", typeof(Layer), typeof(ReferenceLayer), new PropertyMetadata(default(Layer)));
 
 
         public ReferenceLayer()
@@ -61,7 +51,34 @@ namespace PixiEditor.Views.UserControls.Layers
 
         private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
         {
+            string path = OpenFilePicker();
+            if (path != null)
+            {
+                var bitmap = Importer.ImportImage(path);
+                Layer = new Layer("_Reference Layer", bitmap);
+                ReferenceLayerSelected = true;
+            }
+        }
 
+        private string OpenFilePicker()
+        {
+            OpenFileDialog dialog = new OpenFileDialog()
+            {
+                Filter = "PNG Files|*.png|JPEG Files|*.jpg;*.jpeg",
+                CheckFileExists = true
+            };
+
+            if ((bool)dialog.ShowDialog())
+            {
+                return dialog.FileName;
+            }
+            return null;
+        }
+
+        private void TrashButton_Click(object sender, RoutedEventArgs e)
+        {
+            Layer = null;
+            ReferenceLayerSelected = false;
         }
     }
 }