我如何通过我的 DataGrid 实现我有两个 headers？

Question

我的目标是让我的 DataGrid 看起来像 Picture2。所以我创建了两个 DataGrids 来实现这一点，因为我没有找到更好的方法来做到这一点，但解决方案不是很干净，我运行遇到了越来越多的问题。因此，在第一个 DataGrid 中，我有正常的标题，在第二个中，我在标题中有文本框，应该充当搜索栏。 2 个 DataGrid 看起来像这样：

因为我的目标是我的 DataGrid 最终看起来像这样：

现在的问题是，当我点击第一个header时，我的数据无法按升序或降序排序。这仅在我单击第二个数据网格上的第二个 header 时有效。但是升序或降序排序的按钮不应该在第二个header，而是在第一个header。最好的办法是为此使用 DataGrid，但我不知道如何实现它，以便标题位于第一个 header 中，当我单击第一个 header 时，一切都是按升序或降序排列。第二个 header 正下方是应该用作搜索栏的文本框，然后是值。当我想将所有内容都剪切到 DataGrid 中时，我该如何管理它。首先，这是我的代码：

<Grid>

    <DataGrid HorizontalAlignment="Left" Height="298.638" Margin="93.195,102.655,0,0" 
              VerticalAlignment="Top" Width="507.242">


        <DataGrid.Resources>
            <!--Design kopfzeile-->
            <Style TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="Background" Value="Gray"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="BorderThickness" Value="0,0,1,0" />
                <Setter Property="BorderBrush" Value="White"/>
                <Setter Property="Padding" Value="5 0 0 0"/>
            </Style>

            <!--Deaktivieren Des rowheader-->
            <Style TargetType="{x:Type DataGridRowHeader}">
                <Setter Property="Background" Value="Transparent"/>
            </Style>

        </DataGrid.Resources>
        <DataGrid.Columns>
            <DataGridTextColumn Width="*" Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="Artikelnummer" FontSize="10" IsReadOnly="True"/>
            <DataGridTextColumn Width="*"  Binding="{x:Null}" ClipboardContentBinding="{x:Null}" FontSize="10" Header="Artikelnummer" IsReadOnly="True"/>
            <DataGridTextColumn Width="*"  Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="Matchcode" IsReadOnly="True"/>
            <DataGridTextColumn Width="*"  Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="Hersteller" IsReadOnly="True"/>
            <DataGridCheckBoxColumn Width="*"  Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="CheckBox" />
        </DataGrid.Columns>
    </DataGrid>

    <!--!!!!!!Haupt DataGrid !!!!!-->
    <DataGrid AutoGenerateColumns="False" Height="282.293" HorizontalAlignment="Left" Margin="93.195,119,0,0" Name="gridd" VerticalAlignment="Top" Width="507.242" >
        <DataGrid.Columns >
            <DataGridTextColumn Width="*" Binding="{Binding Id}">
                <DataGridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Width="88.048">
                            <TextBox Name="IDSearcBox"  Width="88"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTextColumn.HeaderTemplate>
            </DataGridTextColumn>
            
            <DataGridTextColumn Width="*" Binding="{Binding Name}">
                <DataGridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Width="88.048">
                            <TextBox Name="IDSearcBox"  Width="88"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTextColumn.HeaderTemplate>
            </DataGridTextColumn>

            <DataGridTextColumn Width="*" Binding="{Binding Birthday}">
                <DataGridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Width="88.048">
                            <TextBox Name="IDSearcBox"  Width="88"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTextColumn.HeaderTemplate>
            </DataGridTextColumn>

            <DataGridTextColumn Width="*" Binding="{Binding ort}">
                <DataGridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Width="88.048">
                            <TextBox Name="IDSearcBox"  Width="88"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTextColumn.HeaderTemplate>
            </DataGridTextColumn>

            <DataGridTextColumn Width="*" Binding="{Binding alter}">
                <DataGridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Width="88.048">
                            <TextBox Name="IDSearcBox"  Width="88"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTextColumn.HeaderTemplate>
            </DataGridTextColumn>

        </DataGrid.Columns>
    </DataGrid>


</Grid>

在 C# 中：

public MainWindow()
    {
        InitializeComponent();

        List<User> users = new List<User>();
        users.Add(new User() { Id = 1, Name = "John Doe", ort="Berlin", Birthday = new DateTime(1971, 7, 23), alter=18, } );
        users.Add(new User() { Id = 2, Name = "Jane Doe", ort = "Köln", Birthday = new DateTime(1974, 1, 17), alter = 28, });
        users.Add(new User() { Id = 3, Name = "Sammy Doe", ort = "Bayern", Birthday = new DateTime(1991, 9, 2), alter = 38, });

        gridd.ItemsSource = users;

    }

    public class User
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string ort { get; set; }

        public DateTime Birthday { get; set; }

        public int alter { get; set; }
    }

Answer 1

So I created two DataGrids to realize this because i didnt find a better way to do this, but the solution is not very clean and I run into more and more problems.

是的，尝试同步两个 DataGrids 肯定会有问题。

你应该做的是将 TextBox 添加到（单个）DataGrid 的 header:

<DataGrid ...>
    <DataGrid.Columns>
        <DataGridTextColumn SortMemberPath="Id" Binding="{Binding Id}">
            <DataGridTextColumn.Header>
                <StackPanel>
                    <TextBlock Text="Id" />
                    <Separator />
                    <TextBox Name="IDSearcBox" Width="88"/>
                </StackPanel>
            </DataGridTextColumn.Header>
        </DataGridTextColumn>
        ...
    </DataGrid.Columns>
</DataGrid>

然后您将“免费”获得 built-in 排序功能。注意 SortMemberPath 属性.

的使用

您显然可以添加任何您想要的元素 header 并设置样式以使其看起来符合您的要求。

我如何通过我的 DataGrid 实现我有两个 headers？

How can I realize with my DataGrid that I have two headers?

wpf

xaml

datagrid