need explanation on the add children method

Question

Hi, I've been using Children.Add with different default silverlight controls adding them to canvases. What I don't get is why something like this is possible:

Rectangle rec = new Rectangle(){...};
canvas.Children.Add(rec);

but not something like this (doesn't even compile):

myRectangle rec = new myRectangle();    
canvas.Children.Add(rec);

myRectangle being just a wrapper to a rectangle

I'm sure I'm missing something fundamental.. Thanks for any help.

---

myRectangle class:

public class myRectangle
{
        private SolidColorBrush fillColor;
        private Rectangle recNewColor;

        internal myRectangle()
        {
            fillColor = new SolidColorBrush(Colors.White);
            LinearGradientBrush strokeBrush = new LinearGradientBrush()
            {
                StartPoint = new Point(0.5, 0),
                EndPoint = new Point(0.5, 1),
                GradientStops = 
                { 
                    new GradientStop() { Color = Colors.Red, Offset = 1.0 },
                    new GradientStop() { Color = Colors.Orange, Offset = 0.0 },
                }
            };
            recNewColor = new Rectangle()
            {
                Stroke = strokeBrush,
                Height = 20,
                Width = 20,
                Fill = fillColor,
                HorizontalAlignment = HorizontalAlignment.Left,
                VerticalAlignment = VerticalAlignment.Top,
                Margin = new Thickness() { Bottom = 5, Left = 5 },
            };
        }
...
}

Answer 1

myRectangle rec = new myRectangle();     
canvas.Children.Add(rec.myrectmember); <-- add member which is actually a rectangle  

Answer 2

Define "wrapper"... Does it inherit from Rectangle or some other UIElement? The signature of Canvas.Children.Add requires something that derives from UIElement because it is a UIElementCollection.

You would have to derive from UIElement, or a container UIElement such as Panel so you can add child objects such as a Rectangle.

 public class MyRectangle : Panel
    {
        public MyRectangle()
        {
            this.Children.Add(new System.Windows.Shapes.Rectangle());
        }
    }

Edit:

You need to add your visual elements into the visual tree. Simply making them members of your class won't do. The xaml parser needs to know which members to add to the visual tree.

Use the panel class which is a good starting point. It marks the class with the ContentProperty Attribute:

[ContentProperty("Children", true)] 

// Summary:
//     Specifies which property of a class can be interpreted to be the content
//     property when the class is parsed by a XAML processor.

if you just derive from Panel you gain that functionality. Then anything you want rendered in the visual tree you can just add to the "Children" property of your class.

Or you could implement your own UIElementCollection and flag your class with the attribute

[ContentProperty("Children", true)] 
public class MyRectangle : UIElement
{
     public MyRectangle()
     {
          this.Children = new UIElementCollection();
          this.Children.Add(new System.Windows.Shapes.Rectangle());
     }

     public UIElementCollection Children {get; private set;}
}

One more edit:

Then you also need to construct an instance of your rectangle and add it to the visual tree of your app. So your previous code would do:

MyRectangle rec = new MyRectangle();     
canvas.Children.Add(rec); 

Edit: Just tried to compile this and noticed you can't derive from UIElement... Try FrameworkElement or Control.

Answer 3

Your myRectangle class must inherit from a UIElement (or subclass of it, ie Shape). You can't inherit directly from Rectangle because it is sealed.

Answer 4

You need to extend UIElement for your class to be able to be child to a Canvas. If you just want to wrap one Rectangle in it extend ContentControl and assign the Content property to it:

public class MyRectangle : ContentControl
{
    private Rectangle recNewColor;
    public MyRectangle()
    {
        ///...
        this.Content = recNewColor;
    }
}