C# WPF DataGrid 隔行变色及内容居中对齐

C# WPF DataGrid 隔行变色及内容居中对齐。

dqzww NET学习0

先看效果:

前台XAML代码:

<!--引入样式文件-->

<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary  Source="/Css/DataGridCss.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <Style x:Key="contentCenterStyle" TargetType="{x:Type TextBlock}">
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
        </ResourceDictionary>
    </Window.Resources>

<!--XAML中DataGrid-->

<DataGrid AutoGenerateColumns="False" Name="dataGrid1" VerticalAlignment="Top" CanUserSortColumns="False" Width="660" Margin="5" IsReadOnly="True" CanUserResizeColumns="False" CanUserResizeRows="False" SelectionMode="Single" CanUserReorderColumns="False" AlternationCount="2" RowHeaderWidth="0" CanUserAddRows="False" >

<DataGrid.Columns>

<DataGridTextColumn Header="名称" Width="150" Binding="{Binding Name}"/>

<DataGridTextColumn Header="最新价" Width="120" Binding="{Binding Zxj}"/>

<DataGridTextColumn Header="涨跌" Width="120" Binding="{Binding Zd}"/>

<DataGridTextColumn Header="涨幅" Width="130" Binding="{Binding Zf}"/>

<DataGridTextColumn Header="短线强势股" Width="140" Binding="{Binding Dxqsg}"/>

</DataGrid.Columns>

</DataGrid>

前台XAML的风格代码

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="DataGrid">
        <!--网格线颜色-->
        <Setter Property="CanUserResizeColumns" Value="false"/>
        <Setter Property="Background" Value="#E6DBBB" />
        <Setter Property="BorderBrush" Value="#d6c79b" />
        <Setter Property="HorizontalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#d6c79b"/>
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalGridLinesBrush">
            <Setter.Value>
                <SolidColorBrush Color="#d6c79b"/>
            </Setter.Value>
        </Setter>
    </Style>

<!--标题栏样式-->
    <!--<Style  TargetType="DataGridColumnHeader" >
        <Setter Property="Width" Value="50"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Background" Value="White" />
        <Setter  Property="FontWeight"  Value="Bold"/>
    </Style>-->

<Style TargetType="DataGridColumnHeader">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="MinWidth" Value="0" />
        <Setter Property="MinHeight" Value="28" />
        <Setter Property="Foreground" Value="#323433" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridColumnHeader">
                    <Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1"
                             BorderBrush="#e6dbba"
                              Width="Auto">
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter  Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"  Grid.Column="2" Width="8" Height="6" Fill="White" Margin="0,0,50,0"
                            VerticalAlignment="Center" RenderTransformOrigin="1,1" />
                            <Rectangle Width="1" Fill="#d6c79b" HorizontalAlignment="Right" Grid.ColumnSpan="1" />
                            <!--<TextBlock  Background="Red">
                            <ContentPresenter></ContentPresenter></TextBlock>-->
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Height" Value="25"/>
    </Style>
    <!--行样式触发-->
    <!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
    <Style  TargetType="DataGridRow">
        <Setter Property="Background" Value="#F2F2F2" />
        <Setter Property="Height" Value="25"/>
        <Setter Property="Foreground" Value="Black" />
        <Style.Triggers>
            <!--隔行换色-->
            <Trigger Property="AlternationIndex" Value="0" >
                <Setter Property="Background" Value="#e7e7e7" />
            </Trigger>
            <Trigger Property="AlternationIndex" Value="1" >
                <Setter Property="Background" Value="#f2f2f2" />
            </Trigger>

<Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightGray"/>
                <!--<Setter Property="Foreground" Value="White"/>-->
            </Trigger>

<Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>

<!--单元格样式触发-->
    <Style TargetType="DataGridCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DataGridCell">
                    <TextBlock TextAlignment="Center" VerticalAlignment="Center"  >
                           <ContentPresenter />
                    </TextBlock>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <!--<Setter Property="Background" Value="White"/>
                <Setter Property="BorderThickness" Value="0"/>-->
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

问题:当选中时 背景色无法变化,可去掉DataGridCell的代码。但去掉后文本无法垂直居和水平居中了。

解决办法:

在引入样式文件中添加一个风格定义,DataGridCell的每个文本实际是属于TextBlock

<Style x:Key="contentCenterStyle" TargetType="{x:Type TextBlock}">
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>

然后再XAML的DataGridTextColumn 加入ElementStyle="{StaticResource contentCenterStyle}"

------------------------------------------------------------------------------------------------

附:完美解决在wpf datagrid让列标题居中以及列内容居中

