Shift icon on Datagrid column header in WPF

Question

I have a datagrid for which I want to support excel like filter functionality. Here is the screenshot of the column header:

I have added a filter icon next to column header. The problem is that this icon should be shifted to the right most side of the column. Just where the empty circle is. The column can be resized by user using dragging with mouse and therefore the icon should stick to the right end of the column when user increases or decreases the width. Here is the code:

<DataGridHyperlinkColumn Binding="{Binding PackageName}"  MinWidth="250" IsReadOnly="True" >
                        <DataGridHyperlinkColumn.Header>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Package Name"/>
                                <Button Name="PackageNameFilter" Click="PackageNameFilter_Click" HorizontalAlignment="Right">
                                    <Button.Template>
                                        <ControlTemplate>
                                            <Image Source="/Resources/filter.png" Width="10" Height="10"/>
                                        </ControlTemplate>
                                    </Button.Template>
                                </Button>
                            </StackPanel>
                        </DataGridHyperlinkColumn.Header>

How can I achieve this?

Answer 1

I am writing this on the fly. It will give you an idea to overcome the issue. You can achieve this by either using Grid or DockPanel . Here is the one using DockPanel

<DataGridHyperlinkColumn.Header>
    <DockPanel>
         <TextBlock Text="Package Name"/>
         <Button DockPanel.Dock="Right" />
    </DockPanel>
</DataGridHyperlinkColumn.Header>

EDIT:

Update based on comments, you have to stretch the width of the column header to occupy the full width as mentioned by @grek40

<DataGridTextColumn.HeaderStyle>
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</DataGridTextColumn.HeaderStyle>

Hope that helps.

Answer 2

You need to ensure that the header content is actually using the size of the header. I'm using Dockpanel similar to Gopichandar's answer and a HeaderStyle definition.

<DataGridHyperlinkColumn Binding="{Binding Test}" Width="*">
    <DataGridHyperlinkColumn.Header>
        <DockPanel LastChildFill="False">
            <TextBlock Text="Header Text"/>
            <Button DockPanel.Dock="Right" Content="Filter"/>
        </DockPanel>
    </DataGridHyperlinkColumn.Header>
    <DataGridHyperlinkColumn.HeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </DataGridHyperlinkColumn.HeaderStyle>
</DataGridHyperlinkColumn>