c# - 创建一个由矩形填充的网格

Question

我想做这样的事

我可以通过使用以下代码将矩形硬编码到网格中来做到这一点:

<Rectangle Grid.Column="0" Grid.Row="0" Fill="Black" />
<Rectangle Grid.Column="1" Grid.Row="0" Fill="Black" />
<Rectangle Grid.Column="2" Grid.Row="0" Fill="Black" />
<Rectangle Grid.Column="3" Grid.Row="0" Fill="Black" />
<Rectangle Grid.Column="4" Grid.Row="0" Fill="Black" />

然而，这只是一行，如果我需要不同的维度，它会变得非常困惑。有没有更简单的方法来实现这一点，同时仍然能够向每个矩形添加事件？

Answer 1

将运行时可变数量的项目绑定(bind)到网格有点棘手。一种选择是使用 ItemsControl，将 Grid 作为 ItemsPanel。

您将在 View 模型中有一个二维数组，每个单元格包含其行号和列号。使用 ItemContainerStyle 将容器的 Grid.Row 和 Grid.Column 附加属性绑定(bind)到单元格 View 模型属性。

<ItemsControl ItemsSource="{Binding Cells}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Row" Value="{Binding RowNumber}" />
            <Setter Property="Grid.Column" Value="{Binding ColumnNumber}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Fill="Black" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>

</ItemsControl>

需要添加到上面的部分是将行/列定义添加到网格。为此，我会使用 attached properties为您添加这些定义，允许您将定义绑定(bind)到 View 模型中的属性。这样，您可以编写如下内容:

        <ItemsPanelTemplate>
            <Grid GridHelpers.RowCount="{Binding RowCount}" 
                  GridHelpers.ColumnCount="{Binding ColumnCount}" />
        </ItemsPanelTemplate>

最后，对于事件，您可以使用 EventTrigger 和 InvokeCommandAction 在矩形的任何事件上触发 ICommand。

        <DataTemplate>
            <Rectangle>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseDoubleClick">
                        <i:InvokeCommandAction Command="{Binding RectangleClickCommand}"
                                               CommandParameter="{Binding}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Rectangle>
        </DataTemplate>

---