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

  • 相关阅读:
    LeetCode Single Number
    Leetcode Populating Next Right Pointers in Each Node
    LeetCode Permutations
    Leetcode Sum Root to Leaf Numbers
    LeetCode Candy
    LeetCode Sort List
    LeetCode Remove Duplicates from Sorted List II
    LeetCode Remove Duplicates from Sorted List
    spring MVC HandlerInterceptorAdapter
    yum
  • 原文地址:https://www.cnblogs.com/xiaomingg/p/8736305.html
Copyright © 2011-2022 走看看