一般我们要实现居中设置 HorizontalContentAlignment="Center" VerticalContentAlignment="Center"就可以了, 但是datagrid的DataGridTextColumn中却发现没有HorizontalContentAlignment或者HorizontalAlignment,列中的内容仍然是左对齐,如何处理才能居中呢?

// 右对齐风格
Style styleRight = new Style(typeof(TextBlock));
Setter setRight = new Setter(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Right);styleRight.Setters.Add(setRight);
foreach (DataGridColumn c in yourDataGrid.Columns)
{        DataGridTextColumn tc = c as DataGridTextColumn;
        if (tc != null)        
        {
                tc.ElementStyle = styleRight;
        }
}

即只要设置DataGridColumn的ElementStyle就可以了,也可以在xaml中设置

<Style x:Key="contentCenterStyle"
               TargetType="{x:Type TextBlock}">
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
        </Style>

DataGridTextColumn 中引用ElementStyle

<DataGridTextColumn Header="代码"
            ElementStyle="{StaticResource contentCenterStyle}"
            Binding="{Binding Name}"></DataGridTextColumn>

时间: 2024-10-02 01:35:27

C# WPF DataGrid 隔行变色及内容居中对齐的相关文章

easyui datagrid 隔行变色

easyui datagrid  隔行变色 一:实现样图 二:实现代码 1 $('#dataGrid').datagrid({ 2 rowStyler:function(index,row){ 3 if (row.adjust_typename=="小计"){ 4 return 'background-color:#D7FFEE;'; 5 }else{ 6 //任务完成100%,1 并且已审核通过,背景色置灰 7 if(row.rownum_ % 2 != 0){ 8 return '

WPF DataGrid 每行ComboBox 内容不同的设置方法

原文:WPF DataGrid 每行ComboBox 内容不同的设置方法 <toolkit:DataGridComboBoxColumn x:Name="DgCbcSignal" Header="信号源" SelectedItemBinding="{Binding SelectedSignal}" > <toolkit:DataGridComboBoxColumn.ElementStyle> <Style Targe

css3实现左右div高度自适应且内容居中对齐

主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> <div class="left">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题1111</div> <div class="right">内容内容内容内容内容内容内容内容内容内容内容

二、WPF datagrid 行变色

public void Color(){ DataGridRow row1 = (DataGridRow)this.dgSource.ItemContainerGenerator.ContainerFromIndex(i); if (row1 != null) row1.Background = new SolidColorBrush(Colors.Red);} 这里有个坑,初始化时不能变色,必须等datagrid完成渲染后才能进行这种行变色. 因而先把form show 出来之后才执行变色方法

WPF DataGrid常用属性记录

WPF DataGrid常用属性记录 组件常用方法: BeginEdit:使DataGrid进入编辑状态. CancelEdit:取消DataGrid的编辑状态. CollapseRowGroup:闭合DataGrid的行分组. CommitEdit:确认DataGrid的编辑完成. ExpandRowGroup:展开DataGrid的行分组. GetGroupFromItem:从具体Item中得到分组. ScrollIntoView:滚动DataGrid视图. 组件常用属性: Alternat

wpf datagrid 如何让标头 及内容居中

头就是这么居中<DataGrid> <DataGrid.ColumnHeaderStyle> <Style TargetType="DataGridColumnHeader"> <Setter Property="HorizontalContentAlignment" Value="Center"> </Setter> </Style> </DataGrid.Colum

jQuery 表格应用:隔行变色,展开关闭,内容筛选

应用一:表格隔行变色 1.普通的隔行变色: 需要用到的 API $(':odd')    --> 匹配所有索引值为奇数的元素,从0开始计数 $(':even')   --> 匹配所有索引值为偶数的元素,从0开始计数 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>

支持键盘上下键的隔行变色代码

支持键盘上下键的隔行变色代码:隔行变色代码非常的常用,尤其是在新闻列表形式的场景,不过大多数都只是支持鼠标效果,而对键盘的上下键并不支持.下面就提供一段支持上下键的隔行变色效果代码.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/

10.2 隔行变色的表格

本案例中,我们对一个简单的表格进行设置,使它看起来更为精致.另外,当表格的行和列都很多,并且数据量很大的时候,为避免单元格采用相同的背景色会使浏览者感到凌乱,发生看错行的情况,为表格设置隔行变色的效果,使得奇数行和偶数行的背景颜色不一样.实例的最终效果如图1所示. 实例文件位于网页学习网CSS教程资源的“第10章\02\pretty-1.htm”. 图1 交替变色的表格样式 一.搭建HTML结构 首先确定表格的HTML结构,代码如下: 折叠展开XML/HTML 代码复制内容到剪贴板 <table