WPF DataGrid 行前景鼠标悬停颜色
我已经搞乱了数据网格样式几天了,现在有一个问题我似乎无法解决。
我想突出显示鼠标悬停在其上的行的文本。嗯,这似乎是一项简单的任务,但同时我想要行背景和前景的自定义选择颜色。这个组合对我来说似乎不可能解决。
如果我覆盖 datagridrow 样式,我可以获得除行上的选择样式之外的所有内容。如果我还覆盖 datagridcell 样式,我可以获得除鼠标悬停前景全行突出显示之外的所有内容。下面是我迄今为止想出的完整样式。我知道它包含相同任务的重复属性,但我一直在尝试一切。仅缺少完整的行鼠标悬停突出显示 - 仅突出显示悬停的单元格。
你能帮我解决这个小细节吗?
将以下代码放入 WPF 窗口中(我知道颜色很糟糕,它们仅用于示例):
<Window.Resources>
<XmlDataProvider x:Key="persondata"
Source="datagrid.xml"
XPath="Data" />
<!-- DataGrid -->
<Style x:Key="{x:Type DataGrid}"
TargetType="{x:Type DataGrid}">
<Setter Property="AlternatingRowBackground"
Value="Orange" />
<Setter Property="AlternationCount"
Value="2" />
<Setter Property="Background"
Value="Green" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Foreground"
Value="Cyan" />
<Setter Property="HeadersVisibility"
Value="Column" />
<Setter Property="RowBackground"
Value="Yellow" />
</Style>
<!-- Column header - remove header background -->
<Style x:Key="{x:Type DataGridColumnHeadersPresenter}"
TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<ItemsPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Column header sort arrow -->
<Style x:Key="ColumnHeaderSortArrowStyle"
TargetType="{x:Type Path}">
<Setter Property="Data"
Value="M0,0 L1,0 0.5,1 z" />
<Setter Property="Fill">
<Setter.Value>
<SolidColorBrush Color="Blue" />
</Setter.Value>
</Setter>
<Setter Property="Height"
Value="6" />
<Setter Property="Margin"
Value="0,0,8,0" />
<Setter Property="RenderTransformOrigin"
Value="0.5,0.4" />
<Setter Property="Stretch"
Value="Fill" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Visibility"
Value="Collapsed" />
<Setter Property="Width"
Value="8" />
</Style>
<!-- Column header gripper -->
<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>
<!-- Column header -->
<Style x:Key="{x:Type DataGridColumnHeader}"
TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Border BorderThickness="0,1,1,0"
Background="Black"
CornerRadius="5,5,0,0">
<Border.BorderBrush>
<SolidColorBrush Color="Red" />
</Border.BorderBrush>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Thumb x:Name="PART_LeftHeaderGripper"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Left"
Style="{StaticResource ColumnHeaderGripperStyle}" />
<ContentPresenter Grid.Column="0"
Grid.Row="0"
Margin="6,3,6,3"
VerticalAlignment="Center" />
<Path x:Name="SortArrow"
Grid.Column="1"
Grid.Row="0"
Style="{StaticResource ColumnHeaderSortArrowStyle}">
</Path>
<Thumb x:Name="PART_RightHeaderGripper"
Grid.Column="1"
Grid.Row="0"
HorizontalAlignment="Right"
Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="SortArrow"
Property="Fill">
<Setter.Value>
<SolidColorBrush Color="Blue" />
</Setter.Value>
</Setter>
</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 Property="Visibility"
Value="Collapsed"
TargetName="PART_LeftHeaderGripper"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Blue" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- Row -->
<Style x:Key="{x:Type DataGridRow}"
TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex"
Value="0">
<Setter Property="Background"
Value="Yellow" />
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Black" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex"
Value="1">
<Setter Property="Background"
Value="Orange" />
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Black" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Magenta" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="Brown" />
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="White" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- Cell -->
<Style x:Key="{x:Type DataGridCell}"
TargetType="{x:Type DataGridCell}">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Black" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Magenta" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="Brown" />
<Setter Property="BorderBrush"
Value="Brown" />
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="White" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<DataGrid AutoGenerateColumns="False"
ItemsSource="{Binding Source={StaticResource persondata}, XPath=Person}">
<DataGrid.Columns>
<DataGridTextColumn Header="First Name"
Binding="{Binding XPath=@Firstname}" />
<DataGridTextColumn Header="Last Name"
Binding="{Binding XPath=@Lastname}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
将以下 xml 放入同一解决方案中名为“datagrid.xml”的文件中:
<?xml version="1.0" encoding="utf-8" ?>
<Data>
<Person Firstname="Fred"
Lastname="Flintstone">
</Person>
<Person Firstname="Barney"
Lastname="Rubble">
</Person>
<Person Firstname="Joe"
Lastname="Rockhead">
</Person>
</Data>
谢谢...
I have been messing around with datagrid styling for a couple of days now, and I am having one issue left which I can not seem to solve.
I want to highligt the text of the row on which I hover with the mouse. Well this seems like an easy task, but at the same time I want custom selection color of the row background and foreground. This combination seems impossible for me to solve.
If I override the datagridrow style I can get everything but the selection style on the row. If I also override the datagridcell style, I can get everything but the mouseover foreground full row highlight. What I have below is complete styling I have come up with so far. I know it contains duplicate attributes for the same tasks, but I have been trying everything. Only the complete row mouseover highlight is missing - only the hovered cell is highlighted.
Can you help me solve this tiny detail?
Put the below code in a WPF Window (I know the coloring is awful, they are just for the example):
<Window.Resources>
<XmlDataProvider x:Key="persondata"
Source="datagrid.xml"
XPath="Data" />
<!-- DataGrid -->
<Style x:Key="{x:Type DataGrid}"
TargetType="{x:Type DataGrid}">
<Setter Property="AlternatingRowBackground"
Value="Orange" />
<Setter Property="AlternationCount"
Value="2" />
<Setter Property="Background"
Value="Green" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Foreground"
Value="Cyan" />
<Setter Property="HeadersVisibility"
Value="Column" />
<Setter Property="RowBackground"
Value="Yellow" />
</Style>
<!-- Column header - remove header background -->
<Style x:Key="{x:Type DataGridColumnHeadersPresenter}"
TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<ItemsPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Column header sort arrow -->
<Style x:Key="ColumnHeaderSortArrowStyle"
TargetType="{x:Type Path}">
<Setter Property="Data"
Value="M0,0 L1,0 0.5,1 z" />
<Setter Property="Fill">
<Setter.Value>
<SolidColorBrush Color="Blue" />
</Setter.Value>
</Setter>
<Setter Property="Height"
Value="6" />
<Setter Property="Margin"
Value="0,0,8,0" />
<Setter Property="RenderTransformOrigin"
Value="0.5,0.4" />
<Setter Property="Stretch"
Value="Fill" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Visibility"
Value="Collapsed" />
<Setter Property="Width"
Value="8" />
</Style>
<!-- Column header gripper -->
<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>
<!-- Column header -->
<Style x:Key="{x:Type DataGridColumnHeader}"
TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Border BorderThickness="0,1,1,0"
Background="Black"
CornerRadius="5,5,0,0">
<Border.BorderBrush>
<SolidColorBrush Color="Red" />
</Border.BorderBrush>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Thumb x:Name="PART_LeftHeaderGripper"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Left"
Style="{StaticResource ColumnHeaderGripperStyle}" />
<ContentPresenter Grid.Column="0"
Grid.Row="0"
Margin="6,3,6,3"
VerticalAlignment="Center" />
<Path x:Name="SortArrow"
Grid.Column="1"
Grid.Row="0"
Style="{StaticResource ColumnHeaderSortArrowStyle}">
</Path>
<Thumb x:Name="PART_RightHeaderGripper"
Grid.Column="1"
Grid.Row="0"
HorizontalAlignment="Right"
Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="SortArrow"
Property="Fill">
<Setter.Value>
<SolidColorBrush Color="Blue" />
</Setter.Value>
</Setter>
</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 Property="Visibility"
Value="Collapsed"
TargetName="PART_LeftHeaderGripper"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Blue" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- Row -->
<Style x:Key="{x:Type DataGridRow}"
TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex"
Value="0">
<Setter Property="Background"
Value="Yellow" />
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Black" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex"
Value="1">
<Setter Property="Background"
Value="Orange" />
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Black" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Magenta" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="Brown" />
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="White" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- Cell -->
<Style x:Key="{x:Type DataGridCell}"
TargetType="{x:Type DataGridCell}">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Black" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Magenta" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="Brown" />
<Setter Property="BorderBrush"
Value="Brown" />
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="White" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<DataGrid AutoGenerateColumns="False"
ItemsSource="{Binding Source={StaticResource persondata}, XPath=Person}">
<DataGrid.Columns>
<DataGridTextColumn Header="First Name"
Binding="{Binding XPath=@Firstname}" />
<DataGridTextColumn Header="Last Name"
Binding="{Binding XPath=@Lastname}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
Put the below xml in a file called "datagrid.xml" in the same solution:
<?xml version="1.0" encoding="utf-8" ?>
<Data>
<Person Firstname="Fred"
Lastname="Flintstone">
</Person>
<Person Firstname="Barney"
Lastname="Rubble">
</Person>
<Person Firstname="Joe"
Lastname="Rockhead">
</Person>
</Data>
Thank you...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好的 - 我最初的问题是,我使用了一个基本样式,所有其他样式都继承自它。这意味着诸如前景之类的样式会通过样式层次结构被多次覆盖。这件事搞砸了,足以使上述事情变得不可能。
我的解决方案是删除除 DataGrid 本身(datagridrowheader、datagridrow、datagridcell)之外的所有 datagrid 样式的 BasedOn 属性。仅在 DataGrid 上设置前景色,您可以毫无问题地在行和单元格样式中覆盖它。
/mfas
OK - my initial problem was, that I used a basestyle, which all other styles inherited from. This meant that styles such as Foreground was overriden multiple times through the style hierarchy. This messed thing up bad enough to make the above impossible.
The solution for me was to removed the BasedOn attribute of all datagrid styles except the DataGrid itself (datagridrowheader, datagridrow, datagridcell). Set the foreground color only on the DataGrid and you can override it in the row and cell styles with no problem.
/mfas