title: How can I use DrawingGroup effectively when tiling only images?
body: <p>I'm having trouble understanding my problem with drawing groups. I'm creating a map editor in wpf which is my first wpf project and I have been searching/playing around with drawing groups.</p>
  
  <p>I have a set of tiles on the left side that on app startup populate based off of a folder of sprites. They all layout according to rules I have set(3 sets of tiles per row at 32 pixels each). Example below:</p>
  
  <pre><code>    private void RefreshTileList()
      {
          // For now load in all textures as possible tiles
          DrawingGroup dGroup = new DrawingGroup();
          Rect r = new Rect();
          r.X = 0.0;
          r.Y = 0.0;
          r.Width = Settings.Default.TileThumbWidth;
          r.Height = Settings.Default.TileThumbHeight;
          foreach (WPFTexture tex in imgFind.TileTextures)
          {
              ImageDrawing iDraw = new ImageDrawing(tex.src, r);
  
              dGroup.Children.Add(iDraw);
  
              r.X += r.Width;
              if (r.X &gt; r.Width * Settings.Default.TileThumbMaxColumns)
              {
                  r.X = 0.0;
                  r.Y += r.Height;
              }
          }
  
          // Make a drawing image and send it to the Image in canvas
          DrawingImage drawImage = new DrawingImage(dGroup);
          tileImage.Source = drawImage;
      }
  </code></pre>
  
  <p>Now I Image control in another canvas which I want to do the same exact thing with exception that the tiles are placed dynamically. Here is what I have so far:</p>
  
  <pre><code>    private void AreaDrawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
      {
          if(curSelIndex &gt; -1 &amp;&amp; curSelIndex &lt; imgFind.TileTextures.Count)
          {
              BitmapSource tileSrc = imgFind.TileTextures[curSelIndex].src;
  
              Point mousePos = e.GetPosition(sender as Canvas);
              Size size = new Size(tileSrc.Width, tileSrc.Height);
              Rect r = new Rect(mousePos, size);
              ImageDrawing iDraw = new ImageDrawing(tileSrc, r);
  
              areaDrawGroup.Children.Add(iDraw);
  
          }
      }
  </code></pre>
  
  <p>And here is the initialization of what uses areaDrawGroup:</p>
  
  <pre><code>        // Setup drawing for area
          DrawingImage areaDrawImage = new DrawingImage(areaDrawGroup);
          areaImage.Source = areaDrawImage;
          areaImage.Stretch = Stretch.None;
          AreaDrawingCanvas.Children.Add(areaImage);
  </code></pre>
  
  <p>If I do not add in a dead image located at point(0, 0) in the draw group and I click on the image control. It will offset to a weird location. As I continue to click more towards the top left location it correct where it draws the tile while shifting all the other ones over.</p>
  
  <p>My question is where could I find a good tiling example or what have I done wrong? Because adding in a dead image to fix where other images locate seems like a really bad hack to something simple I missed.</p>