在对列标题应用背景颜色后,排序箭头不见了。如何将其添加回来?
我认为你需要重新设计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>
<Window.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="LightGray"/>
</Style>
</Window.Resources>
<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>
第二步 - 编写控件模板,定义标题区域、排序指示器、边框和拇指。网格控件负责标题的布局,内容区域位于左侧,排序指示器位于右侧。请注意,排序指示器是使用路径定义的。两个矩形为列标题产生可见的左右边缘。必须定义Thumb并允许用户调整列大小。我们稍后将定义ThumbStyle。请注意Border的名称。我们需要这样做,以便在第三步中使用触发器进行更改。请在闭合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>
步骤三- 当鼠标移动到列标题上时,添加触发器以更改边框的颜色。在Grid结束标记后添加以下触发器。
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BackgroundBorder" Property="Background" Value="LightGray"/>
<Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="Orange"/>
</Trigger>
</ControlTemplate.Triggers>
步骤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>
步骤五 - 隐藏第0列的LeftHeaderGripper - 我们不需要它。
<Trigger Property="DisplayIndex" Value="0">
<Setter TargetName="PART_LeftHeaderGripper" Property="Visibility" Value="Collapsed"/>
</Trigger>
如承诺,这里是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>
更新:风格条目已合并在一起
<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>
可能有更好的解决方案,但我只是根据排序方向将字符▴或▾附加到列标题上。
最初的回答:
There may be better solutions, but I simply appended the character ▴ or ▾ to the column header based on sort direction.