У меня есть дизайн от нашего проекта UI Designer. Дизайн предназначен для сеток данных в нашем приложении. В проекте он определил, что сетка данных всегда должна иметь левое поле размером 32 пикселя, НО горизонтальные линии сетки должны продолжаться до края контейнера.
Для этого я решил добавить RowHeader, который даст мне желаемый результат. Проблема, с которой я столкнулся, заключается в том, что при наведении курсора мыши на DataGridRow я меняю фон строки, но RowHeader не перекрашивается. Я добавил триггер MouseOver в RowHeader, но это работает только тогда, когда MouseOver находится в RowHeader.
Может ли кто-нибудь подсказать, как установить фон RowHeader в строке MouseOver.
Вот как мой DataGrid выглядит на экране. Я навел курсор на строку, чтобы выделить проблему, с которой столкнулся:
Мой текущий стиль для DataGrid:
<Style TargetType = "{x:Type DataGrid}">
<Setter Property = "AutoGenerateColumns" Value = "False" />
<Setter Property = "Background" Value = "{DynamicResource BackgroundBrush}" />
<Setter Property = "BorderBrush" Value = "{DynamicResource DataGridColumnHeader.BorderBrush}" />
<Setter Property = "BorderThickness" Value = "0"/>
<Setter Property = "CanUserReorderColumns" Value = "False" />
<Setter Property = "CanUserResizeColumns" Value = "False" />
<Setter Property = "CanUserResizeRows" Value = "False" />
<Setter Property = "ColumnHeaderHeight" Value = "44" />
<Setter Property = "Cursor" Value = "Hand" />
<Setter Property = "FontFamily" Value = "{DynamicResource Inter}" />
<Setter Property = "FontSize" Value = "{DynamicResource Font_Medium}" />
<Setter Property = "FontWeight" Value = "{DynamicResource 500}" />
<Setter Property = "FocusVisualStyle" Value = "{x:Null}" />
<Setter Property = "Foreground" Value = "{DynamicResource ForegroundBrush}"/>
<Setter Property = "GridLinesVisibility" Value = "Horizontal" />
<Setter Property = "HeadersVisibility" Value = "All" />
<Setter Property = "HorizontalGridLinesBrush" Value = "{DynamicResource DataGrid.GridLines.BorderBrush}" />
<Setter Property = "IsReadOnly" Value = "True" />
<Setter Property = "RowDetailsVisibilityMode" Value = "VisibleWhenSelected"/>
<Setter Property = "RowHeaderWidth" Value = "32" />
<Setter Property = "RowHeight" Value = "40" />
<Setter Property = "ScrollViewer.CanContentScroll" Value = "true"/>
<Setter Property = "ScrollViewer.PanningMode" Value = "Both"/>
<Setter Property = "SelectionMode" Value = "Single" />
<Setter Property = "SelectionUnit" Value = "FullRow" />
<Setter Property = "Stylus.IsFlicksEnabled" Value = "False"/>
<Setter Property = "VerticalContentAlignment" Value = "Center" />
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType = "{x:Type DataGrid}">
<Border Background = "{TemplateBinding Background}"
BorderBrush = "{TemplateBinding BorderBrush}"
BorderThickness = "{TemplateBinding BorderThickness}"
Padding = "{TemplateBinding Padding}"
SnapsToDevicePixels = "True">
<ScrollViewer x:Name = "dataGridScrollViewer"
Focusable = "false">
<ScrollViewer.Template>
<ControlTemplate TargetType = "{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto"/>
<ColumnDefinition Width = "*"/>
<ColumnDefinition Width = "Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto"/>
<RowDefinition Height = "*"/>
<RowDefinition Height = "Auto"/>
</Grid.RowDefinitions>
<Border Background = "{Binding Background, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}"
BorderBrush = "{Binding BorderBrush, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}"
BorderThickness = "0,0,0,1"
Grid.Column = "0"
Grid.Row = "0"
Opacity = "1"
Width = "{Binding CellsPanelHorizontalOffset, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<DataGridColumnHeadersPresenter x:Name = "PART_ColumnHeadersPresenter"
Grid.Column = "1"
Visibility = "{Binding HeadersVisibility, ConverterParameter = {x:Static DataGridHeadersVisibility.Column},
Converter = {x:Static DataGrid.HeadersVisibilityConverter},
RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}"/>
<ScrollContentPresenter x:Name = "PART_ScrollContentPresenter"
CanContentScroll = "{TemplateBinding CanContentScroll}"
Grid.ColumnSpan = "2" Grid.Row = "1"/>
<ScrollBar x:Name = "PART_VerticalScrollBar"
Grid.Column = "2"
Grid.Row = "1"
Maximum = "{TemplateBinding ScrollableHeight}"
Orientation = "Vertical"
Value = "{Binding VerticalOffset, Mode=OneWay, RelativeSource = {RelativeSource Mode=TemplatedParent}}"
ViewportSize = "{TemplateBinding ViewportHeight}"
Visibility = "{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<Grid Grid.Column = "1"
Grid.Row = "2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}"/>
<ColumnDefinition Width = "*"/>
</Grid.ColumnDefinitions>
<ScrollBar x:Name = "PART_HorizontalScrollBar"
Grid.Column = "1"
Maximum = "{TemplateBinding ScrollableWidth}"
Orientation = "Horizontal"
Value = "{Binding HorizontalOffset, Mode=OneWay, RelativeSource = {RelativeSource Mode=TemplatedParent}}"
ViewportSize = "{TemplateBinding ViewportWidth}"
Visibility = "{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels = "{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property = "CellStyle">
<Setter.Value>
<Style TargetType = "{x:Type DataGridCell}">
<Setter Property = "Background" Value = "Transparent" />
<Setter Property = "BorderBrush" Value = "{Binding BorderBrush, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Cursor" Value = "Hand" />
<Setter Property = "FontFamily" Value = "{Binding FontFamily, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "FontSize" Value = "{Binding FontSize, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "FontWeight" Value = "{Binding FontWeight, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Foreground" Value = "{Binding Foreground, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType = "{x:Type DataGridCell}">
<Grid Background = "{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment = "Left"
VerticalAlignment = "Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property = "IsSelected" Value = "True">
<Setter Property = "Foreground" Value = "{DynamicResource DataGrid.Foreground.Focus}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property = "RowStyle">
<Setter.Value>
<Style TargetType = "{x:Type DataGridRow}">
<Setter Property = "Background" Value = "{Binding Background, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Foreground" Value = "{Binding Foreground, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Style.Triggers>
<Trigger Property = "IsMouseOver" Value = "True">
<Setter Property = "Background" Value = "{DynamicResource DataGrid.Background.Hover}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property = "IsSelected" Value = "True"/>
<Condition Property = "Selector.IsSelectionActive" Value = "False" />
</MultiTrigger.Conditions>
<Setter Property = "Background" Value = "{DynamicResource DataGrid.Background.Focus.Inactive}"/>
<Setter Property = "Foreground" Value = "{DynamicResource DataGrid.Foreground.Focus}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property = "IsSelected" Value = "True"/>
<Condition Property = "Selector.IsSelectionActive" Value = "True" />
</MultiTrigger.Conditions>
<Setter Property = "Background" Value = "{DynamicResource DataGrid.Background.Focus}"/>
<Setter Property = "Foreground" Value = "{DynamicResource DataGrid.Foreground.Focus}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property = "IsGrouping" Value = "true"/>
<Condition Property = "VirtualizingPanel.IsVirtualizingWhenGrouping" Value = "false"/>
</MultiTrigger.Conditions>
<Setter Property = "ScrollViewer.CanContentScroll" Value = "false"/>
</MultiTrigger>
</Style.Triggers>
</Style>
<Style TargetType = "{x:Type DataGridColumnHeader}">
<Setter Property = "Background" Value = "{Binding Background, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "BorderBrush" Value = "{Binding BorderBrush, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "BorderThickness" Value = "0,0,0,1" />
<Setter Property = "Cursor" Value = "{Binding Cursor, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "FocusVisualStyle" Value = "{x:Null}" />
<Setter Property = "FontFamily" Value = "{Binding FontFamily, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "FontSize" Value = "{DynamicResource Font_Regular}" />
<Setter Property = "FontWeight" Value = "{Binding FontWeight, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Foreground" Value = "{StaticResource DataGridColumnHeader.Foreground}" />
<Setter Property = "Height" Value = "{Binding ColumnHeaderHeight, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType = "{x:Type DataGridColumnHeader}">
<ControlTemplate.Resources>
<Style x:Key = "ColumnHeaderGripperStyle" TargetType = "{x:Type Thumb}">
<Setter Property = "Background" Value = "Transparent"/>
<Setter Property = "Cursor" Value = "SizeWE"/>
<Setter Property = "Width" Value = "8"/>
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType = "{x:Type Thumb}">
<Border Background = "{TemplateBinding Background}"
Padding = "{TemplateBinding Padding}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ControlTemplate.Resources>
<Grid>
<Border x:Name = "border"
Background = "{TemplateBinding Background}"
BorderBrush = "{TemplateBinding BorderBrush}"
BorderThickness = "{TemplateBinding BorderThickness}">
<Grid x:Name = "content">
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "30" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column = "0"
HorizontalAlignment = "{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey = "True"
SnapsToDevicePixels = "{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment = "{TemplateBinding VerticalContentAlignment}"/>
<Path x:Name = "SortingArrow"
Cursor = "Hand"
Data = "M12.4336 6.61328C12.5703 6.72266 12.5703 6.94141 12.4336 7.07812L6.71875 12.793C6.58203
12.9297 6.39062 12.9297 6.25391 12.793L0.539062 7.07812C0.402344 6.94141 0.402344
6.72266 0.539062 6.61328L1.05859 6.06641C1.19531 5.92969 1.41406 5.92969 1.52344
6.06641L5.78906 10.3047V0.953125C5.78906 0.789062 5.92578 0.625 6.11719 0.625H6.88281C7.04688
0.625 7.21094 0.789062 7.21094 0.953125V10.3047L11.4492 6.06641C11.5586 5.92969 11.7773 5.92969
11.9141 6.06641L12.4336 6.61328Z"
Fill = "{StaticResource DataGridColumnHeader.Foreground}"
Grid.Column = "1"
Height = "13"
HorizontalAlignment = "Center"
RenderTransformOrigin = "0.5,0.5"
VerticalAlignment = "Center"
Visibility = "Collapsed"
Width = "13" />
</Grid>
</Border>
<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 = "SortingArrow" Property = "Visibility" Value = "Visible" />
<Setter TargetName = "SortingArrow" Property = "RenderTransform">
<Setter.Value>
<RotateTransform Angle = "180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property = "SortDirection" Value = "Descending">
<Setter TargetName = "SortingArrow" Property = "Visibility" Value = "Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType = "{x:Type DataGridRowHeader}">
<Setter Property = "Background" Value = "{Binding Background, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "BorderBrush" Value = "{DynamicResource DataGrid.GridLines.BorderBrush}" />
<Setter Property = "BorderThickness" Value = "0,0,0,1" />
<Setter Property = "Cursor" Value = "{Binding Cursor, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "FocusVisualStyle" Value = "{Binding FocusVisualStyle, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Width" Value = "{Binding RowHeaderWidth, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Style.Triggers>
<Trigger Property = "IsMouseOver" Value = "True">
<Setter Property = "Background" Value = "{DynamicResource DataGrid.Background.Hover}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property = "IsRowSelected" Value = "true"/>
<Condition Property = "Selector.IsSelectionActive" Value = "false"/>
</MultiTrigger.Conditions>
<Setter Property = "Background" Value = "{DynamicResource DataGrid.Background.Focus.Inactive}"/>
<Setter Property = "Foreground" Value = "{DynamicResource DataGrid.Foreground.Focus}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property = "IsRowSelected" Value = "True"/>
<Condition Property = "Selector.IsSelectionActive" Value = "True" />
</MultiTrigger.Conditions>
<Setter Property = "Background" Value = "{DynamicResource DataGrid.Background.Focus}"/>
<Setter Property = "Foreground" Value = "{DynamicResource DataGrid.Foreground.Focus}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
Добавил изображение к вопросу. Как видите, я добавил горизонтальные линии сетки в RowHeader, чтобы он выглядел как часть строки. Я также показал, что происходит при наведении курсора мыши на строку.
Вам просто нужно добавить поле к ContentPresenter
в CellStyle
:
<Setter Property = "CellStyle">
<Setter.Value>
<Style TargetType = "{x:Type DataGridCell}">
<Setter Property = "Background" Value = "Transparent" />
<Setter Property = "BorderBrush" Value = "{Binding BorderBrush, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Cursor" Value = "Hand" />
<Setter Property = "FontFamily" Value = "{Binding FontFamily, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "FontSize" Value = "{Binding FontSize, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "FontWeight" Value = "{Binding FontWeight, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Foreground" Value = "{Binding Foreground, RelativeSource = {RelativeSource AncestorType = {x:Type DataGrid}}}" />
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType = "{x:Type DataGridCell}">
<Grid Background = "{TemplateBinding Background}">
<ContentPresenter Margin = "32 0 0 0"
HorizontalAlignment = "Left"
VerticalAlignment = "Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property = "IsSelected" Value = "True">
<Setter Property = "Foreground" Value = "{DynamicResource DataGrid.Foreground.Focus}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
Спасибо за это, я ТАК сильно усложнил это.
@RichardGale Но разве это не добавляет поля к каждой ячейке?
@BionicCode, поскольку OP хочет, чтобы цвет фона присутствовал слева от содержимого ячейки (для каждой ячейки), других вариантов нет.
Я думаю, что ваш первоначальный подход был правильным. Вам просто нужно связать DataGridRowHeader
с DataGridRow
.
Затем переместите выделение выделения с DataGridCell
на DatGridRow
.
<!-- Set the padding of 32 px by setting the row header width -->
<DataGrid RowHeaderWidth = "32">
<!-- Remove the default selection highlighting for FullRow selection unit -->
<DataGrid.CellStyle>
<Style TargetType = "DataGridCell">
<Style.Triggers>
<DataTrigger Binding = "{Binding RelativeSource = {RelativeSource AncestorType=DataGrid}, Path=SelectionUnit}"
Value = "{x:Static DataGridSelectionUnit.FullRow}">
<Setter Property = "BorderBrush"
Value = "Transparent" />
<Setter Property = "Background"
Value = "Transparent" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<!-- Bind the row header's background to the row and show the separators -->
<DataGrid.RowHeaderStyle>
<Style TargetType = "DataGridRowHeader"
BasedOn = "{StaticResource {x:Type DataGridRowHeader}}">
<Setter Property = "Background"
Value = "{Binding RelativeSource = {RelativeSource AncestorType=DataGridRow}, Path=Background}" />
<Setter Property = "BorderThickness"
Value = "0,0,1,1" />
<Setter Property = "BorderBrush"
Value = "Black" />
</Style>
</DataGrid.RowHeaderStyle>
<!--
Define custom mouse over and selection highlight colors at row level.
This will only effective if DataGrid.SelectionUnit is FullRow (the default)
-->
<DataGrid.RowStyle>
<Style TargetType = "DataGridRow">
<Setter Property = "Background"
Value = "Transparent" />
<Style.Triggers>
<Trigger Property = "IsMouseOver"
Value = "True">
<Setter Property = "Background"
Value = "SteelBlue" />
</Trigger>
<Trigger Property = "IsSelected"
Value = "True">
<Setter Property = "Background"
Value = "Red" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
</DataGrid>
Непонятно, о чем вы спрашиваете. «Сетка данных всегда должна иметь левое поле 32 пикселя» — ок, это
DataGrid.Margin=32
. «UT, горизонтальные линии сетки должны продолжаться до края контейнера» — что это значит и как помогает включение RowHeader? Строки строк всегда заканчиваются там, где заканчивается DataGrid (полная длина). Может быть, вы сможете показать эскиз, чтобы визуализировать то, чего вы хотите достичь?