Fixing DataGrid Header Sort on user-defined header using a StackPanel

I have a DataGrid, filled from an ObservableCollection.

                <Style x:Key="DGHdr_2LineNormal" TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="Height"                       Value="40" />
                <Setter Property="Margin"                       Value="0,2,0,0" />
                <Setter Property="VerticalAlignment"            Value="Bottom" />
                <Setter Property="VerticalContentAlignment"     Value="Bottom" />
                <Setter Property="HorizontalAlignment"          Value="Stretch" />
                <Setter Property="HorizontalContentAlignment"   Value="Center" />
            </Style>

            ...........................

        <DataGrid Grid.Row="1"
                  AutoGenerateColumns="False"
                  IsReadOnly="True"
                  SelectionMode="Single"
                  SelectionUnit="FullRow"
                  GridLinesVisibility="None"
                  Name="MatipBatapConfigList"               
                  ColumnHeaderStyle="{StaticResource DGHdr_2LineNormal}"
                  ItemsSource="{Binding}">
            ...........................
        </DataGrid>

Several of the ColumnHeaderStyle items are "normal" (1 line of text):

                <DataGridTextColumn Binding="{Binding Path=CurrentItem.hdrSystemName}"
                        Header="Name">

but for some, I use a StackPanel so I can have multiple lines, using TextBox items, varying the font size between them:

            <Style x:Key="DGHdr_2LineStackPanel" TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="Width"                        Value="Auto" />
                <Setter Property="Height"                       Value="40" />
                <Setter Property="Margin"                       Value="0,0,0,-2" />
                <Setter Property="HorizontalAlignment"          Value="Stretch" />
                <Setter Property="HorizontalContentAlignment"   Value="Center" />
            </Style>

            ...........................

                <DataGridTextColumn Binding="{Binding Path=CurrentItem.DestAddr}"
                        HeaderStyle="{StaticResource DGHdr_2LineStackPanel}" >
                    <DataGridTextColumn.Header>
                        <StackPanel Orientation="Vertical" Margin="0,0,0,-2">
                            <TextBox Text="Destination" IsReadOnly="True"
                                     HorizontalAlignment="Center" Margin="0" BorderThickness="0" FontSize="9"
                                     VerticalAlignment="Bottom" Width="Auto" Padding="0" Height="16" Background="Transparent"/>
                            <TextBox Text="Address"  IsReadOnly="True"
                                     HorizontalAlignment="Center" Margin="0" BorderThickness="0"
                                     VerticalAlignment="Bottom" Width="Auto" Padding="0" Height="18" Background="Transparent"/>
                        </StackPanel>
                    </DataGridTextColumn.Header>
                </DataGridTextColumn>

The problem I have is on sorting each column. In the "normal" case, I can click anywhere on the column header to sort it. In the StackPanel case, though, there is only a thin, 4-pixel high area at the top (the height of the sort arrow) in which you can sort the column.

Is there a way to change the StackPanel cases such that it acts like the "normal" case, in that you can click anywhere in the header to sort it?

Solution

Replace the TextBox elements with TextBlock elements in the header, or set the IsHitTestVisible property of the TextBox elements to false:

<StackPanel Orientation="Vertical" Margin="0,0,0,-2">
    <TextBox Text="Destination" IsReadOnly="True" IsHitTestVisible="False"
                                HorizontalAlignment="Center" Margin="0" BorderThickness="0" FontSize="9"
                                VerticalAlignment="Bottom" Width="Auto" Padding="0" Height="16" Background="Transparent"/>
    <TextBox Text="Address"  IsReadOnly="True" IsHitTestVisible="False"
                            HorizontalAlignment="Center" Margin="0" BorderThickness="0"
                            VerticalAlignment="Bottom" Width="Auto" Padding="0" Height="18" Background="Transparent"/>
</StackPanel>