Question

我目前正在使用C＃WPF 4.5并尝试创建交互式网格。给定网格单元的正方形大小（宽度=高度），列数和行数，我想在屏幕上动态生成网格。

对于生成的网格，我希望网格线可见。我想这可以通过在每个单元格中绘制边框来模拟，如果没有别的话。最重要的是，我需要一个事件来确定用户点击的单元格（即点击返回网格列和行），并且能够一次选择一个或多个单元格。

关于如何创建这样的东西的任何帮助或想法，还是有更好的方法去做？提前谢谢！

编辑：所以我已经取得了一些进展：

创建了一个自定义复选框：

    <Style x:Key="styleCustomCheckBox" TargetType="{x:Type CheckBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Grid x:Name="Background" Background="Transparent">
                    <Rectangle x:Name="fillCheckBox"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="fillCheckBox" Property="Fill" Value="Transparent"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="fillCheckBox" Property="Fill" Value="Red"/>
                        <Setter TargetName="fillCheckBox" Property="Opacity" Value=".3"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后只使用该样式的自定义复选框填充网格：

<CheckBox Grid.Column="1" Grid.Row="1" Style="{StaticResource styleCustomCheckBox}" />

所以现在我想映射网格中的每个复选框，我可以收集是否选中了复选框以及它所在的网格行和列，我将如何进行此操作？

Answer 1

我会使用ItemsControl将ItemsPanelTemplate设置为UniformGrid，并将ItemTemplate设置为CheckBox

如果您可以将ItemsControl.ItemsSource绑定到代码中的数据对象集合，那将是最简单的。例如：

<ItemsControl ItemsSource="{Binding MyCollection}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="5" Columns="5" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Red" BorderThickness="1">
               <CheckBox Style="{StaticResource styleCustomCheckBox}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如果您需要指定所选商品的行或列索引，则可以将其添加到您的数据项并使用常规Grid代替UniformGrid，并应用{{1像这样：

ItemContainerStyle

要确定点击的项目，这取决于您构建数据对象的方式以及您在点击中实际想要执行的操作。

如果你想要广场后面的数据项，你可以使用 <ItemsControl.ItemContainerStyle> <Style> <Setter Property="Grid.Column" Value="{Binding ColumnIndex}" /> <Setter Property="Grid.Row" Value="{Binding RowIndex}" /> </Style> </ItemsControl.ItemContainerStyle>，例如

DataContext

或者，如果您的数据项具有void MyCheckBox_Clicked(object sender, EventArgs e) { var selectedItem = ((CheckBox)sender).DataContext; }属性，请执行以下操作：

IsChecked

您可以轻松地将事件附加到数据项<CheckBox IsChecked="{Binding IsChecked}" Style="{StaticResource styleCustomCheckBox}" />属性的PropertyChanged事件，并在那里运行一些代码。

作为第三种选择，您可以为IsChecked使用Button并将所选项目作为ItemTemplate

传递

CommandParameter

我无法给您一个明确的答案，因为我不知道您的代码库以及您尝试做的事情，但我希望这能为您提供足够的信息以便给您一个粗略的开始并指出你的方向正确。

交互式网格WPF

1 个答案: