• 【转】WPF之DataGrid应用


    前几天打算尝试下DataGrid的用法,起初以为应该很简单,可后来被各种使用方法和功能实现所折磨。网络上的解决方法太多,但也太杂。没法子,我只好硬着头皮阅览各种文献资料,然后不断的去尝试,总算小有成果。因此,把我学到的和大家分享一下,相信这篇文章会让你再很短的时间内学会DataGrid的大部分主要功能,而且很多难点都可以在里面找到解决方案。

    由于涉及的应用比较多,所以篇幅会很长。但可以确保各个版块相互独立,总共4个部分

    1.数据绑定

    2.DataGrid的增改删功能

    3.DataGrid的分页实现

    4.DataGrid的样式设计

    先上一张截图,让你大概知道自己需要的功能是否在这张图里有所实现。

    PS:使用技术:WPF + ADO.NET Entity Framework

    1.数据绑定(涉及DataGrid绑定和Combox绑定)

    在DataGrid 中同时包含“自动生成列”与“用户自定义列” 由属性AutoGenerateColumns控制。

    默认情况下, DataGrid 将根据数据源自动生成列。 下图列出了生成的列类型。




    如果AutoGenerateColumns="True" ,我们只需要如下几行代码

    <DataGrid Name="dataGrid1" AutoGenerateColumns="True" />

    后台dataGrid1.ItemsSource = infoList; //infoList为内容集合(这是我从数据库中获取的记录集合 类型为List<T>)

    PS:因为这里给dataGrid1绑定了数据源,所以下面绑定的字段都是infoList中的字段名称,同样也对应着我数据表中的字段名。里面包含FID,公司名称,职员姓名,性别,年龄,职务。解释下,怕大家无法理解Binding 后面的值是如何来的了

    显然这种数据绑定非常的容易,如果对表格要求不高,这中无疑是最简单方便的。

    如果AutoGenerateColumns="False" 表格字段的显示就要靠我们手动去完成了。这个也是数据绑定的重点,因为实际应用中我们大多都是自定义去完成DataGrid的数据绑定。

    接下来贴出代码(后面的所有功能都可以在此代码基础上添加和修改

    <Window x:Class="CSDN_C.MainWindow"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:assembly="clr-namespace:System;assembly=mscorlib"   
    xmlns:local="clr-namespace:Demo"   
    Title="MainWindow"  Loaded="Window_Loaded">  
    <Window.Resources>  
      <ObjectDataProvider x:Key="keySex" MethodName="GetValues" ObjectType="{x:Type assembly:Enum}">  
        <ObjectDataProvider.MethodParameters>  
          <x:Type Type="local:Sex"></x:Type>   <!--引用后台的枚举类型,为字段‘性别’提供数据源。上面引用了命名空间Demo-->  
        </ObjectDataProvider.MethodParameters>  
      </ObjectDataProvider>  
    </Window.Resources>  
      
    <Grid>   
      <DataGrid Name="dataGrid1"  AutoGenerateColumns="False">  
        <DataGrid.Columns>  
          <DataGridTemplateColumn Header="操作" Width="40">  
            <DataGridTemplateColumn.CellTemplate>  
              <DataTemplate>  
                <CheckBox ></CheckBox>  
              </DataTemplate>  
            </DataGridTemplateColumn.CellTemplate>  
          </DataGridTemplateColumn>  
          <DataGridTextColumn Header="公司名称" Width="80" Binding="{Binding 公司名称, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>  
          <DataGridTextColumn Header="姓名" Width="80" Binding="{Binding 职员姓名, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>  
          <DataGridComboBoxColumn Header="sex" SelectedItemBinding="{Binding 性别}" ItemsSource="{Binding Source={StaticResource keySex}}"/>  
          <!--Combox绑定,获取上面定义的资源keySex.绑定性别-->  
          <DataGridTextColumn Header="年龄" Width="80" Binding="{Binding 年龄, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>  
          <DataGridTextColumn Header="职务" Width="80" Binding="{Binding 职务, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>  
        </DataGrid.Columns>  
      </DataGrid>  
    </Grid>  
    </Window>  

    后台

    namespace Demo{  
    /// <summary>   
    /// MainWindow.xaml 的交互逻辑   
    /// </summary>   
    public enum Sex { 男,女 };  //注意 写在命名空间内 ,不要写在类里,否则台前local:Sex找不到路径   
      
    }  

    当我们绑定好数据运行程序的时候,会发现 DataGridComboBoxColumn下拉框里虽然绑定了值,但是他不会默认显示出已经设定好的值。所以我们就可以摈弃这种现有的 DataGridComboBoxColumn,我们用DataGrid样板标签 DataGridTemplateColumn

    我们在DataGridTemplateColumn标签里要用到2个控件,一个 TextBlock控件来显示内容,另一个ComBox来提供选择。

    所以我们可以用如下代码替换掉

    <DataGridComboBoxColumn Header="sex" SelectedItemBinding="{Binding 性别}" ItemsSource="{Binding Source={StaticResource keySex}}"/>
    <DataGridTemplateColumn Header="性别">  
                        <DataGridTemplateColumn.CellTemplate>  
                            <DataTemplate>  
                                <TextBlock Text="{Binding Path=性别}"/>  <!--显示状态时显示 TextBlock里的值-->  
                            </DataTemplate>  
                        </DataGridTemplateColumn.CellTemplate>  
                        <DataGridTemplateColumn.CellEditingTemplate>  
                            <DataTemplate>  <!--编辑状态就切换到ComboBox里进行下拉选择操作-->  
                                <ComboBox x:Name="taskCombo" ItemsSource="{Binding Source={StaticResource keySex}}"  SelectedItem ="{Binding Path=性别}"  IsSynchronizedWithCurrentItem="False"/>  
                            </DataTemplate>  
                        </DataGridTemplateColumn.CellEditingTemplate>  
                    </DataGridTemplateColumn>  

    注意 CellTemplate和 CellEditingTemplate的区别

    2.DataGrid的增改删功能

    ①添加记录行+编辑记录行

    由于增加和编辑有一定的联系,所以就放一起来讨论

    在上面的代码处添加2个Button按钮,DataGrid默认是输入一行记录后自动会生成一个新行(类似MSSQL数据库添加表记录)。由属性 CanUserAddRows来控制 当 CanUserAddRows=false的时候就不会自动生成新行。为了方便我们自己来控制,所以在DataGrid里面设置CanUserAddRows为false.

    <Grid>   
      <Button Content="添加"   Name="btnAdd"  Click=" btnAdd_Click" />  
      <Button Content="保存"  Name="btnSave" Click="btnSave_Click" />  
      <DataGrid Name="dataGrid1" AutoGenerateColumns="False"  CanUserAddRows="False">   <!--此时的DataGrid就无法自己生成新行了-->  
      </DataGrid>  
    </Grid>  

    后台事件

     int judge = 0;   //0表示编辑状态,1为添加状态。因为后面的增加和编辑都在同一个事件中,所以建一个变量来区分操作   
      
     TB_Information  tbInfo = new TB_Information();    //这个类可以供我调用里面的方法来进行增删改查的操作   
      
    private void btnAdd_Click(object sender, RoutedEventArgs e)  
    {  
      
            judge = 1;  //现在为添加状态        
      
           dataGrid1.CanUserAddRows = true;    //点击添加后  将CanUserAddRows重新设置为True,这样DataGrid就会自动生成新行,我们就能在新行中输入数据了。   
    }  
      
      
    //现在我们可以添加新记录了,我们接下来要做的就是获取这些新添加的记录   
      
    //先声明一个存储新建记录集的List<T>      这里的Information是我的数据表实体类  里面包含FID ,公司名称,职员姓名,性别,年龄,职务   
      
     List<Information> lstInformation = new List<Information>();  
      
    //我们通过 RowEditEnding来获取新增的记录,就是每次编辑完行后,行失去焦点激发该事件。   更新记录也是执行该事件   
      
     private void dataGrid1_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e)  
    {  
         Information info = new Information();   //我自己的数据表实例类   
          info = e.Row.Item as Information;        //获取该行的记录   
          if (judge == 1)                                          //如果是添加状态就保存该行的值到lstInformation中  这样我们就完成了新行值的获取   
          {  
              lstInformation.Add(info);  
          }  
          else  
          {    
              tbInfo.UpdInformation(info);            //如果是编辑状态就执行更新操作  更新操作最简单,因为你直接可以在DataGrid里面进行编辑,编辑完成后执行这个事件就完成更新操作了   
          }  
    }  
      
      
      
    //获取到记录后,单击保存按钮就可以保存lstInformation中的每一条记录   
    private void btnSave_Click(object sender, RoutedEventArgs e)  
    {  
           foreach (Information info in lstInformation)  
           {  
                 tbInfo.InsInformation(info);      //执行插入方法,将记录保存到数据库   
          }  
                judge = 0;          //重新回到编辑状态   
                lstInformation.Clear();  
               dataGrid1.CanUserAddRows = false;     //因为完成了添加操作 所以设置DataGrid不能自动生成新行了   
               Binding(Num, 1);  
    }  


    这里又会遇到一个问题。那就是更新数据的时候,发现数据更本就没更新。跟踪代码会发现后台得到的值还是原来的,无法获取编辑后的值。这个问题就是绑定模式的问题,我们只需设置双向绑定就可以了。且作用对象是在属性值更改的情况下进行双向绑定。 只要在前面的每个表字段处加上 Mode=TwoWay, UpdateSourceTrigger=PropertyChanged问题就解决了

    例如: <DataGridTextColumn Header="公司名称" Width="80" Binding="{Binding 公司名称, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> 

    ②删除记录

    为了有良好的用户体验,我就做了个可以批量删除的删除功能。就是利用到CheckBox控件来完成。

    以绑定代码为基础添加代码

    <Grid> 
    <Button Content="添加" Name="btnAdd" Click="btnAdd_Click" />
    <Button Content="保存" Name="btnSave" Click="btnSave_Click" />
    <Button Content="删除" Name="btnDelete" Click="btnDelete_Click" />
    
    </Grid>

    首先我们要获取CheckBox中的值,有哪些是被选中的。显然CheckBox里面还必须绑定值,并且还需要一个事件。给CheckBox添加的代码如下

    <DataTemplate>
    <CheckBox Click="CheckBox_Click" Tag="{Binding FID}" ></CheckBox>
    </DataTemplate>

    后台代码

    //由ChecBox的Click事件来记录被选中行的FID   
      
     List<int> selectFID = new List<int>();  //保存选中要删除行的FID值   
      
     private void CheckBox_Click(object sender, RoutedEventArgs e)  
    {  
         CheckBox dg = sender as CheckBox;  
         int FID = int.Parse(dg.Tag.ToString());   //获取该行的FID   
         var bl = dg.IsChecked;  
         if (bl == true)  
         {  
            selectFID.Add(FID);         //如果选中就保存FID   
         }  
         else  
         {  
            selectFID.Remove(FID);  //如果选中取消就删除里面的FID   
        }  
    }  
      
      
      
    //已经获取到里面的值了,接下来就只要完成删除操作就可以了  删除事件如下   
      
     private void btnDelete_Click(object sender, RoutedEventArgs e)  
    {  
         foreach (int FID in selectFID)  
        {  
             tbInfo.DelInformation(FID);   //循环遍历删除里面的记录   
        }  
        //Binding(Num, 1);       //这个是我绑定的一个方法,作用是删除记录后重新给DataGrid赋新的数据源   
    }  

     

    3.DataGrid的分页实现


    原理:其实分页功能的实现大家都清楚,无非就是把一个记录集通过运算来刷选里面对应页码的记录。

    接来下我们再次添加新的代码

    <Grid>  
    <DataGrid  Name="dataGrid1" AutoGenerateColumns="False">  
            <!--省略N个代码-->  
    </DataGrid>  
    <StackPanel Orientation="Horizontal">  
           <TextBlock Text="转到" Margin="5"/>  
           <TextBox Name="tbxPageNum" Text="" />  
           <TextBlock Text="页" />  
           <Button Content="GO"   Click="btnGo_Click"/>  
           <Button Name="btnUp" Content="上一页"  VerticalAlignment="Center" Click="btnUp_Click"/>   
           <Button Name="btnNext" Content="下一页"  VerticalAlignment="Center" Click="btnNext_Click"/>  
           <TextBlock Height="20">  
                 <TextBlock Text="【共" />  
                 <TextBlock Name="tbkTotal" Foreground="Red" />  
                 <TextBlock Text="页】" />  
                 <TextBlock Text="【当前" />  
                 <TextBlock Name="tbkCurrentsize" Foreground="Red" />  
                 <TextBlock Text="页】" />  
           </TextBlock>  
    </StackPanel>  
    </Grid>  

    首先我们先写个分页的方法,供上面这些事件调用

    后台代码

    //number表示每个页面显示的记录数    currentSize表示当前显示页数   
      
     private void Binding(int number, int currentSize)  
    {  
          List<Information> infoList = new List<Information>();  
          infoList = tbInfo.GetInformationList();      //获取数据源   
          int count = infoList.Count;          //获取记录总数   
          int pageSize = 0;            //pageSize表示总页数   
          if (count % number == 0)  
          {  
               pageSize = count / number;  
          }  
          else  
          {  
               pageSize = count / number + 1;  
          }  
          tbkTotal.Text = pageSize.ToString();         
      
          tbkCurrentsize.Text = currentSize.ToString();     
          infoList = infoList.Take(number * currentSize).Skip(number * (currentSize - 1)).ToList();   //刷选第currentSize页要显示的记录集   
          dataGrid1.ItemsSource = infoList;        //重新绑定dataGrid1   
    }  
      
      
      
    //分页方法写好了 接下来就是响应下一页,上一页,和跳转页面的事件了   
      
    //先定义一个常量   
      
     const int Num=12;  //表示每页显示12条记录   
      
    //上一页事件    
      
     private void btnUp_Click(object sender, RoutedEventArgs e)  
    {  
         int currentsize = int.Parse(tbkCurrentsize.Text); //获取当前页数   
         if (currentsize > 1)  
         {  
             Binding(Num, currentsize - 1);   //调用分页方法   
         }  
    }  
      
      
    //下一页事件   
    private void btnNext_Click(object sender, RoutedEventArgs e)  
    {  
         int total = int.Parse(tbkTotal.Text); //总页数   
         int currentsize = int.Parse(tbkCurrentsize.Text); //当前页数   
         if (currentsize < total)  
        {  
            Binding(Num, currentsize + 1);   //调用分页方法   
        }  
    }  
      
      
    //跳转事件   
    private void btnGo_Click(object sender, RoutedEventArgs e)  
    {  
        int pageNum = int.Parse(tbxPageNum.Text);  
        int total = int.Parse(tbkTotal.Text); //总页数   
        if (pageNum >= 1 && pageNum <= total)  
        {  
           Binding(Num, pageNum);     //调用分页方法   
        }  
    }  

    4.DataGrid的样式设计

    为什么用WPF,不就是因为WPF拥有绚丽的设计页面功能么(当然远不止这些)。虽然我美工这方面很差劲,但是最基本的设计我们还是要会一些。所以接下来做的工作主要就是给DataGrid上色了。(有些需要用到后台代码,也许不属于样式这类,但总归是改变外观,所以就放在一起归纳了)

    ①给DataGrid自动添加行序号+修改行表头颜色

    后台代码

    1. //窗体加载事件   
        
       private void Window_Loaded(object sender, RoutedEventArgs e)  
      {  
          Binding(Num, 1);   //调用分页方法  显示第一页   
          dataGrid1.LoadingRow += new EventHandler<DataGridRowEventArgs>(dataGrid_LoadingRow);    //自动添加序号的事件  调用下面的dataGrid_LoadingRow   
      }  
        
       public void dataGrid_LoadingRow(object sender, DataGridRowEventArgs e)  
      {  
              e.Row.Header = e.Row.GetIndex() + 1;    //设置行表头的内容值   
      }  

    接下来就可以修改行表头的颜色了

     
     <DataGrid Name="dataGrid1">  
       <DataGrid.RowHeaderStyle>  
         <Style TargetType="DataGridRowHeader">  
              <Setter Property="Width" Value="15"/>  
              <Setter Property="Background">  
                 <Setter.Value>  
                      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
                           <GradientStop Color="White" Offset="0"/>     <!--这里用到了两种颜色  也可以多层  这样就可以产生一种渐变的效果或立体感-->  
                           <GradientStop Color="SkyBlue" Offset="1"/>  
                     </LinearGradientBrush>  
                 </Setter.Value>  
            </Setter>  
        </Style>  
      </DataGrid.RowHeaderStyle>  
    <!--省略N个代码-->  
    </DataGrid>  

    ②给列表头添加颜色

    <DataGrid Name="dataGrid1">  
    <!--给整个表头添加颜色开始-->  
              <DataGrid.ColumnHeaderStyle>  
                   <Style TargetType="DataGridColumnHeader">  
                        <Setter Property="Background">  
                             <Setter.Value>  
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">  
                                            <GradientStop Color="White" Offset="0"/>  
                                            <GradientStop Color="LightBlue" Offset="0.5"/>  
                                            <GradientStop Color="White" Offset="1"/>  
                                   </LinearGradientBrush>  
                             </Setter.Value>  
                       </Setter>  
                       <Setter Property="Foreground" Value="Black"/>  
                       <Setter Property="FontSize" Value="13" />  
                  </Style>  
             </DataGrid.ColumnHeaderStyle>  
    <!--给整个表头添加颜色结束-->  
      
    <!--给单个列表头添加颜色开始(以操作列表头为例)-->  
              <DataGrid.Columns>  
                    <DataGridTemplateColumn Header="操作" Width="40">  
                         <DataGridColumn.HeaderStyle>  
                               <Style TargetType="DataGridColumnHeader">  
                                     <Setter Property="Background">  
                                           <Setter.Value>  
                                                 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">  
                                                       <GradientStop Color="White" Offset="0"/>  
                                                       <GradientStop Color="Yellow" Offset="0.5"/>  
                                                       <GradientStop Color="White" Offset="1"/>  
                                                </LinearGradientBrush>  
                                          </Setter.Value>  
                                    </Setter>  
                                   <Setter Property="Foreground" Value="Black"/>  
                                   <Setter Property="FontSize" Value="13"/>  
                                   <Setter Property="Width" Value="70"/>  
                              </Style>  
                        </DataGridColumn.HeaderStyle>  
                    </DataGridTemplateColumn>  
              </DataGrid.Columns>  
    <!--给单个列表头添加颜色结束-->  
    <!--省略N个代码-->  
    </DataGrid>  

    ③给行添加颜色+滑鼠事件

    1. <DataGrid Name="dataGrid1">  
          <DataGrid.RowStyle>  
              <Style TargetType="DataGridRow">  
                     <Setter Property="Background" Value="LightBlue" />  
                     <Style.Triggers>  
                         <Trigger Property="IsMouseOver" Value="True">     <!--当鼠标经过时 改变颜色-->  
                              <Setter Property="Background" Value="SkyBlue"/>  
                               <Setter Property="Foreground" Value="White"/>  
                         </Trigger>  
                   </Style.Triggers>  
             </Style>  
         </DataGrid.RowStyle>  
      <!--省略N个代码-->  
      /DataGrid>  

    ④给单元格添加颜色 

    <DataGrid Name="dataGrid1">  
          <DataGrid.CellStyle>  
              <Style TargetType="DataGridCell">  
                    <Style.Triggers>  
                            <Trigger Property="IsSelected" Value="True">     <!--单元格被选中时 改变颜色-->  
                                  <Setter Property="Background" Value="LightPink"/>  
                            </Trigger>  
                    </Style.Triggers>  
              </Style>  
    </DataGrid.CellStyle>    
    <!--省略N个代码-->  
    </DataGrid>  

     ⑤ 让用户在单元格获得焦点时编辑 ComboBox

    其实这不属于样式的范畴了,但我喜欢把改善用户体验归于这一类。当我们的表格里有类似ComboBox的控件时(如: DatePicker 控件等)。我们编辑这些控件时,首先第一次单击获取单元格焦点,

    第二次点击才能获取编辑时的焦点,也就是用户必须单击2次才能进行操作。这种机制其实是适合文本框控件的,但对于其它控件,像ComboBox就显得很不方便了。所以我们要做的就是单击第一次的

    时候用户就可以编辑ComboBox。

    接下来我要在DataGrid添加了三个新属性(RowDetailsVisibilityMode、SelectionMode 和 SelectionUnit)和一个新的事件处理程序 (SelectedCellsChanged)

    前台

    <DataGrid Name="dataGrid1" CanUserAddRows="False" AutoGenerateColumns="False" RowEditEnding="dataGrid1_RowEditEnding" RowDetailsVisibilityMode="VisibleWhenSelected" SelectionMode="Extended" SelectionUnit="Cell" SelectedCellsChanged="dataGrid1_SelectedCellsChanged" >
    
    </DataGrid>

    后台

    现在就差一个 SelectedCellsChanged(选则单元格时出发该事件)事件的后台代码了

    private void dataGrid1_SelectedCellsChanged(object sender, SelectedCellsChangedEventArgs e)  
      
        if (e.AddedCells.Count == 0)  
             return;  
        var currentCell = e.AddedCells[0];  
        if (currentCell.Column == dataGrid1.Columns[3])   //Columns[]从0开始  我这的ComboBox在第四列  所以为3   
        {  
               dataGrid1.BeginEdit();    //  进入编辑模式  这样单击一次就可以选择ComboBox里面的值了   
        }  

    ⑥固定列表头

    这个非常简单 只要在DataGrid里添加一个属性即可

    <DataGrid FrozenColumnCount="1" >
    
    <!--从1开始 1表示第一列 这里如果要固定我的操作列就设置为1-->
    
    </DataGrid>

    原文链接:http://blog.csdn.net/sanjiawan/article/details/6785394

  • 相关阅读:
    HTTP协议学习笔记
    linux对文件某列求和
    mongodb拆库分表脚本
    mongodb基础应用
    mongodb实现对某列求和SUM
    员工价值——如何体现自己价值,如何被自己的领导认可
    使用MySQLMTOP监控MySQL性能(二)
    使用MySQLMTOP监控MySQL性能(一)
    apache+tomcat实现session共享
    apache+tomcat负载均衡3种实现方式
  • 原文地址:https://www.cnblogs.com/chinaHunk/p/2456824.html
Copyright © 2020-2023  润新知