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

Question

在此页面上，他们显示此数据网格：

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

我想添加注册表类似：

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

Answer 1

您将需要设置 DataGrid 控件的样式，因为 Google 没有透露仅设置“新项目占位符”样式的方法。

有关此方面的帮助，您应该查看 本教程（一共有四篇文章，都是< em>信息非常丰富

）我为这个问题编写的小演示应用程序作为测试平台，我创建了一个新的 UserControl ，它继承自 DataGrid 类，以便我可以扩展一些功能。

在此类上，我添加了两个新属性 NewItemTemplate 和 IsAddingNewItem - 当您选择要添加新项目时，IsAddingNewItem 为 true，并且 NewItemTemplate 仅在该情况下可见财产是真实的。

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

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

此示例中您应该关注的两个部分是 < “”注释下的 code>ContentPresenter 及其下方几行的“切换”按钮。

这将设置 DataGrid 的样式，使其显示为 4 行：“列标题”、“新项目占位符”、“DataGrid 行”和“添加新项目按钮” - 全部由滚动条包围。

然后，在使用此控件时（您将需要使用像 这样的自定义控件，并像在您的代码中那样设置 NewItemTemplate 属性例如（您还应该能够在 RowDetails 模板中重用该模板来编辑各个项目，以确保整个外观和感觉相同）

。