zoukankan      html  css  js  c++  java
  • WPF 自定义DataGrid控件样式

    内容转自https://www.cnblogs.com/xiaogangqq123/archive/2012/05/07/2487166.html

    一、DataGrid基本样式(一)

    小刚已经把DataGrid的样式写的很完整了,这里我做点补充,先贴上基本样式的代码:

     <!--DataGrid样式-->
            <Style TargetType="DataGrid">
                <!--网格线颜色-->
                <Setter Property="CanUserResizeColumns" Value="false"/>
                <Setter Property="Background" Value="#FFF7EDAD" />
                <Setter Property="BorderBrush" Value="#FFF5F7F5" />
                <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="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" />
                                </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="Foreground" Value="Black"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

    引用示例:

     <DataGrid x:Name="DataGrid" AutoGenerateColumns="False"  VerticalAlignment="Top"
                      CanUserSortColumns="False"     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 Class}"/>
               <DataGridTextColumn Header="性别"  Width="120"  Binding="{Binding Sex}"/>
               <DataGridTextColumn Header="班级排名"  Width="130"  Binding="{Binding ClassRank}"/>
               <DataGridTextColumn Header="全校排名"  Width="140"  Binding="{Binding SchoolRank}"/>
         </DataGrid.Columns>
    </DataGrid>

    初始化绑定数据C#代码:

     public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
    
                StudentList = new List<StudentInfo>()
                {
                    new StudentInfo()
                    {
                        Name="张三",
                        Class="三班",
                        Sex="",
                        ClassRank=10,
                        SchoolRank=103
                    },
                     new StudentInfo()
                    {
                        Name="李四",
                        Class="三班",
                        Sex="",
                        ClassRank=12,
                        SchoolRank=110
                    },
                      new StudentInfo()
                    {
                        Name="李梅",
                        Class="三班",
                        Sex="",
                        ClassRank=3,
                        SchoolRank=70
                    },
                 };
                this.DataGrid.ItemsSource = StudentList;
            }
    
            public List<StudentInfo> StudentList { get; set; }
            public class StudentInfo
            {
                public string Name { get; set; }
                public string Class { get; set; }
                public string Sex { get; set; }
                public int ClassRank { get; set; }
                public int SchoolRank { get; set; }
            }

    效果展示:

    二、DataGrid基本样式(二)

    上面的代码实现了隔行换色的效果,但是没有鼠标选中效果。另外有些用户希望能够进行列头拖动及排序。那么就需要做以下更改:

    添加DataGridRow样式:

      <Style x:Key="AlertCount1" 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="White" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="LightGray"/>
                    </Trigger>
    
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Foreground" Value="Black"/>
                        <Setter Property="Background" Value="LightGray"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

    在引用时,设置DataGrid的RowStyle="{StaticResource AlertCount1}"且AlternationCount="1"。这样就可以实现突出选中效果,取消隔行显示效果。要实现表头拖动,使用上面的样式代码是不行的,上面的样式代码去掉了拖动的控件。要实现拖动需要将其加上。

    下面是对DataGrid控件的补充:

    控件常用方法:

    BeginEdit:使DataGrid进入编辑状态。

    CancelEdit:取消DataGrid的编辑状态。

    CollapseRowGroup:闭合DataGrid的行分组。

    CommitEdit:确认DataGrid的编辑完成。

    ExpandRowGroup:展开DataGrid的行分组。

    GetGroupFromItem:从具体Item中得到分组。

    ScrollIntoView:滚动DataGrid视图。

    控件常用属性:

    AlternatingRowBackground:获取或设置一个笔刷用来描绘DataGrid奇数行的背景。

    AreRowDetailsFrozen:获取或设置一个值用来判断是否冻结每行内容的详细信息。

    AreRowGroupHeadersFrozen:获取或设置一个值用来判断是否冻结分组行的头部。

    AutoGenerateColumns:获取或设置一个值用来判断是否允许自动生成表列。

    CanUserReorderColumns:获取或设置一个值用来判断是否允许用户重新排列表列的位置。

    CanUserSortColumns:获取或设置一个值用来判断是否允许用户按列对表中内容进行排序。

    CellStyle:获取或设置单元格的样式。

    ColumnHeaderHeight:获取或设置列头的高度。

    ColumnHeaderStyle:获取或设置列头的样式。

    Columns:获取组件中包含所有列的集合。

    ColumnWidth:获取或设置列宽。

    CurrentColumn:获取或设置包含当前单元格的列。

    CurrentItem:获取包含当前单元格且与行绑定的数据项。

    DragIndicatorStyle:获取或设置当拖曳列头时的样式。

    DropLocationIndicatorStyle:获取或设置呈现列头时的样式。

    FrozenColumnCount:获取或设置冻结列的个数。

    GridLinesVisibility:获取或设置网格线的显示形式。

    HeadersVisibility:获取或设置行头及列头的显示形式。

    HorizontalGridLinesBrush:获取或设置水平网格线的笔刷。

    HorizontalScrollBarVisibility:获取或设置水平滚动条的显示样式。

    IsReadOnly:获取或设置DataGrid是否为只读。

    MaxColumnWidth:获取或设置DataGrid的最大列宽。

    MinColumnWidth:获取或设置DataGrid的最小列宽。

    RowBackground:获取或设置用于填充行背景的笔刷。

    RowDetailsTemplate:获取或设置被用于显示行详细部分的内容的模板。

    RowDetailsVisibilityMode:获取或设置一个值用以判定行详细部分是否显示。

    RowGroupHeaderStyles:获取呈现行分组头部的样式。

    RowHeaderStyle:获取或设置呈现行头的样式。

    RowHeaderWidth:获取或设置行头的宽度。

    RowHeight:获取或设置每行的高度。

    RowStyle:获取或设置呈现行时的样式。

    SelectedIndex:获取或设置当前选中部分的索引值。

    SelectedItem:获取或设置与当前被选中行绑定的数据项。

    SelectedItems:获取与当前被选中的各行绑定的数据项们的列表(List)。

    SelectionMode:获取或设置DataGrid的选取模式。

    VerticalGridLinesBrush:获取或设置垂直网格线的笔刷。

    VerticalScrollBarVisibility:获取或设置垂直滚动条的显示样式。

    所有代码已经上传到github:https://github.com/cmfGit/WpfDemo.git

  • 相关阅读:
    JS轮播图
    jquery 60秒倒计时
    jQuery 显示加载更多
    jQuery 显示加载更多
    this指针在不同情况下的指代
    web-app1--移动端等比例代码
    无障碍阅读
    javascript+dom 做javascript图片库
    初探html5---Video + DOM(视频播放)
    14个有效提高网站Banner点击率的设计技巧分享
  • 原文地址:https://www.cnblogs.com/xiaomingg/p/8736305.html
Copyright © 2011-2022 走看看