1.使用效果
![]()
2.表格样式重写
<!--表格样式-->
<Style TargetType="{x:Type DataGrid}">
<Setter Property="RowBackground" Value="#2A2A2A" />
<Setter Property="AlternatingRowBackground" Value="#232323" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="#212121" />
<Setter Property="CanUserAddRows" Value="False" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="CanUserResizeRows" Value="False" />
<!--表头样式-->
<Setter Property="ColumnHeaderStyle">
<Setter.Value>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Height" Value="36" />
<Setter Property="Padding" Value="5 0 0 0" />
<Setter Property="Foreground" Value="#fff" />
<Setter Property="BorderThickness" Value="1"></Setter>
<Setter Property="BorderBrush" Value="#333" />
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox">
<GradientStop Color="#FF737373"/>
<GradientStop Color="#FF5F5F5F" Offset="0.5"/>
<GradientStop Color="#FF444444" Offset="0.998"/>
<GradientStop Color="#FF4E4E4E" Offset="0.5"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<!--行样式-->
<Setter Property="RowStyle">
<Setter.Value>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Height" Value="32" />
<Setter Property="Foreground" Value="#42BEC4" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#484848" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#484848" />
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
3.表格单元格样式重写
<!--表格单元格-->
<Style TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<TextBlock VerticalAlignment="Center" Padding="5 0 0 0">
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
4.使用
3.1 页面
<DataGrid x:Name="MainDataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False" Height="614" >
<DataGrid.Columns>
<DataGridTextColumn Width="100" Header="资产编号" IsReadOnly="True" Binding="{Binding Id}" />
<DataGridTextColumn Width="180" Header="资产名称" IsReadOnly="True" Binding="{Binding ZcName}" />
<DataGridTextColumn Width="100" Header="资产类型" IsReadOnly="True" Binding="{Binding ZcType}" />
<DataGridTextColumn Width="260" Header="资产图片" IsReadOnly="True" Binding="{Binding ZcImg}"/>
<DataGridTextColumn Width="300" Header="资产位置" IsReadOnly="True" Binding="{Binding ZcPosition}" />
</DataGrid.Columns>
</DataGrid>
3.2 后台
3.2.1 创建 model 对象
public partial class ZcSet
{
public int Id { get; set; }
public string ZcName { get; set; }
public string ZcType { get; set; }
public string ZcImg { get; set; }
public string ZcPosition { get; set; }
}
3.2.2 创建动态集合
ObservableCollection<ZcSet> zcList = new ObservableCollection<ZcSet>();
3.2.3 绑定到页面DataGrid
MainDataGrid.DataContext = zcList;