如何在 WPF 中模仿这个数据网格？

Question

在这个页面上，他们展示了这个数据网格：

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/alleditablecolumns/defaultcs.aspx

我想添加类似这样的注册表：

当有人想要添加一个新的注册表时，显示这个 UserControl 是否很困难？ 我该如何开始？

Answer 1

您将需要设置DataGrid控件的样式，因为 Google 不会显示仅设置“新项目占位符”样式的方法

如需这方面的帮助，您应该查看本教程（总共有四篇文章，并且都非常有用）

在我为这个问题编写的小演示应用程序中，我创建了一个新的UserControl ，它继承自DataGrid class，以便我可以扩展一些功能。

在此 class 上，我添加了两个新属性NewItemTemplate和IsAddingNewItem - 当您选择要添加新项目时，IsAddingNewItem 为 true，并且 NewItemTemplate 只有在该属性为 true 时才可见。

下面是一个非常简单的样式大纲：（注意：为了节省空间，这只是一个大纲；此代码实际上不会编译）

        <Style TargetType="{x:Type controls:DataGrid}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type controls:DataGrid}">
                        <Border>
                            <ScrollViewer Name="DG_ScrollViewer">
                                <ScrollViewer.Template>
                                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>

                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>

                                            <!--Left Column Header Corner -->
                                            <Button Command="{x:Static controls:DataGrid.SelectAllCommand}" />

                                            <!--Column Headers-->
                                            <Primitives:DataGridColumnHeadersPresenter Grid.Column="1" Name="PART_ColumnHeadersPresenter" />

                                            <!--New Item Placeholder-->
                                            <ContentPresenter Grid.Column="1" Grid.Row="1" Content="{Binding Path=NewItemInstance, RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}}" ContentTemplate="{Binding Path=NewItemTemplate, RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}}" Visibility="{Binding Path=IsAddingItem, Converter={StaticResource booleanToVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}}" />

                                            <!--DataGrid content-->
                                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Grid.Row="2" Grid.ColumnSpan="2" CanContentScroll="{TemplateBinding CanContentScroll}" />

                                            <ScrollBar Grid.Row="0" Grid.RowSpan="4" Grid.Column="2" Name="PART_VerticalScrollBar" Orientation="Vertical" />

                                            <ToggleButton IsChecked="{Binding Path=IsAddingItem, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}}" Content="Add Item" Grid.Row="3" />

                                            <Grid Grid.Row="4" Grid.Column="1">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type controls:DataGrid}}, Path=NonFrozenColumnsViewportHorizontalOffset}"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>

                                                <ScrollBar Grid.Column="1" Name="PART_HorizontalScrollBar" />
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </ScrollViewer.Template>

                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

本示例中您应该关注的两个部分是“ <!--New Item Placeholder--> ”注释下的ContentPresenter和它下面几行的 Toggle 按钮。

此 styles DataGrid使其显示为 4 行，“列标题”、“新项目占位符”、“DataGrid 行”和“添加新项目按钮” - 全部被滚动条包围。

然后，在使用此控件时（您将需要使用像<controls:DataGrid... />这样的自定义控件，并像在您的示例中那样设置NewItemTemplate属性（您还应该能够在 RowDetails 模板中重用该模板）单个项目的编辑以确保始终具有相同的外观和感觉）。

希望这可以帮助。