c# - WPF中重叠的GridView和Canvas

Question

我有一个Canvasand aGridView我要添加多个Rectangleand Images。我想要的是矩形和图像重叠并作为一个显示。

我为矩形和图像编写了几乎相同的代码，但出于某种原因，我没有将它们放在一起。

这是代码：

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

类似的是 Image 的代码，但使用的是 Grid 而不是 canvas1。我应该做哪些更改以使图像与矩形重叠？

Answer 1

您也许应该定义一个 Grid 具有 8 行和列，然后为您的矩形和图像设置行和列索引：

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

您可以选择设置Width每个 ColumnDefinition 的 和Height每个 RowDefinition 的 。

如果您需要将控件动态添加到 Grid，您可以这样做：

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

---

此外，为了您的信息，Canvas 提供了Left、Top、Right和Bottom属性来排列其子项。您通常不会像在代码中那样设置边距，而是设置Leftand Top：

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