如何在应用列标题背景后添加回排序箭头
将背景颜色应用于列标题后，排序箭头丢失。怎么加回来呢？
After applying background color to columnheaders, the sort arrow is missing. How to add it back?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为您必须重新模板化 DataGridColumnHeader 并从那里添加它。这是一个例子。您必须添加对PresentationFramework.Aero的引用
I think you're gonna have to re-template the DataGridColumnHeader and add it from there. Here's an example. You're gonna have to add a reference to PresentationFramework.Aero
这是一篇博客文章，它很好地分解了 DataGridColumnHeader 的模板过程，并提供了结果的可视化。 Terry Hutt 的博客文章
演示了默认的列标题。单击列标题可重新排列列。您还可以通过拖动标题对列重新排序，并通过拖动标题两端的隐藏拇指来调整列的大小。标题本身显然是一个按钮，文本上方有一个可选的排序指示器。看起来很恶心。
让我们尝试更改标题的背景，使其不再是一个按钮。 DataGrid 有一个 ColumnHeaderStyle 属性。我们可以使用它，但为了简单起见，让我们通过将其添加到 XAML 来为列标题创建默认样式...
如果使用新样式运行项目，标题看起来会好得多。但是等等 - 我们的排序指标去了哪里？事实证明，DataGridColumnHeader 的样式经过精心设计，以便在更改背景颜色时隐藏排序指示器。有时我就是不明白微软是如何维持业务的。为什么您要设计如此丑陋的控件，然后在开发人员尝试修复它时破坏其他关键功能。
我们必须重新模板化 DataGridColumnHeader。当我们在那里的时候，让我们玩得开心吧！这就是我们要做的...
更改背景颜色
使用边框创建下划线
当鼠标悬停在标题上时更改边框的颜色
将排序指示器移至标题文本的一侧而不是上方
使列宽拇指不可见，但在其上方时更改光标
第 1 步 - 增强样式，使其看起来像这样...
第 2 步 - 编写 ControlTemplate定义标题区域、排序指示器、边框和拇指。网格控制标题的布局，内容区域位于左侧，排序指示器位于右侧。请注意，排序指示器是使用路径定义的。这两个矩形为列标题生成可见的左边缘和右边缘。必须定义 Thumbs 并允许用户调整列的大小。稍后我们将定义 ThumbStyle。注意边界的名称。我们需要这个，以便我们可以在步骤 3 中使用触发器来更改它。将其添加到结束 Style 标签之前。
第 3 步 - 添加触发器，以在鼠标移到列标题上时更改边框颜色。在网格结束标记后添加以下触发器。
第 4 步 - 添加触发器以在列排序时显示和/或旋转排序指示器。
第 5 步 - 隐藏第 0 列中的 LeftHeaderGripper - 我们不需要它。
正如所承诺的，这里是 ThumbStyle 定义。将其插入 DataGridColumnHeader 样式上方。我使用一个不可见的矩形，其光标为 SizeWE。如果您愿意，您可以给它上色或使用完全不同的东西。
** **更新：样式条目组合在一起 **
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 **
可能有更好的解决方案，但我只是根据排序方向将字符 ▴ 或 ▾ 附加到列标题。
There may be better solutions, but I simply appended the character ▴ or ▾ to the column header based on sort direction.