devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WPF控件之DataGrid扩展应用（一）_wpf treedatagrid

作者：Gausst松鼠会 | 2024-05-17 09:06:05

赞

踩

wpf treedatagrid

一、分析

        这次的需求是：有一所学校，为了方便了解学校里所有班级的情况（这里就看各位想定义哪些情况了），故需要设计出一个在界面上既能查看每个班级中每个学生的信息，又能展示每个班级的总体情况。

        我分析的是：结合前面所讲述的知识点，查看每个班级用TreeView，展示总体情况用DataGrid。那就动手看看吧

二、实现

        先看项目结构（注意个模块得统一：要么用core，要么用Framework）

 接下来逐一讲述

（1）common模块

        枚举（Enums）:就一个枚举（节点类型）

  1.     public enum NodeType
  2.     {
  3.         [Description("班级")]
  4.         Grade,
  5.  
  6.         [Description("学生")]
  7.         Student,
  8.     }

        转换器（Converts）:从枚举的值判断后返回是否显示（上代码）

  1.     public class EnumToVisibilityConvert : IValueConverter
  2.     {
  3.         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  4.         {
  5.             if (value is Enum enumValue)
  6.             {
  7.                 switch (enumValue)
  8.                 {
  9.                     case NodeType.Grade:
  10.                         return Visibility.Collapsed;
  11.                     case NodeType.Student:
  12.                         return Visibility.Visible;
  13.                     default:
  14.                         return Visibility.Collapsed;
  15.                 }
  16.             }
  17.             return Visibility.Collapsed;
  18.         }
  19.  
  20.         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  21.         {
  22.             return value;
  23.         }
  24.     }

         命令（DelegateCommand），这个就不做概述了，之前用的都是它，不知道的可以看我前面的文章

        对象（Models）:就一个主体对象，树结构加附属对象——学生结构（看代码，BindableObject不讲述了，跟命令一样的，前面文章有）

  1.     public abstract class BaseModel : BindableObject
  2.     {
  3.         public virtual string Name { get;  set; }
  4.  
  5.         public virtual Guid Guid { get;  set; }
  6.  
  7.         public virtual NodeType Node { get;  set; } = NodeType.Grade;
  8.     }

  1.     public class TreeModel : BaseModel
  2.     {
  3.         private ObservableCollection<StudentInfo> student = new ObservableCollection<StudentInfo>();
  4.  
  5.         public ObservableCollection<StudentInfo> Student
  6.         {
  7.             get => student;
  8.             set
  9.             {
  10.                 student = value;
  11.                 OnPropertyChanged();
  12.             }
  13.         }
  14.  
  15.     }

  1.  public class StudentInfo : BaseModel
  2.     {
  3.         private string gender;
  4.  
  5.         public string Gender
  6.         {
  7.             get => gender;
  8.             set
  9.             {
  10.                 gender = value;
  11.                 OnPropertyChanged();
  12.             }
  13.         }
  14.  
  15.         private int age;
  16.  
  17.         public int Age
  18.         {
  19.             get => age;
  20.             set
  21.             {
  22.                 age = value;
  23.                 OnPropertyChanged();
  24.             }
  25.         }
  26.  
  27.         private string address;
  28.  
  29.         public string Address
  30.         {
  31.             get => address;
  32.             set
  33.             {
  34.                 address = value;
  35.                 OnPropertyChanged();
  36.             }
  37.         }
  38.  
  39.         private string number;
  40.  
  41.         public string Number
  42.         {
  43.             get => number;
  44.             set
  45.             {
  46.                 number = value;
  47.                 OnPropertyChanged();
  48.             }
  49.         }
  50.  
  51.     }

        管理者（TreeViewManager）：管理整个TreeView的逻辑交互（这次的封装不太好，大部分的逻辑，ViewModel那里就实现了，都没到这管理库来——哈哈哈，应该是我想偷懒，不想提取了）

 

  1. public class TreeViewManager : TreeViewInterface
  2.     {
  3. 		private static ObservableCollection<TreeModel> treeModels = new ObservableCollection<TreeModel>();
  4.  
  5. 		public static ObservableCollection<TreeModel> TreeModels
  6.         {
  7. 			get => treeModels;
  8. 			set
  9. 			{
  10.                 treeModels = value;
  11.                 OnTreeModelsChanged();
  12. 			}
  13. 		}
  14.  
  15.         public static event EventHandler TreeModelsChanged;
  16.         public static void OnTreeModelsChanged()
  17.         {
  18.             TreeModelsChanged?.Invoke(TreeModels, new EventArgs());
  19.         }
  20.  
  21.         public void InitTree()
  22.         {
  23.             TreeModel treeModel = new TreeModel()
  24.             {
  25.                 Guid = Guid.NewGuid(),
  26.                 Name = "三年级二班",
  27.                 Node = Enums.NodeType.Grade
  28.             };
  29.  
  30.             StudentInfo student = new StudentInfo()
  31.             {
  32.                 Name = "小红",
  33.                 Guid = treeModel.Guid,
  34.                 Age = 8,
  35.                 Gender = "女",
  36.                 Address = "天河路",
  37.                 Node = Enums.NodeType.Student,
  38.                 Number = "111111"
  39.             };
  40.  
  41.             treeModel.Student.Add(student);
  42.  
  43.             student = new StudentInfo()
  44.             {
  45.                 Name = "小明",
  46.                 Guid = treeModel.Guid,
  47.                 Age = 8,
  48.                 Gender = "男",
  49.                 Address = "尧新路",
  50.                 Node = Enums.NodeType.Student,
  51.                 Number = "222222"
  52.             };
  53.  
  54.             treeModel.Student.Add(student);
  55.  
  56.             student = new StudentInfo()
  57.             {
  58.                 Name = "小黑",
  59.                 Guid = treeModel.Guid,
  60.                 Age = 7,
  61.                 Gender = "男",
  62.                 Address = "水西路",
  63.                 Node = Enums.NodeType.Student,
  64.                 Number = "333333"
  65.             };
  66.  
  67.             treeModel.Student.Add(student);
  68.  
  69.             TreeModels.Add(treeModel);
  70.         }
  71.  
  72.     }

