Merge pull request #154 from PixiEditor/grid-lines

Added grid lines

PixiEditor/Helpers/Converters/IntToViewportRectConverter.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+
+namespace PixiEditor.Helpers.Converters
+{
+    public class IntToViewportRectConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (parameter is string and "vertical")
+            {
+                return new Rect(0, 0, 1d / (int)value, 1d);
+            }
+
+            return new Rect(0, 0, 1d, 1d / (int)value);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

PixiEditor/ViewModels/SubViewModels/Main/ViewportViewModel.cs

@@ -1,4 +1,5 @@
-using System.Windows;
+using System;
+using System.Windows;
 using PixiEditor.Helpers;
 
 namespace PixiEditor.ViewModels.SubViewModels.Main
@@ -7,10 +8,30 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
     {
         public RelayCommand ZoomCommand { get; set; }
 
+        public RelayCommand ToggleGridLinesCommand { get; set; }
+
+        private bool gridLinesEnabled = false;
+
+        public bool GridLinesEnabled
+        {
+            get => gridLinesEnabled;
+            set
+            {
+                gridLinesEnabled = value;
+                RaisePropertyChanged(nameof(GridLinesEnabled));
+            }
+        }
+
         public ViewportViewModel(ViewModelMain owner)
             : base(owner)
         {
             ZoomCommand = new RelayCommand(ZoomViewport);
+            ToggleGridLinesCommand = new RelayCommand(ToggleGridLines);
+        }
+
+        private void ToggleGridLines(object parameter)
+        {
+            GridLinesEnabled = !GridLinesEnabled;
         }
 
         private void ZoomViewport(object parameter)

PixiEditor/ViewModels/ViewModelMain.cs

@@ -137,7 +137,10 @@ namespace PixiEditor.ViewModels
                     new Shortcut(Key.N, FileSubViewModel.OpenNewFilePopupCommand, modifier: ModifierKeys.Control),
 
                     // Layers
-                    new Shortcut(Key.F2, LayersSubViewModel.RenameLayerCommand, BitmapManager.ActiveDocument?.ActiveLayerIndex)
+                    new Shortcut(Key.F2, LayersSubViewModel.RenameLayerCommand, BitmapManager.ActiveDocument?.ActiveLayerIndex),
+
+                    // View
+                    new Shortcut(Key.OemTilde, ViewportSubViewModel.ToggleGridLinesCommand, modifier: ModifierKeys.Control)
                 }
             };
             BitmapManager.PrimaryColor = ColorsSubViewModel.PrimaryColor;

PixiEditor/Views/MainWindow.xaml

@@ -118,6 +118,10 @@
                     <Separator/>
                     <MenuItem Header="Center Content" Command="{Binding DocumentSubViewModel.CenterContentCommand}" />
                 </MenuItem>
+                <MenuItem Header="_View">
+                    <MenuItem Header="Show Grid Lines" IsChecked="{Binding ViewportSubViewModel.GridLinesEnabled, Mode=TwoWay}"
+                              IsCheckable="True" InputGestureText="Ctrl+`"/>
+                </MenuItem>
                 <MenuItem Header="_Help">
                     <MenuItem Header="Documentation" Command="{Binding MiscSubViewModel.OpenHyperlinkCommand}"
                               CommandParameter="https://github.com/PixiEditor/PixiEditor/wiki"/>
@@ -194,6 +198,7 @@
                                     <usercontrols:DrawingViewPort
                                         ZoomPercentage="{Binding ZoomPercentage}"
                                         RecenterZoombox="{Binding RecenterZoombox}"
+                                        GridLinesVisible="{Binding XamlAccesibleViewModel.ViewportSubViewModel.GridLinesEnabled}"
                                         Cursor="{Binding XamlAccesibleViewModel.ToolsSubViewModel.ToolCursor}"
                                         MiddleMouseClickedCommand="{Binding XamlAccesibleViewModel.ToolsSubViewModel.SelectToolCommand}"
                                         ViewportPosition="{Binding ViewportPosition}"

PixiEditor/Views/UserControls/DrawingViewPort.xaml

@@ -13,6 +13,7 @@
     <UserControl.Resources>
         <converters:BoolToIntConverter x:Key="BoolToIntConverter" />
         <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter" />
+        <converters:IntToViewportRectConverter x:Key="IntToViewportRectConverter" />
     </UserControl.Resources>
     <vws:MainDrawingPanel ZoomPercentage="{Binding ZoomPercentage, Mode=TwoWay, ElementName=uc}"
                           Center="{Binding RecenterZoombox, Mode=TwoWay, ElementName=uc}" 
@@ -34,11 +35,11 @@
                                                   MouseX="{Binding MouseXOnCanvas, Mode=TwoWay, ElementName=uc}"
                                                   MouseY="{Binding MouseYOnCanvas, Mode=TwoWay, ElementName=uc}" />
             </i:Interaction.Behaviors>
-            <vws:MainDrawingPanel.Item>
-                <Canvas Width="{Binding Width}"
+        <vws:MainDrawingPanel.Item>
+            <Canvas Width="{Binding Width}"
                                 Height="{Binding Height}" VerticalAlignment="Center"
                                 HorizontalAlignment="Center">
