如何编辑 DataGrid 中的 RowHeader?

How can I edit the RowHeader in the DataGrid?

id 下的文本框仍然属于 header,我想更改此 DataGrid header 旁边的黄色标记字段,使其看起来像图2.

图片1:

图片2:

我的Datagrid Xaml代码是这样的:

<DataGrid ItemsSource="{Binding Persons}" AutoGenerateColumns="False" Height="345"  Margin="52,76,5,0" x:Name="gridd" Width="619" >

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

            <Style TargetType="{x:Type DataGridCell}">
                <Setter Property="BorderBrush" Value="Gray"/>
                <Setter Property="BorderThickness" Value="0,0,1,0" />
            </Style>

            <Style TargetType="{x:Type DataGridRowHeader}">
                <Setter Property="Width" Value="15"/>
                <Setter Property="Height" Value="20"/>
                <Setter Property="Background" Value="White"/>
                <Setter Property="BorderBrush" Value="Gray"/>
                <Setter Property="BorderThickness" Value="1,1,1,1"/>
            </Style>
        </DataGrid.Resources>

        <DataGrid.Columns>
            <DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Id}" CanUserResize="False" IsReadOnly="True">
                <DataGridTextColumn.Header>
                    <StackPanel>
                        <TextBlock Text="Id" Margin="3 0 0 0" Width="148" Height="17"/>
                        <Separator Background="White" Width="125" />
                        <TextBox x:Name="IDSearcBox" Width="113" Height="19" Margin="0 0 0 2"  Text="{Binding QueryforID, UpdateSourceTrigger=PropertyChanged}" />
                    </StackPanel>
                </DataGridTextColumn.Header>
            </DataGridTextColumn>

            <DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Name}" CanUserResize="False" IsReadOnly="True">
                <DataGridTextColumn.Header>
                    <StackPanel>
                        <TextBlock Text="Name" Margin="3 0 0 0" Width="148" Height="17"/>
                        <Separator  Background="White" Width="125" />
                        <TextBox x:Name="Name" Width="113" Height="19" Margin="0 0 0 2"  Text="{Binding Queryforname, UpdateSourceTrigger=PropertyChanged}"/>
                    </StackPanel>
                </DataGridTextColumn.Header>
            </DataGridTextColumn>

            <DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Country}" CanUserResize="False" IsReadOnly="True">
                <DataGridTextColumn.Header>
                    <StackPanel>
                        <TextBlock Text="Land" Margin="3 0 0 0" Width="148" Height="17"/>
                        <Separator Background="White" Width="125"/>
                        <TextBox x:Name="Birthday" Width="113" Height="19" Margin="0 0 0 2"  Text="{Binding QueryforCountry, UpdateSourceTrigger=PropertyChanged}" />
                    </StackPanel>
                </DataGridTextColumn.Header>
            </DataGridTextColumn>


            <DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Location}" CanUserResize="False" IsReadOnly="True">
                <DataGridTextColumn.Header>
                    <StackPanel>
                        <TextBlock Text="Ort" Margin="3 0 0 0" Width="148" Height="17"/>
                        <Separator Background="White" Width="125" />
                        <TextBox x:Name="Ort" Width="113" Height="19" Margin="0 0 0 2"   Text="{Binding QueryforLocation, UpdateSourceTrigger=PropertyChanged}"/>
                    </StackPanel>
                </DataGridTextColumn.Header>
            </DataGridTextColumn>


            <DataGridTextColumn SortMemberPath="Id" Binding="{Binding Age}" CanUserResize="False" IsReadOnly="True">
                <DataGridTextColumn.Header>
                    <StackPanel>
                        <TextBlock Text="Alter" Margin="0 0 0 0" Width="115" Height="17"/>
                        <Separator Background="White" Width="125"/>
                        <TextBox x:Name="alter" Width="119" Height="19" Margin="0 0 0 2" Text="{Binding QueryforAge, UpdateSourceTrigger=PropertyChanged}"/>
                    </StackPanel>
                </DataGridTextColumn.Header>
            </DataGridTextColumn>


        </DataGrid.Columns>

    </DataGrid>

