开发软件大部分都会用到数据显示控件，今天文章来自定义DataGrid样式。
先看下DataGrid运行效果图：
DataGrid样式修改了DataGridRow行和DataGridCell表格颜色，隔行换色，鼠标选中颜色等样式，下面是样式代码：
!-- 行样式触发 -->
<!-- 背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式 -->
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="Foreground" Value="#FF666666" />
<Style.Triggers>
<!-- 隔行换色 -->
<Trigger Property="AlternationIndex" Value="0">
<Setter Property="Background" Value="#FFFAFAFA" />
</Trigger>
<Trigger Property="AlternationIndex" Value="1">
<Setter Property="Background" Value="#FFF5F5F7" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFEBECED" />
<!--<Setter Property="Foreground" Value="White"/>-->
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFE3E3E5" />
<Setter Property="Foreground" Value="#FF111111" />
</Trigger>
</Style.Triggers>
</Style>AlternationIndex设置单双数行背景行颜色，IsMouseOver鼠标移动到行背景颜色。
<!-- 单元格样式触发 -->
<Style TargetType="DataGridCell">
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Foreground" Value="#FF5A5A5A" />
<Setter Property="FontSize" Value="11" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Grid>
<TextBlock />
<ContentPresenter
Margin="5,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<!--<Setter Property="Background" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>-->
<Setter Property="Foreground" Value="#FF464646" />
</Trigger>
</Style.Triggers>
</Style>DataGridCell设置对齐方式，文本内容对齐方式，选中单元格背景颜色。
<Style TargetType="DataGridColumnHeader">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Foreground" Value="#FF5A5A5A" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Control.VerticalContentAlignment">
<Setter.Value>
<x:Static Member="VerticalAlignment.Center" />
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Grid>
<Border
x:Name="BackgroundBorder"
Width="Auto"
BorderBrush="#FFE1E1E2"
BorderThickness="0,0,0,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter
Margin="5,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
<Path
x:Name="SortArrow"
Grid.Column="2"
Width="8"
Height="6"
Margin="0,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Data="M0,0 L1,0 0.5,1 z"
Fill="Black"
RenderTransformOrigin="1,1"
Stretch="Fill"
Visibility="Collapsed" />
<!-- 竖线 分割线 -->
<Rectangle
Grid.ColumnSpan="1"
Width="1"
HorizontalAlignment="Right"
Fill="#FFE1E1E2" />
<!--<TextBlock Background="Red">
<ContentPresenter></ContentPresenter></TextBlock>-->
</Grid>
</Border>
<Thumb Name="PART_LeftHeaderGripper" HorizontalAlignment="Left">
<Thumb.Style>
<Style TargetType="Thumb">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="FrameworkElement.Width">
<Setter.Value>
<s:Double>8</s:Double>
</Setter.Value>
</Setter>
<Setter Property="Panel.Background">
<Setter.Value>
<SolidColorBrush>#00FFFFFF</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Cursor">
<Setter.Value>
<Cursor>SizeWE</Cursor>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border Padding="{TemplateBinding Control.Padding}" Background="{TemplateBinding Panel.Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
<Thumb Name="PART_RightHeaderGripper" HorizontalAlignment="Right">
<Thumb.Style>
<Style TargetType="Thumb">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="FrameworkElement.Width">
<Setter.Value>
<s:Double>8</s:Double>
</Setter.Value>
</Setter>
<Setter Property="Panel.Background">
<Setter.Value>
<SolidColorBrush>#00FFFFFF</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Cursor">
<Setter.Value>
<Cursor>SizeWE</Cursor>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border Padding="{TemplateBinding Control.Padding}" Background="{TemplateBinding Panel.Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>接下来设置DataGridColumnHeader头部样式，主要对宽度，高度，字体大小，光标样式，重写了Thumb样式。
<Style TargetType="DataGrid">
<!-- 网格线颜色 -->
<Setter Property="CanUserResizeColumns" Value="false" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="#FFD6D6D6" />
<Setter Property="HorizontalGridLinesBrush">
<Setter.Value>
<SolidColorBrush Color="#FFEEEEEE" />
</Setter.Value>
</Setter>
<Setter Property="VerticalGridLinesBrush">
<Setter.Value>
<SolidColorBrush Color="#FFEEEEEE" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGrid">
<Border
Padding="{TemplateBinding Control.Padding}"
Background="{TemplateBinding Control.Background}"
BorderBrush="{TemplateBinding Control.BorderBrush}"
BorderThickness="{TemplateBinding Control.BorderThickness}"
UseLayoutRounding="True">
<ScrollViewer Name="DG_ScrollViewer" Focusable="False">
<ScrollViewer.Template>
<ControlTemplate TargetType="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>
<!--<Button Command="ApplicationCommands.SelectAll" Focusable="False" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly=DataGrid}}" Width="{Binding Path=CellsPanelHorizontalOffset, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType=DataGrid}}">
<Button.Visibility>
<Binding Path="HeadersVisibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType=DataGrid}">
<Binding.ConverterParameter>
<DataGridHeadersVisibility>All</DataGridHeadersVisibility>
</Binding.ConverterParameter>
</Binding>
</Button.Visibility>
</Button>-->
<DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1">
<DataGridColumnHeadersPresenter.Visibility>
<Binding Path="Visibility" RelativeSource="{RelativeSource FindAncestor, AncestorLevel=1, AncestorType=DataGrid}">
<Binding.ConverterParameter>
<DataGridHeadersVisibility>Column</DataGridHeadersVisibility>
</Binding.ConverterParameter>
</Binding>
</DataGridColumnHeadersPresenter.Visibility>
</DataGridColumnHeadersPresenter>
<ScrollContentPresenter
Name="PART_ScrollContentPresenter"
Grid.Row="1"
Grid.ColumnSpan="2"
CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
Content="{TemplateBinding ContentControl.Content}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" />
<controls:DMScrollBar
x:Name="PART_VerticalScrollBar"
Grid.Row="1"
Grid.Column="2"
Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}"
Orientation="Vertical"
ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}"
Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}"
Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
<Grid Grid.Row="2" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Path=NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType=DataGrid}}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<controls:DMScrollBar
x:Name="PART_HorizontalScrollBar"
Grid.Column="1"
Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}"
Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}"
Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseWheel">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.5" />
<DoubleAnimation
BeginTime="0:0:1"
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0.1"
Duration="0:0:0.5" />
<DoubleAnimation
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.5" />
<DoubleAnimation
BeginTime="0:0:1"
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0.1"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseEnter" SourceName="PART_VerticalScrollBar">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave" SourceName="PART_VerticalScrollBar">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0.2"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseEnter" SourceName="PART_HorizontalScrollBar">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave" SourceName="PART_HorizontalScrollBar">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="0.2"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>最后自定义DataGrid样式，主要对滚动条ScrollViewer进行修改，DataGridColumnHeadersPresenter是以指定要添加列标题的位置的控件的可视化树中的位置。ScrollContentPresenter滚动条内容使用样式。滚动条controls:DMScrollBar的属性也重新定义了，鼠标滚轮移动时设置垂直滚动条动画，以及鼠标按下，鼠标离开的动画效果。
推荐一款WPF MVVM框架开源项目：Newbeecoder.UI
Newbeecoder.UI开源项目
Demo下载：
https://share.weiyun.com/py6W1dcK版权声明：本文为liaohaiyin原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。