那些遇到过的问题

如何在应用Column标题的背景后添加排序箭头

use*_*949 25 silverlight wpf wpfdatagrid

将背景颜色应用于列标题后,缺少排序箭头.如何添加回来？

Fre*_*lad 41

我想你将不得不重新模板化DataGridColumnHeader并从那里添加它.这是一个例子.您将不得不添加对PresentationFramework.Aero的引用

xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

<DataGrid ...>
    <DataGrid.Resources>
        <Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
            <Setter Property="Width" Value="8"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Cursor" Value="SizeWE"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="BorderThickness" Value="1,1,1,1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                        <Grid>
                            <Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsClickable="{TemplateBinding CanUserSort}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}" Padding="{TemplateBinding Padding}" SortDirection="{TemplateBinding SortDirection}" SeparatorBrush="{TemplateBinding SeparatorBrush}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    <Path x:Name="SortArrow"
                                            Grid.Column="1"
                                            HorizontalAlignment="Right" VerticalAlignment="Center"                                           
                                            Width="8" Height="6" Margin="2,0,5,0"
                                            Stretch="Fill" Opacity="0.5" Fill="White"
                                            RenderTransformOrigin="0.5,0.4"
                                            Visibility="Collapsed"
                                            Data="M0,0 L1,0 0.5,1 z" />
                                </Grid>
                            </Themes:DataGridHeaderBorder>
                            <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                            <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="SortDirection" Value="Ascending">
                                <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                                <Setter TargetName="SortArrow" Property="RenderTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="180" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="SortDirection" Value="Descending">
                                <Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>
</DataGrid>
Run Code Online (Sandbox Code Playgroud)

  • 为什么这么复杂？有简单的方法吗？ (6认同)

Gal*_*tic 8

这是一篇博客文章，它很好地分解了 DataGridColumnHeader 的模板过程，并提供了结果的可视化。特里·哈特 (Terry Hutt) 的博客文章

他演示了默认的列标题。单击列标题可重新排列列。您还可以通过拖动标题对列重新排序，并通过拖动标题两端的隐藏拇指来调整列的大小。标题本身显然是一个按钮，文本上方有一个可选的排序指示器。看起来很恶心。

让我们尝试更改标题的背景，使其不再是一个按钮。DataGrid 有一个 ColumnHeaderStyle 属性。我们可以使用它，但为了简单起见，我们通过将其添加到 XAML 来为列标题创建默认样式...

<Window.Resources>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Background" Value="LightGray"/>
    </Style>
</Window.Resources>
Run Code Online (Sandbox Code Playgroud)

如果您使用新样式运行项目，标题看起来会好得多。但是等等 - 我们的排序指标去了哪里？事实证明，DataGridColumnHeader 的样式经过精心设计，以便在更改背景颜色时隐藏排序指示器。有时我就是不明白微软是如何维持业务的。为什么您要设计如此丑陋的控件，然后在开发人员尝试修复它时破坏其他关键功能。

我们必须重新模板化 DataGridColumnHeader。当我们在那里的时候，让我们玩得开心吧！这就是我们要做的......

更改背景颜色 使用边框创建下划线 当鼠标悬停在标题上方时更改边框的颜色 将排序指示符移至标题文本的一侧而不是上方 使列宽拇指不可见，但在其出现时更改光标在他们之上

第 1 步- 加强样式，使其看起来像这样......

<Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="MinHeight" Value="0"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Background" Value="LightGray"/>
    <Setter Property="Cursor" Value="Hand"/>
</Style>
Run Code Online (Sandbox Code Playgroud)

步骤 2 - 编写定义标题区域、排序指示符、边框和缩略图的 ControlTemplate。网格控制标题的布局，内容区域位于左侧，排序指示器位于右侧。请注意，排序指示器是使用路径定义的。这两个矩形为列标题生成可见的左边缘和右边缘。必须定义 Thumbs 并允许用户调整列的大小。稍后我们将定义 ThumbStyle。注意边界的名称。我们需要这个，以便我们可以在步骤 3 中使用触发器来更改它。将其添加到结束 Style 标签之前。

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Border x:Name="BackgroundBorder" BorderThickness="0,0,0,2"
                        Background="LightGray"
                        BorderBrush="Black"
                        Grid.ColumnSpan="2"/>
                <ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center"/>
                <Path x:Name="SortArrow" Visibility="Collapsed" Data="M 0,0 L 1,0 0.5,1 z" Stretch="Fill"
                     Grid.Column="1" Width="8" Height="6" Fill="Black" Margin="0,0,8,0"
                      VerticalAlignment="Center" RenderTransformOrigin="0.5, 0.4"/>
                <Rectangle Width="1" Fill="#EEEEEE" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
                <Rectangle Width="1" Margin="0,0,1,0" Fill="#DDDDDD" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
                <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ThumbStyle}"/>
                <Thumb x:Name="PART_RightHeaderGripper" Grid.Column="1" HorizontalAlignment="Right" Style="{StaticResource ThumbStyle}"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>
Run Code Online (Sandbox Code Playgroud)

步骤 3 - 添加触发器，以在鼠标移到列标题上时更改边框颜色。在网格结束标记后添加以下触发器。

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="BackgroundBorder" Property="Background" Value="LightGray"/>
        <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="Orange"/>
    </Trigger>
