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>

效果:

相关推荐
倔强的石头1068 分钟前
大数据时代下的时序数据库选型指南:基于工业场景的IoTDB技术优势与适用性研究
大数据·时序数据库·iotdb
火火PM打怪中3 小时前
产品经理如何绘制服务蓝图(Service Blueprint)
大数据·产品经理
Elastic 中国社区官方博客11 小时前
在 Windows 上使用 Docker 运行 Elastic Open Crawler
大数据·windows·爬虫·elasticsearch·搜索引擎·docker·容器
一切顺势而行13 小时前
Flink cdc 使用总结
大数据·flink
淦暴尼15 小时前
基于spark的二手房数据分析可视化系统
大数据·分布式·数据分析·spark
万能小锦鲤15 小时前
《大数据技术原理与应用》实验报告三 熟悉HBase常用操作
java·hadoop·eclipse·hbase·shell·vmware·实验报告
Ashlee_code16 小时前
裂变时刻:全球关税重构下的券商交易系统跃迁路线图(2025-2027)
java·大数据·数据结构·python·云原生·区块链·perl
Flink_China16 小时前
淘天AB实验分析平台Fluss落地实践:更适合实时OLAP的消息队列
大数据·flink
阿里云大数据AI技术17 小时前
云上AI推理平台全掌握 (4):大模型分发加速
大数据·人工智能·llm
1892280486118 小时前
NW972NW974美光固态闪存NW977NW981
大数据·服务器·网络·人工智能·性能优化