Question

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

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

我想添加类似的注册表：

enter image description here

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

Answer 1

您需要设置DataGrid控件的样式，因为快速Google不会显示一种方法来设置“New Item Placeholder”的样式

有关此问题的帮助，您应该查看this tutorial（共有四篇文章，并且非常提供信息）

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

在这个类中，我添加了两个新属性NewItemTemplate和IsAddingNewItem - 当您选择了要添加新项目时，IsAddingNewItem为true，并且只有当该属性为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>

您应该关注的示例中的两个部分是“ContentPresenter”注释下的和下面几行的切换按钮。

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

然后，在使用此控件时（您需要使用自定义控件，如<controls:DataGrid ... />并在示例中设置NewItemTemplate属性（您还应该能够在RowDetails模板用于编辑各个项目，以确保整个外观和感觉。

希望这有帮助。

我怎样才能在WPF中模仿这个数据网格？

1 个答案: