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>

效果:

相关推荐
2601_9629666431 分钟前
统计学专业应聘企业经营管理管培生,2027届校招的准备重点
大数据·数据分析
协皓家具1 小时前
2026年广州岛台吧台椅厂家有啥新变化
大数据·运维·python·devops
2601_962966641 小时前
大数据管理与应用专业2027届选岗,品类运营和商品运营的能力要求差异
大数据
和裕1 小时前
定制纸箱刀模费全解析:费用定义与可减免合作场景
大数据·运维·网络·人工智能·算法
归秋1423 小时前
2026企业AI办公工具选型指南:从场景匹配到平台评估
大数据·运维·人工智能
智圣新创013 小时前
教育数据要素流通刚需下 智圣新创高校数据中台解决方案的全域建设落地框架
大数据·人工智能·物联网
XLYcmy3 小时前
PDF 论文处理器 — 优势与功能文档
大数据·python·网络安全·pdf·dify·rag·漏洞检测
互联网资讯3 小时前
本地创业者入局 AI 短剧,本地化部署怎么选更省钱
大数据·人工智能
小猴子爱上树4 小时前
跨马翻译:批量图片翻译+视频字幕+智能抠图,跨境电商在线图片翻译工具
大数据·人工智能·python·音视频
W***25924 小时前
2026 企业 AI 办公工具怎么选:选型框架与平台全景分析
大数据·人工智能