How can I edit the RowHeader in the DataGrid?

Question

The text box under id still belongs to the header and I would like to change the yellow marked field next to the header from this DataGrid so that it looks like the green marked field on picture 2.

Picture1:

Picture2:

My Datagrid Xaml Code is this:

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

How did I need to change the DataGrid to get this look? I think i need to change something in the DataGrid.Resources Part but I dont know how to change Picture 1 to Picture2

Edit: It now look like this but the Stack Panel i createt doesnt fill the entire Fild

Answer 1

A minimal example to demonstrate:

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

Instead of Ellipse, use the Image or Shape with Geometry you need.

In the upper left corner (to the left of the Columns Headers and above the Rows Header) there is a Button with a RoutedCommand Command =" {x: Static DataGrid.SelectAllCommand} ". The button gets the style from the dynamic key Style ="{DynamicResource {ComponentResourceKey ResourceId = DataGridSelectAllButtonStyle, TypeInTargetAssembly = {x: Type DataGrid}}}".

Here is the complete definition of a button in the default template for 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}}}" />

You can override the button style in the DataGrid resources using this key:

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

If you need another element instead of a Button, then for this you have to create your own template for the DataGrid.

Option for placing two elements vertically with a dividing line:

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

Answer 2

You can restyle that Button in the header by defining a adding a Style with a specific ComponentResourceKey key to <DataGrid.Resources>, e.g.:

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

You can set the Content property to whatever you want. The above TextBlock is just an example.