WPF DataGrid 单元格居中,头部居中,点击行改变背景色。

我得全局样式都写在了App.XAML文件下的ResourceDictionary里,方便全局引用

DataGrid样式和点击改变行背景色的触发器(BasedOn继承的是UI框架的样式,若无则删除,触发器还有鼠标移动事件等,按需自行修改添加)

复制代码
<Style x:Key="MyDataGrid"  TargetType="DataGrid" BasedOn="{StaticResource MaterialDesignDataGrid}">
    <Setter Property="Background">
        <Setter.Value>
            <ImageBrush ImageSource="/Images/tb_1.png"/>
        </Setter.Value>
    </Setter>
    <!--网格线颜色-->
    <Setter Property="HorizontalGridLinesBrush">
        <Setter.Value>
            <SolidColorBrush Color="LightBlue"/>
        </Setter.Value>
    </Setter>
    <Setter Property="VerticalGridLinesBrush">
        <Setter.Value>
            <SolidColorBrush Color="LightBlue"/>
        </Setter.Value>
    </Setter>
    <!--行点击事件样式触发-->
    <Setter Property="RowStyle">
        <Setter.Value>
            <Style TargetType="DataGridRow" BasedOn="{StaticResource MaterialDesignDataGridRow}">
                <Setter Property="Background" Value="Transparent" />
                <Style.Triggers>
                    <!--行点击后背景色改变,也可改变其他行属性。可添加其他事件触发器-->
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="#2368DE" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="IsReadOnly" Value="True"/>

</Style>

单元格内容居中:

复制代码
<!--单元格样式触发,得单独出来写在DataGrid样式下无效-->
<Style TargetType="DataGridCell" x:Key="MyDataGridCell" BasedOn="{StaticResource MaterialDesignDataGridCell}">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="#2368DE"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Trigger>
    </Style.Triggers>
    <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Mode=Self},Path=Content.Text}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid>
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True" />
                    <!--核心在这,若直接设置DataGridCell的VerticalAlignment的属性居中,则会出现下划线-->
                    <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

头部居中:

复制代码
 <Style  x:Key="MyDataGridColumnHeader" TargetType="DataGridColumnHeader" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
     <Setter Property="HorizontalContentAlignment" Value="Center" />
 </Style>

头部样式和单元格样式写在DataGrid样式下Setter设置其相应的属性无效的原因知道的麻烦留一下言。

使用:

复制代码
        <DataGrid Grid.Row="2" 
                  ColumnHeaderStyle="{StaticResource MyDataGridColumnHeader}"
                  CellStyle="{StaticResource MyDataGridCell}"
                  Style="{StaticResource MyDataGrid}"
                  AutoGenerateColumns="False" 
                  x:Name="MyDataGrid" 
                  CanUserAddRows="False"
                 ScrollViewer.CanContentScroll="True"
                 VerticalScrollBarVisibility="Auto"
                 HorizontalScrollBarVisibility="Auto"
                 ItemsSource="{Binding 自己的集合}">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Binding="{Binding 自己的对象属性}" Header="选择">
                    <DataGridCheckBoxColumn.HeaderStyle>
                        <Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                        </Style>
                    </DataGridCheckBoxColumn.HeaderStyle>
                </DataGridCheckBoxColumn>
                <DataGridTextColumn   Binding="{Binding 自己的对象属性}" Header="ID" Visibility="Collapsed" Width="1*" />
               
                <DataGridTemplateColumn Header="图片">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding 自己的对象属性}" Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <ToolTipService.ToolTip>
                                    <Image Source="{Binding 自己的对象属性}" Width="100" Height="100"/>
                                </ToolTipService.ToolTip>
                            </Image>
                        </DataTemplate>

                    </DataGridTemplateColumn.CellTemplate>

                </DataGridTemplateColumn>
                <DataGridTemplateColumn x:Name="UserAction"  Header="操作" Width="160">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Button  Content="删除"   BorderBrush="Transparent"  Click="Delete"
   HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                    <Button.Background>
                                        <ImageBrush ImageSource="/Images/btn1.png"/>
                                    </Button.Background>
                                </Button>
                                <Button Margin="12,0,0,0"  Content="编辑"  BorderBrush="Transparent" Click="Edit"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                    <Button.Background>
                                        <ImageBrush ImageSource="/Images/btn1.png"/>
                                    </Button.Background>
                                </Button>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

效果:

相关推荐
智慧景区与市集主理人2 小时前
巨有科技会员积分系统|深耕私域存量,破解景区复购增收难题
大数据·科技
Litluecat4 小时前
2026年6月1日科技热点新闻
大数据·人工智能·科技·推荐·热点·新闻·每日
志栋智能4 小时前
AI驱动无代码:降低巡检超自动化的门槛
大数据·运维·网络·人工智能·自动化
代码匠心4 小时前
从零开始学Flink:Flink CDC 入门
大数据·数据仓库·flink
Irene19914 小时前
基于现有的大数据开发实验环境,深入理解数据完整生命周期,工具配合使用,全流程练习
大数据·工具·开发环境·项目练习
Hefei GlobefishAI4 小时前
无人零售智能柜适合哪些场景?
大数据·零售
yjcode7895 小时前
探索游戏充值新纪元:友价源码技术革新之旅
大数据·人工智能·游戏·游戏交易
snow@li5 小时前
AI:理解 大数据、算法、算力、电力、生成式AI、token 之间的关系
大数据·人工智能·算法
oort1235 小时前
VLStream:全开源决策式AI视频平台,赋能企业构建自主可控、降本增效的智能视觉应用介绍
大数据·开发语言·人工智能·开源·音视频·数据库架构
TDengine (老段)6 小时前
TDengine 压缩编码机制 — 双层压缩架构与类型特化算法
大数据·数据库·物联网·算法·时序数据库·tdengine·涛思数据