• 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>

  • 相关阅读:
    directives vant之Field输入限制【v-input-float】
    【vue】 typeScript OSS图片压缩处理工具类
    vue单页面加载js方法
    H5网页打开App以及App内某个页面
    适配iphoneX万能方法!!!
    固定底部button按钮,兼容各种手机、微信等【flex布局】
    天行数据小程序demo
    iview Weapp index索引器 cityjs 增加每个城市的code值
    小程序上传图片至七牛云(支持多张上传、预览、删除图片)
    (转)异步与非阻塞之间的区别(看到的最清晰的说明)
  • 原文地址:https://www.cnblogs.com/changbaishan/p/4387351.html
Copyright © 2020-2023  润新知