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>

效果:

相关推荐
NiNg_1_23416 分钟前
基于Hadoop的数据清洗
大数据·hadoop·分布式
晚安苏州32 分钟前
WPF DataTemplate 数据模板
wpf
成长的小牛2331 小时前
es使用knn向量检索中numCandidates和k应该如何配比更合适
大数据·elasticsearch·搜索引擎
goTsHgo2 小时前
在 Spark 上实现 Graph Embedding
大数据·spark·embedding
程序猿小柒2 小时前
【Spark】Spark SQL执行计划-精简版
大数据·sql·spark
隔着天花板看星星2 小时前
Spark-Streaming集成Kafka
大数据·分布式·中间件·spark·kafka
奥顺2 小时前
PHPUnit使用指南:编写高效的单元测试
大数据·mysql·开源·php
小屁孩大帅-杨一凡2 小时前
Flink 简介和简单的demo
大数据·flink
天冬忘忧2 小时前
Flink调优----反压处理
大数据·flink
sinat_307021532 小时前
大数据政策文件——职业道德(山东省大数据职称考试)
大数据·职场和发展