如何在 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 模板中重用該模板）單個項目的編輯以確保始終具有相同的外觀和感覺）。

希望這可以幫助。