</ControlTemplate.Triggers>
Run Code Online (Sandbox Code Playgroud)

步骤 4 - 添加触发器以在列排序时显示和/或旋转排序指示器。

<Trigger Property="SortDirection" Value="Ascending">
    <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
    <Setter TargetName="SortArrow" Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="180"/>
        </Setter.Value>
    </Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
    <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
</Trigger>
Run Code Online (Sandbox Code Playgroud)

第 5 步- 隐藏第 0 列中的 LeftHeaderGripper - 我们不需要它。

<Trigger Property="DisplayIndex" Value="0">
    <Setter TargetName="PART_LeftHeaderGripper" Property="Visibility" Value="Collapsed"/>
</Trigger>
Run Code Online (Sandbox Code Playgroud)

正如所承诺的，这里是 ThumbStyle 定义。将其插入 DataGridColumnHeader 样式上方。我使用一个不可见的矩形，其光标为 SizeWE。如果您愿意，您可以给它上色或使用完全不同的东西。

<Style TargetType="{x:Type Thumb}" x:Key="ThumbStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Rectangle Width="1" Stroke="Transparent" Cursor="SizeWE"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Run Code Online (Sandbox Code Playgroud)

** **更新：样式条目合并在一起 **

<FontFamily x:Key="Corp_FontFamily">Segoe UI</FontFamily>
<clr:Double x:Key="Corp_FontSize">13</clr:Double>
<Style TargetType="{x:Type Control}" x:Key="baseStyle">
    <Setter Property="FontFamily" Value="{StaticResource Corp_FontFamily}" />
    <Setter Property="FontSize" Value="{StaticResource Corp_FontSize}" />
</Style>

<Color x:Key="CorpBlue_T1S1" A="255" R="172" G="180" B="196"/>
<SolidColorBrush x:Key="Brush_CorpBlue_T1S1" Color="{StaticResource CorpBlue_T1S1}"/>

<Color x:Key="CLR_Green" A="255" R="220" G="239" B="202"/>
<SolidColorBrush x:Key="YourCompany_HeaderColumnDefaultBackground" Color="{StaticResource CLR_Green}"/>

<Style TargetType="DataGridColumnHeader" x:Key="DG_Hdr_Base" BasedOn="{StaticResource baseStyle}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="MinWidth" Value="0"/>
    <Setter Property="MinHeight" Value="0"/>
    <Setter Property="Background" Value="{StaticResource YourCompany_HeaderColumnDefaultBackground}"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="BorderThickness" Value="0 0 1 0"/>
    <Setter Property="BorderBrush" Value="DarkGray"/>
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="TextBlock.TextAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DataGridColumnHeader">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="BackgroundBorder" BorderThickness="0,0,0,2"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Grid.ColumnSpan="2"/>
                    <ContentPresenter Margin="5" VerticalAlignment="Center" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                    <Path x:Name="SortArrow" Visibility="Collapsed" Data="M 0,0 L 1,0 0.5,1 z" Stretch="Fill"
                         Grid.Column="1" Width="8" Height="6" Fill="Black" Margin="0,0,8,0"
                          VerticalAlignment="Center" RenderTransformOrigin="0.5, 0.4"/>
                    <Rectangle Width="1" Fill="DarkGray" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
                    <Rectangle Width="1" Margin="0,0,1,0" Fill="DarkGray" HorizontalAlignment="Right" Grid.ColumnSpan="2"/>
                    <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ThumbStyle}"/>
                    <Thumb x:Name="PART_RightHeaderGripper" Grid.Column="1" HorizontalAlignment="Right" Style="{StaticResource ThumbStyle}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource Brush_CorpBlue_T1S1}"/>
                        <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource ControlHighlightBorderBrush}"/>
                    </Trigger>
                    <Trigger Property="SortDirection" Value="Ascending">
                        <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="SortArrow" Property="RenderTransform">
                            <Setter.Value>
                                <RotateTransform Angle="180"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="SortDirection" Value="Descending">
                        <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="DisplayIndex" Value="0">
                        <Setter TargetName="PART_LeftHeaderGripper" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Run Code Online (Sandbox Code Playgroud)

显示结果

归档时间：

查看次数：

12726 次

最近记录：

6 年，5 月 前
相关归档
更改WPF窗口的启动位置 43
ListView.GridViewColumn(*)width 39
Silverlight 3:ListBox DataTemplate Horizo​​ntalAlignment 28
PhoneApplicationPage何时处理？ 9
不一致的Silverlight 4 ComboBox下拉显示 6
如何使隐式滚动查看器出现在左侧而不是右侧 6
如何从Web浏览器中的Silverlight应用程序捕获图像 5
在Silverlight 5中实现真正的模式对话框 3
有哪些可用于解决WPF和Silverlight数据绑定问题的工具？ 1
构造函数不能自称c# 1
难疑归档
使用Git版本控制查看文件的更改历史记录 2920
循环内的JavaScript闭包 - 简单实用的例子 2689
如何检查SQL Server表中是否存在列？ 1792
在Mac上查找(并终止)进程锁定端口3000 1595
在Node.js中编写文件 1538
Git如何处理符号链接？ 1515
我怎样才能存储特定文件？ 1422
如何通过curl调用使用HTTP请求发送标头？ 1328
确定数组是否包含值 1300
如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表 1146