样式化 wpf 数据网格
Posted
技术标签:
【中文标题】样式化 wpf 数据网格【英文标题】：Style a wpf datagrid 【发布时间】：2012-09-14 18:15:19 【问题描述】：我找到了 wpf 的示例样式，如下所示，它所做的主要工作是更改 DataGridColumnHeader 的背景颜色并仍然保留排序箭头。可以看出，排序箭头在样式中明确指定为 UpArrow 和 DownArrow。
<Style x:Key="SuojiHeaderStyle" TargetType="x:Type DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="StaticResource HeaderBrush" />
<Setter Property="Padding" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type DataGridColumnHeader">
<Grid>
<dg:DataGridHeaderBorder SortDirection="TemplateBinding SortDirection"
IsHovered="TemplateBinding IsMouseOver"
IsPressed="TemplateBinding IsPressed"
IsClickable="TemplateBinding CanUserSort"
Background="TemplateBinding Background"
BorderBrush="TemplateBinding BorderBrush"
BorderThickness="TemplateBinding BorderThickness"
Padding ="TemplateBinding Padding"
SeparatorVisibility="TemplateBinding SeparatorVisibility"
SeparatorBrush="TemplateBinding SeparatorBrush">
<ContentPresenter SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels"
VerticalAlignment="TemplateBinding VerticalContentAlignment"
HorizontalAlignment="TemplateBinding HorizontalContentAlignment" />
</dg:DataGridHeaderBorder>
<Thumb x:Name="PART_LeftHeaderGripper"
HorizontalAlignment="Left"
Style="StaticResource ColumnHeaderGripperStyle"/>
<Thumb x:Name="PART_RightHeaderGripper"
HorizontalAlignment="Right"
Style="StaticResource ColumnHeaderLeftGripperStyle"/>
<Path Name="UpArrow" Fill="Black" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="7,0,7,0" Visibility="Hidden">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<LineSegment Point="6,0"/>
<LineSegment Point="3,5"/>
<LineSegment Point="0,0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Name="DownArrow" Fill="Black" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="7,0,7,0" Visibility="Hidden">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,5">
<LineSegment Point="6,5"/>
<LineSegment Point="3,0"/>
<LineSegment Point="0,5"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="UpArrow" Property="Visibility" Value="Hidden"/>
<Setter TargetName="DownArrow" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="DownArrow" Property="Visibility" Value="Hidden"/>
<Setter TargetName="UpArrow" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
当我将此样式应用到我的 DataGrid 时
<DataGrid ItemsSource="Binding Source=StaticResource cvs" x:Name="MasterAllGrid" AutoGenerateColumns="False"
HeadersVisibility="All" CanUserAddRows="False" HorizontalGridLinesBrush="#f0f0f0" VerticalGridLinesBrush="#f0f0f0" ColumnHeaderStyle ="StaticResource SuojiHeaderStyle"
VerticalAlignment="Stretch" SelectionChanged="MasterAllGrid_SelectionChanged" VerticalScrollBarVisibility="Auto" Background="x:Null">
<DataGrid.Columns>
<DataGridTextColumn Header="ticker" Binding="Binding Path=Ticker"/>
样式中的箭头与列标题文本重叠（抱歉，由于我是新来的，*** 不允许我拍照）。如何让它不重叠？
【问题讨论】：
【参考方案1】：对于样式 wpf datatgrid，您可以使用此资源字典
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
>
<LinearGradientBrush x:Key="Brush_DataGridHeaderBackground" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FF1C7CB1" Offset="0" />
<GradientStop Color="#FF004A83" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush_DataGridHeaderMouseOverBackground" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FF1C7CAF" Offset="0" />
<GradientStop Color="#FF042A68" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush_DataGridHeaderBorder" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FF1B577E" Offset="0" />
<GradientStop Color="#FF083258" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush_DataGridHeaderSortedBorder" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#B58801" Offset="0" />
<GradientStop Color="#681900" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush_DataGridHeaderSortedBackground" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#C46007" Offset="0" />
<GradientStop Color="#AF2600" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush_DataGridSelected" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3E4854" Offset="1"/>
<GradientStop Color="#FF5D6670"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="Brush_DataGridSelectedForeground" Color="#FFFFFF" />
<LinearGradientBrush x:Key="Brush_DataGridAltRowBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE1FFEE" Offset="0"/>
<GradientStop Color="#FFC3F9DA" Offset="0.992"/>
</LinearGradientBrush>
<Style x:Key="Style_HeaderGripper" 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 Padding="TemplateBinding Padding" Background="TemplateBinding Background"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="x:Type DataGridColumnHeader">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="28" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Cursor" Value="Hand" />
<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,1,0,1" Background="StaticResource Brush_DataGridHeaderSortedBackground" BorderBrush="StaticResource Brush_DataGridHeaderSortedBorder" Grid.ColumnSpan="2" />
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill" Grid.Column="1" Width="8" Height="6" Fill="White" Margin="0,0,8,0" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Rectangle Width="1" Fill="#AAC377" HorizontalAlignment="Right" Grid.ColumnSpan="2" />
<Rectangle Width="1" Margin="0,0,1,0" Fill="#425B10" HorizontalAlignment="Right" Grid.ColumnSpan="2" />
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="StaticResource Style_HeaderGripper"/>
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="StaticResource Style_HeaderGripper"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="x:Null">
<Setter TargetName="BackgroundBorder" Property="Background" Value="Transparent" />
<Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="Transparent" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BackgroundBorder" Property="Background" Value="StaticResource Brush_DataGridHeaderMouseOverBackground" />
<Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="StaticResource Brush_DataGridHeaderBorder" />
</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>
<Style TargetType="x:Type DataGridCell">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type DataGridCell">
<Border x:Name="BackgroundBorder" Background="Transparent">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="x:Null"/>
</Style>
<!-- DataGridRow -->
<Style x:Key="x:Type DataGridRow" TargetType="x:Type DataGridRow">
<Setter Property="Background" Value="DynamicResource x:Static SystemColors.WindowBrushKey" />
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type DataGridRow">
<Border
x:Name="DGR_Border"
Background="TemplateBinding Background"
BorderBrush="TemplateBinding BorderBrush"
BorderThickness="TemplateBinding BorderThickness"
SnapsToDevicePixels="True">
<SelectiveScrollingGrid x:Name="selectiveScrollingGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DataGridCellsPresenter x:Name="dataGridCellsPresenter"
Grid.Column="1"
ItemsPanel="TemplateBinding ItemsPanel"
SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels"/>
<DataGridRowHeader x:Name="dataGridRowHeader"
SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Grid.RowSpan="2"
Visibility="Binding RelativeSource=RelativeSource AncestorType=x:Type DataGrid, Path=HeadersVisibility, Converter=x:Static DataGrid.HeadersVisibilityConverter, ConverterParameter=x:Static DataGridHeadersVisibility.Row"/>
<Grid Grid.Column="1" Grid.Row="1" Name="Details" Visibility="Collapsed" Background="Gray">
<DataGridDetailsPresenter x:Name="dataGridDetailsPresenter" />
</Grid>
</SelectiveScrollingGrid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="DGR_Border" Value="DynamicResource BlueWindow"/>
<Setter Property="Foreground" TargetName="dataGridCellsPresenter" Value="White"/>
<Setter Property="Foreground" TargetName="dataGridRowHeader" Value="White"/>
<Setter Property="FontSize" TargetName="dataGridRowHeader" Value="13.333"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="DGR_Border" Property="TextElement.Foreground" Value="StaticResource Brush_DataGridSelectedForeground" />
<Setter Property="Visibility" TargetName="dataGridDetailsPresenter" Value="Hidden"/>
<Setter Property="FontSize" TargetName="dataGridCellsPresenter" Value="14.667"/>
<Setter Property="Background" TargetName="DGR_Border" Value="DynamicResource Brush_DataGridSelected"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- DataGrid -->
<Style x:Key="x:Type DataGrid" TargetType="x:Type DataGrid">
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="AlternatingRowBackground" Value="StaticResource Brush_DataGridAltRowBackground" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="x:Type DataGrid">
<Border Background="TemplateBinding Background">
<ScrollViewer Focusable="false" Name="DG_ScrollViewer">
<ScrollViewer.Template>
<ControlTemplate TargetType="x:Type ScrollViewer">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="3" Background="StaticResource Brush_DataGridHeaderBackground" BorderBrush="StaticResource Brush_DataGridHeaderBorder" BorderThickness="0,1" />
<Button
Command="x:Static DataGrid.SelectAllCommand"
Width="Binding RelativeSource=RelativeSource AncestorType=x:Type DataGrid, Path=RowHeaderActualWidth"
Focusable="false"
OverridesDefaultStyle="True"
>
<Button.Template>
<ControlTemplate TargetType="x:Type Button">
<Grid>
<Border Background="StaticResource Brush_DataGridHeaderBackground" BorderBrush="StaticResource Brush_DataGridHeaderBorder" BorderThickness="0,1">
<Path x:Name="Arrow" VerticalAlignment="Bottom" Margin="4" Fill="#3000" Width="11" Height="11" Stretch="Fill" Data="M1,0 L1,1 0,1 z"/>
</Border>
<Rectangle Width="1" Fill="#AAC377" HorizontalAlignment="Right" />
<Rectangle Width="1" Margin="0,0,1,0" Fill="#425B10" HorizontalAlignment="Right" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<DataGridColumnHeadersPresenter
Grid.Column="1"
Visibility="Binding RelativeSource=RelativeSource AncestorType=x:Type DataGrid, Path=HeadersVisibility, Converter=x:Static DataGrid.HeadersVisibilityConverter, ConverterParameter=x:Static DataGridHeadersVisibility.Column"/>
<!-- JAIMER removed from above
SourceScrollViewerName="DG_ScrollViewer" -->
<ScrollContentPresenter Grid.Row="1" Grid.ColumnSpan="2" CanContentScroll="TemplateBinding CanContentScroll" />
<ScrollBar
Name="PART_VerticalScrollBar"
Grid.Row="1"
Grid.Column="2"
Orientation="Vertical"
Maximum="TemplateBinding ScrollableHeight"
ViewportSize="TemplateBinding ViewportHeight"
Value="Binding Path=VerticalOffset, RelativeSource=RelativeSource TemplatedParent, Mode=OneWay"
Visibility="TemplateBinding ComputedVerticalScrollBarVisibility"/>
<Grid Grid.Row="2" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Binding RelativeSource=RelativeSource AncestorType=x:Type DataGrid, Path=NonFrozenColumnsViewportHorizontalOffset"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollBar
Grid.Column="1"
Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Maximum="TemplateBinding ScrollableWidth"
ViewportSize="TemplateBinding ViewportWidth"
Value="Binding Path=HorizontalOffset, RelativeSource=RelativeSource TemplatedParent, Mode=OneWay"
Visibility="TemplateBinding ComputedHorizontalScrollBarVisibility"/>
</Grid>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
【讨论】：
我们需要在哪里创建资源字典，意思是它驻留在哪里？？ 您是如何获得这些密钥的？当我通过 VS 或 Blend 编辑模板时，它们不会出现。 刚刚花了几个小时构建我自己的模板，然后发现这个看起来更好......非常感谢 :) +1 并希望其他人在尝试自己制作自定义样式之前找到这个跨度> 将以上是关于样式化 wpf 数据网格的主要内容，如果未能解决你的问题，请参考以下文章