WPF-DataGrid (data tables) beautification

We not beep first on the map:

The use of background data tables:

　　When we do the secondary development I found our table not as good-looking WEB to the table, then we need the data tables with landscaping and reconstruction

Form guide beautification thinking:

　　WPF data grid is composed of header and body (content) composition then we will beautify the two parts separately

　　Header beautification Code:

 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"9> </ Setter> <-! Data manually from adding a footer row ->
         <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><! - centered horizontally ->
         <Setter Property =18 is" The HorizontalContentAlignment " the Value = " Center " > </ Setter> <-! Vertical center ->

19 </Style>

Body style landscaping for each row

 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>

Beautify the body cells content 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>

 Note : mouse clicks needed to cover the current row cell color