silverlight create rectangle with button click

Question

I want to create silverlight application in C#, I added a button and I want to create rectangles with each click one by one, now i managed to create one rectangle but the problem is that i don't know how to change the location of the next rectangle to be created?

Please Help I want each click create rectangle next to another?! Thanks here is the code:

C#

enter code here

public MainPage()
        {
            InitializeComponent();

            Canvas c = new Canvas();

            Button b = new Button();
            Canvas.SetLeft(b, -50);
            Canvas.SetTop(b, 20);
            b.Width = 75;
            b.Height = 23;
            LayoutRoot.Children.Add(b);
            b.Click += new RoutedEventHandler(b_Click);
        }

        void b_Click(object sender, RoutedEventArgs e)
        {
            //throw new NotImplementedException();
            Rectangle rectangle = new Rectangle();
            rectangle.Fill = new SolidColorBrush(Colors.Cyan);
            Canvas.SetLeft(rectangle, 100);
            Canvas.SetTop(rectangle, 100);
            rectangle.Width = 200;
            rectangle.Height = 100;

            LayoutRoot.Children.Add(rectangle);

        }


Xaml:
<Canvas x:Name="LayoutRoot" Background="White" Height="215" Width="292">

    </Canvas>

Answer 1

The simplest thing would be to create a StackPanel or WrapPanel and add that to your Canvas first. Then add the rectangles to that .

This will automatically display the rectangles in a row (if you make the Orientation Horizontal ) or column ( Vertical - the default).

With more constructs ( Grids etc.) you can gain more control over where your rectangles are placed.

Answer 2

If you've to change the values which you pass to SetLeft and SetTop methods of Canvas .

So for example, you can do something like this:

double left = 100;
double top = 100;
void b_Click(object sender, RoutedEventArgs e)
{
    Rectangle rectangle = new Rectangle();
    rectangle.Fill = new SolidColorBrush(Colors.Cyan);
    Canvas.SetLeft(rectangle, left);  //left is no more a constant
    Canvas.SetTop(rectangle, top);    //top is no more a constant
    rectangle.Width = 200;
    rectangle.Height = 100;
    LayoutRoot.Children.Add(rectangle);

    //update left and top 
    left += rectangle.Width + 10; //put some margin!
    if ((left + rectangle.Width) < LayoutRoot.Width)
    { 
       left = 100;
       top += rectangle.Height + 10;
    }
}  

It updates only left value of Rectangle, so that the next rectangle will be placed on the same horizontal line. It does so till there is no space on the left side. Only then it undates top and makes left = 100 so that the next rectangle below the first row of rectangles. Its like this where r1 , r2 , r3 and so on, are rectangles.

| [ r1 ] [ r2 ] [ r3 ] [ r4 ] [ r5 ] | //change only left
| [ r6 ] [ r7 ] [ r8 ] [ r9 ] [ r10] | //change top and make left = 100
//..