title: Displaying grid lines around individual pixels when zooming
body: <p>I'm experimenting with the concept of drawing grid lines over a control and was wondering what adjustments I might need to make to make this actually work. I found some code on another post that enables grid lines to be drawn OnRender over a canvas. Here's what that looks like:</p>
  
  <pre><code>public class MyCanvas : Canvas
  {
      public bool IsGridVisible = true;
  
      protected override void OnRender(System.Windows.Media.DrawingContext dc)
      {
          base.OnRender(dc);
  
          if (IsGridVisible)
          {
              // Draw GridLines
              Pen pen = new Pen(Brushes.Black, 1);
              pen.DashStyle = DashStyles.Solid;
  
              for (double x = 0; x &lt; this.ActualWidth; x += 2)
              {
                  dc.DrawLine(pen, new Point(x, 0), new Point(x, this.ActualHeight));
              }
  
              for (double y = 0; y &lt; this.ActualHeight; y += 2)
              {
                  dc.DrawLine(pen, new Point(0, y), new Point(this.ActualWidth, y));
              }
          }
      }
  
      public MyCanvas()
      {
          DefaultStyleKey = typeof(MyCanvas);
      }
  }
  </code></pre>
  
  <p>This part: <code>y += 2</code> indicates how many other pixels/points to wait before drawing next line, though I am uncertain of it's correctness.</p>
  
  <p>Here's the xaml:</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="*"/&gt;
          &lt;RowDefinition Height="30"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;ScrollViewer&gt;
          &lt;local:MyCanvas&gt;
              &lt;local:MyCanvas.LayoutTransform&gt;
                  &lt;ScaleTransform ScaleX="{Binding ElementName=Slider, Path=Value}" ScaleY="{Binding ElementName=Slider, Path=Value}"/&gt;
              &lt;/local:MyCanvas.LayoutTransform&gt;
              &lt;Image Canvas.Top="2" Canvas.Left="2"  Source="C:\Users\Me\Pictures\nyan-wallpaper2.jpg" Width="325" RenderOptions.BitmapScalingMode="NearestNeighbor"/&gt;
          &lt;/local:MyCanvas&gt;
      &lt;/ScrollViewer&gt;
      &lt;Slider x:Name="Slider" Maximum="500" Grid.Row="1" Value="1"/&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Here are screenshots of what the above results in.</p>
  
  <p><a href="https://i.stack.imgur.com/MfaDy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MfaDy.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the grid lines change in size as you zoom and the lines themselves do not snap around each individual pixel. I highlighted an example pixel in red to show how small the lines should be versus how they actually are.</p>
  
  <p>I read that the thickness of the pen should be divided by the scale value, however, I tested this by replacing <code>Pen pen = new Pen(Brushes.Black, 1);</code> with <code>Pen pen = new Pen(Brushes.Black, 1 / 3);</code> and set the ScaleX and ScaleY of MyCanvas to 3. At that point, no lines showed at all.</p>
  
  <p>Any help at all is immensely valued!</p>