Question

我想做这样的事情

ing1

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

<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

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

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

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

需要添加到上面的部分是将行/列定义添加到Grid。为此，我将使用attached properties为您添加这些定义，允许您将定义绑定到视图模型中的属性。这样，您可以编写如下内容：

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

创建一个填充矩形的网格

1 个答案: