Question

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.

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:

    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 > 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;
    }

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:

    private void AreaDrawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if(curSelIndex > -1 && curSelIndex < 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);

        }
    }

And here is the initialization of what uses areaDrawGroup:

        // Setup drawing for area
        DrawingImage areaDrawImage = new DrawingImage(areaDrawGroup);
        areaImage.Source = areaDrawImage;
        areaImage.Stretch = Stretch.None;
        AreaDrawingCanvas.Children.Add(areaImage);

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.

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.

Answer 1

Here is what I did to solve this for now. I have a i7 and used a list of drawingvisuals. Don’t have a problem with it. I thought at one point I should use one drawing visual and add each image to the same visual. The problem with that is if I add a tile I have to re-open the render and redo all the drawing. Since I don’t have any hiccups I decided not to use my time on that method.

Here is code to copy and paste:

1. Make a class that derives framework element and add in the overrides as seen

   public class AreaDrawingEdit : FrameworkElement
   {
   public VisualCollection Visuals { get; set; }
   const double COLLISION_OPACITY = 0.8;

   public AreaDrawingEdit()
   {
       Visuals = new VisualCollection(this);
   }
   
   public void AddRenderTile(DrawingTile tile)
   {
       // Add the tile visual 
       tile.visual = new DrawingVisual();
       InvalidateTile(tile);
       Visuals.Add(tile.visual);
   
       // Add in collision visual
       tile.colVol.visual = new DrawingVisual();
       InvalidateCollisionVol(tile.colVol);
       Visuals.Add(tile.colVol.visual);
   }
   
   public void RemoveRenderTile(DrawingTile tile)
   {
       Visuals.Remove(tile.visual);
       Visuals.Remove(tile.colVol.visual);
   }
   
   public void InvalidateTile(DrawingTile tile)
   {
       // Set up drawing rect for new tile
       Rect r = new Rect(tile.pos, new Size(tile.tileTex.src.PixelWidth, tile.tileTex.src.PixelHeight));
   
       DrawingContext dc = tile.visual.RenderOpen();
       dc.DrawImage(tile.tileTex.src, r);
       dc.Close();
   }
   
   public void InvalidateCollisionVol(CollisionVol vol)
   {
       Rect r = new Rect(vol.pos, vol.size);
   
       DrawingContext dc = vol.visual.RenderOpen();
       dc.PushOpacity(COLLISION_OPACITY);
       dc.DrawImage(vol.src, r);
       dc.Pop();
       dc.Close();
   }
   
   protected override int VisualChildrenCount
   {
       get { return Visuals.Count; }
   }
   
   protected override Visual GetVisualChild(int index)
   {
       if (index < 0 || index >= Visuals.Count)
       {
           throw new ArgumentOutOfRangeException();
       }
   
       return Visuals[index];
   }
   

   }

2. Add the framework element thing you made into your xaml file somewhere.
   lessthan local:AreaDrawingEdit Canvas.Left=”0″ Canvas.Top=”0″ OpacityMask=”Black” x:Name=”areaDrawingEdit” backslashgreaterthan

Enjoy the solution to my misery of figuring it out the hard-way.