WPF-DataGrid(数据表格)美化

我们不多哔哔先上图：

数据表格使用背景：

　　当我们在做二次开发发现我我们的表格无法向WEB的表格一样好看，这时我们就需要对数据表格进行美化和重构

表格美化思维引导：

　　WPF数据表格是由表头和表体（内容）组成那么我们就要对这两部分单独美化

　　表头美化代码：

 <Style x:Key="DataGridStyle" TargetType="DataGrid">

         <Setter Property="ColumnHeaderStyle" Value="{DynamicResource ColumnHeaderStyle}"></Setter>

         <Setter Property="CellStyle" Value="{DynamicResource CellStyle}"></Setter>

         <Setter Property="RowStyle" Value="{DynamicResource RowStyle}"></Setter>

         <Setter Property="Background" Value="White"></Setter>

         <Setter Property="EnableRowVirtualization" Value="False"></Setter>

         <Setter Property="GridLinesVisibility" Value="None"></Setter>

         <Setter Property="CanUserAddRows" Value="False"></Setter><!--禁止在尾行手动添加数据-->

         <Setter Property="AutoGenerateColumns" Value="False"></Setter>

         <Setter Property="IsEnabled" Value="True"></Setter>

     </Style>

     <Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">

         <Setter Property="Height" Value=""></Setter>

         <Setter Property="Background" Value="#F2F2F2"></Setter>

         <Setter Property="BorderThickness" Value=""></Setter>

         <Setter Property="BorderBrush" Value="#CBCBCB"></Setter>

         <Setter Property="VerticalContentAlignment" Value="Center"></Setter><!--水平居中-->

         <Setter Property="HorizontalContentAlignment" Value="Center"></Setter><!--垂直居中-->

 </Style>

美化表体每行样式

 <Style x:Key="RowStyle" TargetType="DataGridRow">

         <Setter Property="Cursor" Value="Hand"></Setter>

         <Style.Triggers>

             <Trigger Property="IsMouseOver" Value="true">

                 <Setter Property="Background" Value="#F2F2F2"/>

             </Trigger>

             <Trigger Property="IsSelected" Value="True">

                 <Setter Property="Background"  Value="#CBCBCB" />

             </Trigger>

             </Style.Triggers>

     </Style>

美化表体单元格内容样式

 <Style x:Key="CellStyle" TargetType="DataGridCell">

         <Setter Property="Height" Value=""></Setter>

         <Setter Property="FontSize" Value=""></Setter>

         <Setter Property="Template">

             <Setter.Value>

                 <ControlTemplate TargetType="DataGridCell">

                     <Border x:Name="Bg" Background="Transparent" BorderThickness="" UseLayoutRounding="True" BorderBrush="#FFCBCBCB">

                         <ContentPresenter HorizontalAlignment="Center"  VerticalAlignment="Center" />

                     </Border>

                 </ControlTemplate>

             </Setter.Value>

         </Setter>

         <Style.Triggers>

             <Trigger Property="IsSelected" Value="True">

                 <Setter Property="Background"  Value="#CBCBCB" />

                 <Setter Property="Foreground" Value="#000000" />

             </Trigger>

         </Style.Triggers>

     </Style>

注意：鼠标点击当前行时需要覆盖单元格颜色

巴特西

WPF-DataGrid(数据表格)美化

数据表格使用背景：

表格美化思维引导：

最新文章

热门文章