Question

I’ve got a design requirement for a pretty strange grid… looks like this:

grid http://img219.imageshack.us/img219/3444/columns.png

I need to be able to sort on the headers in both rows… so if they click “Description”, it sorts by description. If they click “Status”, it sorts by status. Using templates on the column headers, I could achieve the look, but I can’t seem to figure out a way to get each individual unit to function as a distinct header. How exactly can I go about this?

EDIT: To create the column headers, I did this:

<StackPanel Orientation="Vertical" >
     <Border Margin=".5" Background="{StaticResource DarkBlueBackground}" >
           <Button Margin="6" Style="{StaticResource StaticLinkButton}"">
                <TextBlock HorizontalAlignment="Left" Text="Part Number" MinWidth="40"  />
           </Button>
     </Border>

     <Border Margin=".5" Background="{StaticResource LightBlueBackground}" MinWidth="120">
            <Button  Margin="6" Style="{StaticResource StaticLinkButton}" Content="Part Type"/>
     </Border>
 </StackPanel>

, which works for the most part. The problem is that, when I have a particularly long data item (like a long ‘part type’), it stretches out the column, but the border around my “Part Type” header doesn’t stretch. I tried using a grid instead of a stack panel as well, but with the same results. Is there a relatively simple way to get the borders/buttons/textblocks in the headers to stretch out to the full width of the column?

Edit 2
Showing header template code per request:

<DataGridTemplateColumn.HeaderTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical" >
            <StackPanel Orientation="Horizontal">
                <Border Margin=".5" >
                    <Button Margin="6" Style="{StaticResource StaticLinkButton}" >
                        <TextBlock Text="Qty OH" />
                    </Button>
                </Border>
                <Border Margin=".5" >
                    <Button Margin="6" Style="{StaticResource StaticLinkButton}" >
                        <TextBlock Text="Ord Qty" />
                    </Button>
                </Border>
                <Border Margin=".5" >
                    <Button Margin="6" Style="{StaticResource StaticLinkButton}" >
                        <TextBlock Text="Ret Qty" />
                    </Button>
                </Border>
                <Border Margin=".5" >
                    <Button Margin="6" Style="{StaticResource StaticLinkButton}" >
                        <TextBlock Text="Rec Qty" />
                    </Button>
                </Border>
                <Border Margin=".5" >
                    <Button Margin="6" Style="{StaticResource StaticLinkButton}" KeyboardNavigation.IsTabStop="False" >
                        <TextBlock MinWidth="90" MinHeight="27" Text="Quantity" />
                    </Button>
                </Border>
            </StackPanel>
            <Border Margin=".5" Background="{StaticResource LightBlueBackground}">
                <Button ="Part Type" KeyboardNavigation.IsTabStop="False"/>
            </Border>
        </StackPanel>
    </DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>

Answer 1

You can wrap the TextBlocks or whatever you have in “invisible” buttons and handle their clicks or check in some main handler what the e.OriginalSource is. (Commands may also be an option)

To make buttons “invisible” you can apply a simple style which makes the button only show its contents:

<Style x:Key="LooklessButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <ContentPresenter />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>