Problems with custom canvas

Question

I tried to write my own custom Canvas and wanted to draw a little labyrinth which consist of little rectangles. My Problem is, that I just get 4 little points on my screen and not 4 Rectangles (when trying it with a 2 X 2 field). Here is some Code:

public class LabyrinthCanvas : System.Windows.Controls.Canvas
{
    public static readonly int RectRadius = 60;

    public ObservableCollection<ObservableCollection<Rect>> Rectangles;

    public LabyrinthCanvas()
    {
        Rectangles = new ObservableCollection<ObservableCollection<Rect>>();
    }

    public void AddRectangles(int Height, int Width)
    {
        for (int iHeight = 0; iHeight < Height; iHeight++)
        {
            ObservableCollection<Rect> newRects = new ObservableCollection<Rect>();
            newRects.CollectionChanged += RectanglesChanged;
            Rectangles.Add(newRects);

            for (int iWidth = 0; iWidth < Width; iWidth++)
            {
                Rect rect = new Rect(iHeight * RectRadius, iWidth * RectRadius);
                Rectangles[iHeight].Add(rect);
            }
        }
    }

    public void RectanglesChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
        {

            foreach (object rect in e.NewItems)
            {
                if (rect is Rect)
                {
                    this.Children.Add(((Rect)rect).innerRectangle);
                    System.Windows.Controls.Canvas.SetTop(((Rect)rect).innerRectangle, ((Rect)rect).YPos);
                    System.Windows.Controls.Canvas.SetLeft(((Rect)rect).innerRectangle, ((Rect)rect).XPos);
                }
            }
        }
        else if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Remove)
        {
            foreach (Rect rect in e.OldItems)
            {
                this.Children.Remove(rect.innerRectangle);
            }
        } 
    }
}

public class Rect : INotifyPropertyChanged
{
    public Rect(int YPos, int XPos)
    {
        innerRectangle.Stroke = System.Windows.Media.Brushes.Black;
        innerRectangle.Fill = System.Windows.Media.Brushes.Blue;
        this.YPos = YPos;
        this.XPos = XPos;
    }

    public System.Windows.Shapes.Rectangle innerRectangle = new System.Windows.Shapes.Rectangle();

    public int YPos;
    public int XPos;
}

I think the important thing is that:

this.Children.Add(((Rect)rect).innerRectangle);
                    System.Windows.Controls.Canvas.SetTop(((Rect)rect).innerRectangle, ((Rect)rect).YPos);
                    System.Windows.Controls.Canvas.SetLeft(((Rect)rect).innerRectangle, ((Rect)rect).XPos);

Im using a own Class "Rect" because i need some extra properties which i removed from the shown code and I cant inherit from Rectangle.

Answer 1

I'm not entirely sure what you want your end result to look like, so I probably won't be able to suggest the exact solution you're after.

That said, the reason you're obtaining small points on your screen, rather than rectangles, is because the canvas is rendering the innerRectangle of your Rect object, at the specified coordinates, but you're never initialising setting the dimensions of that innerRectangle.

The dots you're seeing are those width/heightless rectangles, which are having the Black stroke rendered (the dot).

You can see what's going on if you try something along these lines:

    public System.Windows.Shapes.Rectangle innerRectangle = new System.Windows.Shapes.Rectangle() { Width = 10, Height = 10 };