WPF-DataGrid(數據表格)美化

咱們很少嗶嗶先上圖：

數據表格使用背景：

　　當咱們在作二次開發發現我咱們的表格沒法向WEB的表格同樣好看，這時咱們就須要對數據表格進行美化和重構

表格美化思惟引導：

　　WPF數據表格是由表頭和表體（內容）組成那麼咱們就要對這兩部分單獨美化

　　表頭美化代碼：

 1 <Style x:Key="DataGridStyle" TargetType="DataGrid">
 2         <Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle}"></Setter>
 3         <Setter Property="CellStyle" Value="{DynamicResource CellStyle}"></Setter>
 4         <Setter Property="RowStyle" Value="{DynamicResource RowStyle}"></Setter>
 5         <Setter Property="Background" Value="White"></Setter>
 6         <Setter Property="EnableRowVirtualization" Value="False"></Setter>
 7         <Setter Property="GridLinesVisibility" Value="None"></Setter>
 8         <Setter Property="CanUserAddRows" Value="False"></Setter><!--禁止在尾行手動添加數據-->
 9         <Setter Property="AutoGenerateColumns" Value="False"></Setter>
10         <Setter Property="IsEnabled" Value="True"></Setter>
11     </Style>
12     <Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
13         <Setter Property="Height" Value="35"></Setter>
14         <Setter Property="Background" Value="#F2F2F2"></Setter>
15         <Setter Property="BorderThickness" Value="1"></Setter>
16         <Setter Property="BorderBrush" Value="#CBCBCB"></Setter>
17         <Setter Property="VerticalContentAlignment" Value="Center"></Setter><!--水平居中-->
18         <Setter Property="HorizontalContentAlignment" Value="Center"></Setter><!--垂直居中-->

19 </Style>

美化表體每行樣式

 1 <Style x:Key="RowStyle" TargetType="DataGridRow">
 2         <Setter Property="Cursor" Value="Hand"></Setter>
 3         <Style.Triggers>
 4             <Trigger Property="IsMouseOver" Value="true">
 5                 <Setter Property="Background" Value="#F2F2F2"/>
 6             </Trigger>
 7             <Trigger Property="IsSelected" Value="True">
 8                 <Setter Property="Background"  Value="#CBCBCB" />
 9             </Trigger>
10             </Style.Triggers>
11     </Style>

美化表體單元格內容樣式

 1 <Style x:Key="CellStyle" TargetType="DataGridCell">
 2         <Setter Property="Height" Value="35"></Setter>
 3         <Setter Property="FontSize" Value="13"></Setter>
 4         <Setter Property="Template">
 5             <Setter.Value>
 6                 <ControlTemplate TargetType="DataGridCell">
 7                     <Border x:Name="Bg" Background="Transparent" BorderThickness="1" UseLayoutRounding="True" BorderBrush="#FFCBCBCB">
 8                         <ContentPresenter HorizontalAlignment="Center"  VerticalAlignment="Center" />
 9                     </Border>
10                 </ControlTemplate>
11 
12             </Setter.Value>
13         </Setter>
14         <Style.Triggers>
15             <Trigger Property="IsSelected" Value="True">
16                 <Setter Property="Background"  Value="#CBCBCB" />
17                 <Setter Property="Foreground" Value="#000000" />
18             </Trigger>
19         </Style.Triggers>
20     </Style>

 注意：鼠標點擊當前行時須要覆蓋單元格顏色