Question

I have a Canvas and a GridView to which I am adding multiple Rectangle and Images. What I want is to Rectangles and images to overlap and appear as one.

I have written almost the same code for Rectangles and Images but for some reason I am not getting them together.

Here is the code :

        for (int i = 0; i < 8; i++)
        {
            for (int j = 0; j < 8; j++)
            {

                rect = new Rectangle();

                rect.Height = canvas1.Height / 8;
                rect.Width = canvas1.Width / 8;

                th = new Thickness((i * canvas1.Height / 8) + 10, (j * canvas1.Width / 8) + 10, 0, 0);
                rect.Margin = th;

                rect.Visibility = Visibility.Visible;
                canvas1.Children.Add(rect);
             }
         }

and similar is the code for Image but with Grid instead of canvas1. What changes should I do to make the image overlap to the rectangle?

Answer 1

You should perhaps define a Grid with 8 rows and columns, and then set row and column indices for your rectangles and images:

<Grid Name="grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Column="0" Grid.Row="0" Fill="Red"/>
    <Image Grid.Column="0" Grid.Row="0" Name="image00" />
    ... more rectangles and images ...
</Grid>

You may optionally set the Width of each ColumnDefinition and the Height of each RowDefinition.

If you need to dynamically add the controls to the Grid, you could do this:

Image image = ...
int column = ...
int row = ...
Grid.SetColumn(image, column);
Grid.SetRow(image, row);
grid.Children.Add(image);

---

Also, for your information, Canvas provides the Left, Top, Right and Bottom properties for arranging its children. Instead of setting Margins as you do in your code, you would typically set Left and Top:

Canvas.SetLeft(child, left);
Canvas.SetTop(child, top);