How to add back the sort arrow after applying background of Column headers

Question

After applying background color to columnheaders, the sort arrow is missing. How to add it back?

Answer 1

Here is a blog post that breaks down the template process for the DataGridColumnHeader very well and provides a visual of the result. Blog post by Terry Hutt

his demonstrates the default column header. Click on the column headers to resort the columns. You can also resequence the columns by dragging the header and resize them by dragging hidden thumbs at either end of the header The header itself obviously a button with an optional sort indicator above the text. It looks pretty nasty.

Let's try to change the background of the header so it isn't so obviously a button. The DataGrid has a ColumnHeaderStyle attribute. We could use that but for simplicity let's create a default style for our column headers by adding this to the XAML...

If you run the project with the new style the header looks much better. But wait - where did our sort indicators go? It turns out that the DataGridColumnHeader is deliberately styled so that the sort indicator is hidden if you change the background color. Sometimes I just don't understand how Microsoft stays in business. Why would you style such an ugly control and then break other critical functionality when the developer tries to fix it.

We have to re-template the DataGridColumnHeader. While we're in there, lets have some fun! This is what we're going to do...

Change the background color Use a border to create an underline Change the color of the border when the mouse is over the header Move the sort indicator to the side of the header text instead of above Make the column width thumbs invisible but change the cursor when it's over them

Step 1 - Beef the style up so it looks like this...

Step 2 - Write the ControlTemplate that defines the header area, the sort indicator, the border, and the thumbs. The Grid controls the layout of the header, with the Content area on the left and the Sort Indicator on the right. Note the Sort Indicator is defined using a Path. The two rectangles produce a visible left and right edge for the column headers. The Thumbs must be defined and allow the user to resize the columns. We will define the ThumbStyle later. Notice the name of the Border. We need this so we can alter it using triggers in step 3. Add this before the closing Style tag.

Step 3 - Add triggers to change the color of the border when the mouse moves over the column header. Add the following triggers after the Grid closing tag.

Step 4 - Add triggers to display and/or rotate the Sort Indicator when the column is sorted.

Step 5 - Hide the LeftHeaderGripper in column 0 - we don't need it.

As promised, here is the ThumbStyle definition. Insert it above the DataGridColumnHeader style. I use an invisible rectangle with a cursor of SizeWE. You could color it or use something completely different if you chose.

** **UPDATE: Style Entries Combined Together **

Segoe UI
13