我需要如何更改 DataGrid 才能获得这种外观?我想我需要更改 DataGrid.Resources 部分中的某些内容,但我不知道如何将图片 1 更改为图片 2

编辑: 现在看起来像这样,但是我创建的 Stack Panel 没有填满整个 Fild

一个演示的最小示例:

<DataGrid>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Mode=OneWay}"/>
    </DataGrid.Columns>
    <DataGrid.ItemsSource>
        <x:Array Type="{x:Type sys:String}">
            <sys:String>One</sys:String>
            <sys:String>Two</sys:String>
            <sys:String>Three</sys:String>
        </x:Array>
    </DataGrid.ItemsSource>
    <DataGrid.RowHeaderTemplate>
        <DataTemplate>
            <Ellipse Width="10" Height="10" Fill="Red"/>
        </DataTemplate>
    </DataGrid.RowHeaderTemplate>
</DataGrid>

不要使用椭圆,而是使用您需要的带几何图形的图像或形状。

在左上角(列 Header 的左侧和行 Header 的上方)有一个带有 RoutedCommand Command =" {x: Static DataGrid.SelectAllCommand} " 的按钮。 该按钮从动态键 Style ="{DynamicResource {ComponentResourceKey ResourceId = DataGridSelectAllButtonStyle, TypeInTargetAssembly = {x: Type DataGrid}}}".

获取样式

以下是 DataGrid 默认模板中按钮的完整定义:

<Button Command = "{x: Static DataGrid.SelectAllCommand}"
        Focusable = "false"
        Style = "{DynamicResource {ComponentResourceKey ResourceId = DataGridSelectAllButtonStyle, TypeInTargetAssembly = {x: Type DataGrid}}}"
        Visibility = "{Binding HeadersVisibility, ConverterParameter = {x: Static DataGridHeadersVisibility.All}, Converter = {x: Static DataGrid.HeadersVisibilityConverter}, RelativeSource = {RelativeSource AncestorType = {x: Type DataGrid}}}"
        Width = "{Binding CellsPanelHorizontalOffset, RelativeSource = {RelativeSource AncestorType = {x: Type DataGrid}}}" />

您可以使用此键覆盖 DataGrid 资源中的按钮样式:

<DataGrid>
    <DataGrid.Resources>
        <Style TargetType="Button" x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Ellipse Width="10" Height="10" Fill="Green"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Mode=OneWay}" ClipboardContentBinding="{x:Null}"/>
    </DataGrid.Columns>
    <DataGrid.ItemsSource>
        <x:Array Type="{x:Type sys:String}">
            <sys:String>One</sys:String>
            <sys:String>Two</sys:String>
            <sys:String>Three</sys:String>
        </x:Array>
    </DataGrid.ItemsSource>
    <DataGrid.RowHeaderTemplate>
        <DataTemplate>
            <Ellipse Width="10" Height="10" Fill="Red"/>
        </DataTemplate>
    </DataGrid.RowHeaderTemplate>
</DataGrid>

如果您需要另一个元素而不是 Button,那么您必须为此创建自己的 DataGrid 模板。

用分界线垂直放置两个元素的选项:

<DataGrid>
    <DataGrid.Resources>
        <Style TargetType="Button" x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Ellipse Width="10" Height="10" Fill="Aqua"/>
                            <Rectangle Grid.Row="1" Fill="Yellow" Height="2" Margin="0 2"/>
                            <Ellipse Grid.Row="2" Width="10" Height="10" Fill="Green"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>

您可以通过定义向 添加具有特定 ComponentResourceKey 键的 Style 来重新设置 header 中的 Button 样式,例如:

<Style x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}"
       TargetType="Button">
    <Setter Property="Content">
        <Setter.Value>
            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE71C;" />
        </Setter.Value>
    </Setter>
</Style>

您可以将 Content 属性 设置为您想要的任何值。以上TextBlock只是一个例子