（2）interface模块

        就一个，目录树的接口，对应一些方法（我这就只有一个方法。。。哈哈哈）

  1.     public interface TreeViewInterface
  2.     {
  3.         void InitTree();
  4.     }

（2）VM-V模块

        VM模块：一个是表格的，一个是目录树的，直接看代码吧

  1.     public class DataGridViewModel : BindableObject
  2.     {
  3. 		private TreeModel treeModel;
  4.  
  5. 		public TreeModel TreeModel
  6.         {
  7. 			get => treeModel;
  8. 			set
  9. 			{
  10.                 treeModel = value;
  11. 				OnPropertyChanged();
  12. 			}
  13. 		}
  14.  
  15. 		public DataGridViewModel(TreeModel model)
  16.         {
  17. 			this.TreeModel = model;
  18.         }
  19.     }

  1.  public class TreeViewModel : BindableObject
  2.     {
  3.         private readonly TreeViewInterface @interface;
  4.  
  5.         public ObservableCollection<TreeModel> TreeModels => TreeViewManager.TreeModels;
  6.  
  7.         private TreeModel treeModel;
  8.  
  9.         public TreeModel TreeModel
  10.         {
  11.             get => treeModel;
  12.             set
  13.             {
  14.                 treeModel = value;
  15.                 OnPropertyChanged();
  16.             }
  17.         }
  18.  
  19.  
  20.         private StudentInfo student;
  21.  
  22.         public StudentInfo Student
  23.         {
  24.             get => student;
  25.             set
  26.             {
  27.                 student = value;
  28.                 OnPropertyChanged();
  29.             }
  30.         }
  31.  
  32.         private BaseModel baseModel;
  33.  
  34.         public BaseModel BaseModel
  35.         {
  36.             get => baseModel;
  37.             set
  38.             {
  39.                 baseModel = value;
  40.                 OnPropertyChanged();
  41.             }
  42.         }
  43.  
  44.         public DelegateCommand<TreeView> SelectChangeCommand { get; private set; }
  45.  
  46.         public DelegateCommand<TreeModel> OpenTableCommand { get; private set; }
  47.  
  48.         public TreeViewModel(TreeViewInterface @interface)
  49.         {
  50.             this.@interface = @interface;
  51.             this.SelectChangeCommand = new DelegateCommand<TreeView>(SelectChange);
  52.             OpenTableCommand = new DelegateCommand<TreeModel>(OpenTable);
  53.             InitTree();
  54.         }
  55.  
  56.         #region 命令
  57.         public void OpenTable(TreeModel model)
  58.         {
  59.             var win = new DataGridView(model);
  60.             win.Show();
  61.         }
  62.         #endregion
  63.  
  64.         #region 事件
  65.         public void SelectChange(TreeView tree)
  66.         {
  67.             BaseModel = (BaseModel)tree.SelectedItem;
  68.             JudgeNode();
  69.         }
  70.         #endregion
  71.  
  72.         #region 方法
  73.         private void InitTree()
  74.         {
  75.             this.@interface.InitTree();
  76.             BaseModel = TreeModels[0];
  77.         }
  78.  
  79.         private void JudgeNode()
  80.         {
  81.             switch (BaseModel.Node)
  82.             {
  83.                 case TreeViewChangeDataGrid.Common.Enums.NodeType.Grade:
  84.                     TreeModel = (TreeModel)BaseModel;
  85.                     break;
  86.                 case TreeViewChangeDataGrid.Common.Enums.NodeType.Student:
  87.                     Student = (StudentInfo)BaseModel;
  88.                     break;
  89.                 default:
  90.                     break;
  91.             }
  92.         }
  93.         #endregion

        V模块：一个是表格的，一个是目录树的（记得安装之前讲过的behavior的包）

                a、树的界面，这次我用了之前没讲过的方法，这次树不是递归的结构，所有要么用我第一篇文章那样绑定（那方法有点老套了）,要么就换一种方法（看图）

 这就是新的绑定方法，跟之前很像，只是多了一个DataType，用来指定绑定的结构类型的（看代码）

  1. <Window
  2.     x:Class="TreeViewChangeDataGrid.Views.TreeView"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:convert="clr-namespace:TreeViewChangeDataGrid.Common.Converts;assembly=TreeViewChangeDataGrid.Common"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
  8.     xmlns:local="clr-namespace:TreeViewChangeDataGrid.Views"
  9.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  10.     xmlns:model="clr-namespace:TreeViewChangeDataGrid.Common.Models;assembly=TreeViewChangeDataGrid.Common"
  11.     Title="MainView"
  12.     Width="800"
  13.     Height="450"
  14.     mc:Ignorable="d">
  15.     <Window.Resources>
  16.  
  17.         <convert:EnumToVisibilityConvert x:Key="enumToVisibilityConvert" />
  18.  
  19.         <!--  右键菜单  -->
  20.         <ContextMenu x:Key="Custom">
  21.             <MenuItem Header="表格查看">
  22.                 <i:Interaction.Triggers>
  23.                     <i:EventTrigger EventName="Click">
  24.                         <i:InvokeCommandAction Command="{Binding DataContext.OpenTableCommand, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}" CommandParameter="{Binding}" />
  25.                     </i:EventTrigger>
  26.                 </i:Interaction.Triggers>
  27.             </MenuItem>
  28.         </ContextMenu>
  29.         <!--  右键菜单  -->
  30.  
  31.         <HierarchicalDataTemplate DataType="{x:Type model:TreeModel}" ItemsSource="{Binding Student}">
  32.             <Grid>
  33.                 <TextBlock Text="{Binding Name}" />
  34.                 <Grid.Style>
  35.                     <Style TargetType="Grid">
  36.                         <Setter Property="ContextMenu" Value="{StaticResource Custom}" />
  37.                     </Style>
  38.                 </Grid.Style>
  39.             </Grid>
  40.         </HierarchicalDataTemplate>
  41.         <HierarchicalDataTemplate DataType="{x:Type model:StudentInfo}">
  42.             <Grid>
  43.                 <TextBlock Text="{Binding Name}" />
  44.             </Grid>
  45.         </HierarchicalDataTemplate>
  46.     </Window.Resources>
  47.     <Grid Margin="10">
  48.         <Grid.ColumnDefinitions>
  49.             <ColumnDefinition Width="200" />
  50.             <ColumnDefinition />
  51.         </Grid.ColumnDefinitions>
  52.         <TreeView x:Name="tree" ItemsSource="{Binding TreeModels}">
  53.             <i:Interaction.Triggers>
  54.                 <i:EventTrigger EventName="SelectedItemChanged">
  55.                     <i:InvokeCommandAction Command="{Binding DataContext.SelectChangeCommand, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}" CommandParameter="{Binding ElementName=tree}" />
  56.                 </i:EventTrigger>
  57.             </i:Interaction.Triggers>
  58.         </TreeView>
  59.         <StackPanel
  60.             Grid.Column="1"
  61.             VerticalAlignment="Center"
  62.             Visibility="{Binding BaseModel.Node, Converter={StaticResource enumToVisibilityConvert}}">
  63.             <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
  64.                 <Label Margin="0,0,20,0" Content="姓名：" />
  65.                 <TextBox
  66.                     Width="100"
  67.                     VerticalContentAlignment="Center"
  68.                     Text="{Binding Student.Name}" />
  69.             </StackPanel>
  70.             <StackPanel
  71.                 Margin="0,20"
  72.                 HorizontalAlignment="Center"
  73.                 Orientation="Horizontal">
  74.                 <Label Margin="0,0,20,0" Content="年龄：" />
  75.                 <TextBox
  76.                     Width="100"
  77.                     VerticalContentAlignment="Center"
  78.                     Text="{Binding Student.Age}" />
  79.             </StackPanel>
  80.             <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
  81.                 <Label Margin="0,0,20,0" Content="性别：" />
  82.                 <TextBox
  83.                     Width="100"
  84.                     VerticalContentAlignment="Center"
  85.                     Text="{Binding Student.Gender}" />
  86.             </StackPanel>
  87.             <StackPanel
  88.                 Margin="0,20"
  89.                 HorizontalAlignment="Center"
  90.                 Orientation="Horizontal">
  91.                 <Label Margin="0,0,20,0" Content="地址：" />
  92.                 <TextBox
  93.                     Width="100"
  94.                     VerticalContentAlignment="Center"
  95.                     Text="{Binding Student.Address}" />
  96.             </StackPanel>
  97.             <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
  98.                 <Label Margin="0,0,20,0" Content="电话：" />
  99.                 <TextBox
  100.                     Width="100"
  101.                     VerticalContentAlignment="Center"
  102.                     Text="{Binding Student.Number}" />
  103.             </StackPanel>
  104.         </StackPanel>
  105.     </Grid>
  106. </Window>

                b、表格的界面，从外到里设置，一次是DataGrid、Column、Row、Cell的样式，而对于列数据的绑定，我用的是DataGridTemplateColumn，直接看代码

 

 

  1.     <Grid>
  2.         <ScrollViewer
  3.             Margin="10"
  4.             HorizontalScrollBarVisibility="Auto"
  5.             PreviewMouseWheel="PreviewMouseWheel"
  6.             VerticalScrollBarVisibility="Auto">
  7.             <DataGrid
  8.                 HorizontalAlignment="Center"
  9.                 AutoGenerateColumns="False"
  10.                 Background="#fff"
  11.                 BorderBrush="Transparent"
  12.                 CanUserAddRows="False"
  13.                 GridLinesVisibility="None"
  14.                 HorizontalScrollBarVisibility="Hidden"
  15.                 IsReadOnly="True"
  16.                 ItemsSource="{Binding DataContext.TreeModel.Student, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}">
  17.  
  18.                 <!--#region 设置列的个数-->
  19.                 <DataGrid.Style>
  20.                     <Style TargetType="DataGrid">
  21.                         <Setter Property="HeadersVisibility" Value="Column" />
  22.                     </Style>
  23.                 </DataGrid.Style>
  24.                 <!--#endregion-->
  25.  
  26.                 <!--#region 数据网格的列标题样式属性-->
  27.                 <DataGrid.ColumnHeaderStyle>
  28.                     <!--  样式类型：DataGridColumnHeader（数据网格列标题）  -->
  29.                     <Style TargetType="{x:Type DataGridColumnHeader}">
  30.                         <Setter Property="Height" Value="74" />
  31.                         <Setter Property="BorderThickness">
  32.                             <Setter.Value>
  33.                                 <Thickness
  34.                                     Bottom="1"
  35.                                     Left="1"
  36.                                     Right="1"
  37.                                     Top="1" />
  38.                             </Setter.Value>
  39.                         </Setter>
  40.                         <Setter Property="Background" Value="Orange" />
  41.                         <Setter Property="BorderBrush" Value="Green" />
  42.                         <Setter Property="HorizontalContentAlignment" Value="Center" />
  43.                         <Setter Property="FontFamily" Value="微软雅黑" />
  44.                         <Setter Property="FontWeight" Value="Black" />
  45.                         <Setter Property="FontSize" Value="14" />
  46.                     </Style>
  47.                 </DataGrid.ColumnHeaderStyle>
  48.                 <!--#endregion-->
  49.  
  50.                 <!--#region DataGrid的RowStyle属性-->
  51.                 <DataGrid.RowStyle>
  52.                     <Style TargetType="DataGridRow">
  53.                         <Setter Property="Background" Value="LightBlue" />
  54.                     </Style>
  55.                 </DataGrid.RowStyle>
  56.                 <!--#endregion-->
  57.  
  58.                 <!--#region DataGrid的CellStyle属性（数据表格的单元格样式)-->
  59.                 <DataGrid.CellStyle>
  60.                     <Style TargetType="DataGridCell">
  61.                         <Setter Property="BorderThickness">
  62.                             <Setter.Value>
  63.                                 <Thickness
  64.                                     Bottom="1"
  65.                                     Left="1"
  66.                                     Right="1" />
  67.                             </Setter.Value>
  68.                         </Setter>
  69.                         <Setter Property="BorderBrush" Value="Green" />
  70.                         <Style.Triggers>
  71.                             <Trigger Property="IsSelected" Value="True">
  72.                                 <Setter Property="Background">
  73.                                     <Setter.Value>
  74.                                         <SolidColorBrush Opacity="0.9" Color="AntiqueWhite" />
  75.                                     </Setter.Value>
  76.                                 </Setter>
  77.                                 <Setter Property="Foreground" Value="Red" />
  78.                             </Trigger>
  79.                         </Style.Triggers>
  80.                     </Style>
  81.                 </DataGrid.CellStyle>
  82.                 <!--#endregion-->
  83.  
  84.                 <DataGrid.Columns>
  85.                     <!--#region 姓名-->
  86.                     <DataGridTemplateColumn Header="姓名">
  87.                         <DataGridTemplateColumn.CellTemplate>
  88.                             <DataTemplate>
  89.                                 <StackPanel
  90.                                     Margin="20"
  91.                                     HorizontalAlignment="Center"
  92.                                     VerticalAlignment="Center"
  93.                                     Orientation="Horizontal">
  94.                                     <TextBlock Text="{Binding Name}" />
  95.                                 </StackPanel>
  96.                             </DataTemplate>
  97.                         </DataGridTemplateColumn.CellTemplate>
  98.                     </DataGridTemplateColumn>
  99.                     <!--#endregion-->
  100.  
  101.                     <!--#region 年龄-->
  102.                     <DataGridTemplateColumn Header="年龄">
  103.                         <DataGridTemplateColumn.CellTemplate>
  104.                             <DataTemplate>
  105.                                 <StackPanel
  106.                                     Margin="20"
  107.                                     HorizontalAlignment="Center"
  108.                                     VerticalAlignment="Center"
  109.                                     Orientation="Horizontal">
  110.                                     <TextBlock Text="{Binding Age}" />
  111.                                 </StackPanel>
  112.                             </DataTemplate>
  113.                         </DataGridTemplateColumn.CellTemplate>
  114.                     </DataGridTemplateColumn>
  115.                     <!--#endregion-->
  116.  
  117.                     <!--#region 性别-->
  118.                     <DataGridTemplateColumn Header="性别">
  119.                         <DataGridTemplateColumn.CellTemplate>
  120.                             <DataTemplate>
  121.                                 <StackPanel
  122.                                     Margin="20"
  123.                                     HorizontalAlignment="Center"
  124.                                     VerticalAlignment="Center"
  125.                                     Orientation="Horizontal">
  126.                                     <TextBlock Text="{Binding Gender}" />
  127.                                 </StackPanel>
  128.                             </DataTemplate>
  129.                         </DataGridTemplateColumn.CellTemplate>
  130.                     </DataGridTemplateColumn>
  131.                     <!--#endregion-->
  132.  
  133.                     <!--#region 地址-->
  134.                     <DataGridTemplateColumn Header="地址">
  135.                         <DataGridTemplateColumn.CellTemplate>
  136.                             <DataTemplate>
  137.                                 <StackPanel
  138.                                     Margin="20"
  139.                                     HorizontalAlignment="Center"
  140.                                     VerticalAlignment="Center"
  141.                                     Orientation="Horizontal">
  142.                                     <TextBlock Text="{Binding Address}" />
  143.                                 </StackPanel>
  144.                             </DataTemplate>
  145.                         </DataGridTemplateColumn.CellTemplate>
  146.                     </DataGridTemplateColumn>
  147.                     <!--#endregion-->
  148.  
  149.                     <!--#region 地址-->
  150.                     <DataGridTemplateColumn Header="电话">
  151.                         <DataGridTemplateColumn.CellTemplate>
  152.                             <DataTemplate>
  153.                                 <StackPanel
  154.                                     Margin="20"
  155.                                     HorizontalAlignment="Center"
  156.                                     VerticalAlignment="Center"
  157.                                     Orientation="Horizontal">
  158.                                     <TextBlock Text="{Binding Number}" />
  159.                                 </StackPanel>
  160.                             </DataTemplate>
  161.                         </DataGridTemplateColumn.CellTemplate>
  162.                     </DataGridTemplateColumn>
  163.                     <!--#endregion-->
  164.                 </DataGrid.Columns>
  165.             </DataGrid>
  166.         </ScrollViewer>
  167.     </Grid>

三、总结

        总体思路是目录树显示个体信息，右键打开表格看总体信息，运行效果看图

四、补充

        （1）这次的案例并不算是典型案例，我自己随意想的，只是为了扩展下思路；

        （2）目录树我没有添加其他的功能，感兴趣的可以自行看我之前的文章扩展功能；

        （3）这次的案例需求简单，所以实现起来简单，如果是项目上，会有动态添加新的列，添加按钮，右键菜单等等；（后面感兴趣的可以跟我交流）

        （4）下次我想换个玩法了，从数据库中提取数据来渲染，不想每次的造数据，具体容我想想

        （5）这次案例的源码：GitHub - TQtong/TreeViewChangeDataGrid

五、结束

        这次的文章就到这了， 那么我继续闯荡江湖了，希望各位指出不足之处，

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/582872
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。