-                    <Image Source="/Images/transparentbg.png"
+                <Image Source="/Images/transparentbg.png"
                                    Height="{Binding Height}"
                                    Width="{Binding Width}" Opacity="0.9"
                                    Stretch="UniformToFill" />
@@ -48,28 +49,70 @@
                                    Height="{Binding PreviewLayer.Height}" 
                                    Margin="{Binding PreviewLayer.Offset}"/>
                 <ItemsControl ItemsSource="{Binding Layers}">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <Grid />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <Image VerticalAlignment="Top" HorizontalAlignment="Left" Source="{Binding LayerBitmap}"
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <Grid />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <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>
-                    </ItemsControl>
-                    <Image VerticalAlignment="Top" HorizontalAlignment="Left" 
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                <Image VerticalAlignment="Top" HorizontalAlignment="Left" 
                            Source="{Binding ActiveSelection.SelectionLayer.LayerBitmap}"
                                    RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="Uniform"
                                    Width="{Binding ActiveSelection.SelectionLayer.Width}"
                                    Height="{Binding ActiveSelection.SelectionLayer.Height}" 
                                    Margin="{Binding ActiveSelection.SelectionLayer.Offset}" />
-                </Canvas>
-            </vws:MainDrawingPanel.Item>
+                <Grid ShowGridLines="True" Width="{Binding Width}" Height="{Binding Height}" Panel.ZIndex="10" 
+                      Visibility="{Binding GridLinesVisible, Converter={StaticResource BoolToVisibilityConverter},
+                    RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:DrawingViewPort}}}">
+                    <Rectangle Focusable="False">
+                        <Rectangle.Fill>
+                            <VisualBrush Viewport="{Binding Height, Converter={StaticResource IntToViewportRectConverter}}" ViewboxUnits="Absolute" TileMode="Tile" >
+                                <VisualBrush.Visual>
+                                    <Line  X1="0" Y1="0" X2="1" Y2="0" Stroke="Black" StrokeThickness="0.01"/>
+                                </VisualBrush.Visual>
+                            </VisualBrush>
+                        </Rectangle.Fill>
+                    </Rectangle>
+                    <Rectangle Focusable="False">
+                        <Rectangle.Fill>
+                            <VisualBrush Viewport="{Binding Width, Converter={StaticResource IntToViewportRectConverter}, 
+                            ConverterParameter=vertical}" ViewboxUnits="Absolute" TileMode="Tile" >
+                                <VisualBrush.Visual>
+                                    <Line  X1="0" Y1="0" X2="0" Y2="1" Stroke="Black" StrokeThickness="0.01"/>
+                                </VisualBrush.Visual>
+                            </VisualBrush>
+                        </Rectangle.Fill>
+                    </Rectangle>
+                    <Rectangle Focusable="False">
+                        <Rectangle.Fill>
+                            <VisualBrush Viewport="{Binding Height, Converter={StaticResource IntToViewportRectConverter}}" ViewboxUnits="Absolute" TileMode="Tile" >
+                                <VisualBrush.Visual>
+                                    <Line  X1="0" Y1="0" X2="1" Y2="0" Stroke="White" StrokeThickness="0.01"/>
+                                </VisualBrush.Visual>
+                            </VisualBrush>
+                        </Rectangle.Fill>
+                    </Rectangle>
+                    <Rectangle Focusable="False">
+                        <Rectangle.Fill>
+                            <VisualBrush Viewport="{Binding Width, Converter={StaticResource IntToViewportRectConverter}, 
+                            ConverterParameter=vertical}" ViewboxUnits="Absolute" TileMode="Tile" >
+                                <VisualBrush.Visual>
+                                    <Line  X1="0" Y1="0" X2="0" Y2="1" Stroke="White" StrokeThickness="0.01"/>
+                                </VisualBrush.Visual>
+                            </VisualBrush>
+                        </Rectangle.Fill>
+                    </Rectangle>
+                </Grid>
+            </Canvas>
+        </vws:MainDrawingPanel.Item>
         </vws:MainDrawingPanel>
 </UserControl>

PixiEditor/Views/UserControls/DrawingViewPort.xaml.cs

@@ -1,14 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using System.Windows;
+using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
-using PixiEditor.Models.Controllers;
-using PixiEditor.Models.DataHolders;
-using PixiEditor.Models.Position;
 
 namespace PixiEditor.Views.UserControls
 {
@@ -101,5 +93,15 @@ namespace PixiEditor.Views.UserControls
         // Using a DependencyProperty as the backing store for MouseXOnCanvas.  This enables animation, styling, binding, etc...
         public static readonly DependencyProperty MouseYOnCanvasProperty =
             DependencyProperty.Register("MouseYOnCanvas", typeof(double), typeof(DrawingViewPort), new PropertyMetadata(0.0));
+
+        public bool GridLinesVisible
+        {
+            get { return (bool)GetValue(GridLinesVisibleProperty); }
+            set { SetValue(GridLinesVisibleProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for GridLinesVisible.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty GridLinesVisibleProperty =
+            DependencyProperty.Register("GridLinesVisible", typeof(bool), typeof(DrawingViewPort), new PropertyMetadata(false));
     }
 }