WPF 项目开发入门（四） MVVM 模式与 TreeView树组件

WPF 中提供 MVVM 模式。MVVM 模式是实现带有 UI 的应用程序时的一种设计模式。MVVM 模式是 Model-View-ViewModel 模式的缩写。
分三部分实现：模型、视图和视图模型。模型是实现验证数据不一致和与数据库交换数据的过程的部分。视图是实现外观设计的部分。视图模型是保存数据以绘制视图并将输入从视图传递到模型的部分。
在WPF的情况下，XAML文件对应视图，描述绑定路径规范目的地的cs类文件对应视图模型。

1 Binding 绑定

WPF 有一项称为数据绑定的功能。通过Binding属性将cs脚本中的数据与外观设计xaml中的UI组件进行数据关联。
在窗体或者面板类中使用了 DataContext将数据模型与页面组件进行数据动态绑定，与WEB开发的前后端分离的MVVM模式相同。

Path= 属性获得绑定数据
DataContext：页面组件绑定数据源

xaml

<TextBox Text=”{Binding Path=name}”  x:Name="zhtbs">  
1

mvvm绑定模式

-------------------------xaml代码-----------------------
  

public partial class zht : Window{
    public zht(){
            InitializeComponent();
        	//绑定zhtbs组件与数据模型zhtpojo建立关系
            this.zhtbs.DataContext = new zhtpojo();
    }
    public class zhtpojo {
        public string name { get; set; } = "韬哥的代码世界";//绑定TextBox数据
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

绑定父亲容器，子容器使用

  <Grid x:Name="zhtbs">
      <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200">ColumnDefinition>
      Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
                <RowDefinition Height="40">RowDefinition>
      Grid.RowDefinitions>
<Button Grid.Row="2"  Grid.Column="0" Width="100" Height="97" Click="btnThd_Click" >dddddButton>
<TextBox Text="{Binding Path=name}" Grid.Row="1" Grid.Column="1" />
<TextBox Text="{Binding Path=name}" />
Grid>
1
2
3
4
5
6
7
8
9
10
11

2 TreeView树组件

TreeView 是树形控件是WPF中重要的控件。TreeView组件创建方法有两种，第一种页面直接生成的“静态”方法和第二种数据绑定的“动态”方法。

2.1 TreeView静态生成

使用 Xaml 在 TreeView 中创建 TreeViewItem 来创建一个树形结构，TreeViewItem属性来构架属性结构内容。

Header属性来定义树节点内容

<TreeView FontSize="20">
    <TreeViewItem Header="系统管理">
     <TreeViewItem Header="部门管理">
           <TreeViewItem Header="部门信息"/>
           <TreeViewItem Header="部门机构"/>
           <TreeViewItem Header="部门权限"/>
       TreeViewItem>
   TreeViewItem>
TreeView>
1
2
3
4
5
6
7
8
9

效果图
在这里插入图片描述

2.2 TreeView动态生成

 public partial class Frame1 : Window{
    public Frame1(){
            InitializeComponent();
            List list=new List();//设置树容器
            var dto1 = new TreeDot("人员管理");//定义树的数据结构
            dto1.Dos.Add(new TreeDot("人员设置"));
            dto1.Dos.Add(new TreeDot("人员部门"));
            dto1.Dos.Add(new TreeDot("人员权限"));
            list.Add(dto1);
            CTreeView.ItemsSource = list;//TreeView组件名称全局唯一引用
        }
     public sealed class TreeDot{//定义树节点的Pojo数据模型
         public TreeDot(string name) {
                Name = name;
         }
         public string Name { get; set; }
         //定义树子节点名称
         public List Dos { get; set; } = new List();
     }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

创建一个数据模型来装入树形数据。数据模型名称TreeDot。
TreeDot数据模型中定义节点名称属性Name。
TreeDot数据模型定义树子节点List Dos。
定义树的数据结构。var dto1
将树的数据结构与TreeView的ItemsSource树组件进行绑定。

xaml代发

<TreeView x:Name="CTreeView" FontSize="20">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="local:TreeDot"---------绑定树数据结构Pojo数据模型名称
                                  ItemsSource="{Binding Dos}">-----绑定子节点名称
            <TextBlock Text="{Binding Name}"/>------------绑定节点名称
        HierarchicalDataTemplate>
    TreeView.ItemTemplate>
TreeView>
1
2
3
4
5
6
7
8

TreeView 组件名称是CTreeView。
创建组件绑定数据 ItemTemplate 和 HierarchicalDataTemplate 模板。
在 HierarchicalDataTemplate 中 DataType 属性中指定作为树形的数据结构的类名称 “TreeDot” 自己定义。
在ItemsSource属性中定义TreeDot类中的子节点集合名称 “Dos”。
TextBlock属性中定义树形数据机构TreeDot中节点的名称 Name属性。

2.3 TreeView事件绑定

TreeView组件事件需要在TreeView属性中定义 SelectedItemChanged事件。

 <TreeView x:Name="CTreeView" FontSize="20" 
           SelectedItemChanged="OnTreeViewChanged">---------定义点击事件内容
     <TreeView.ItemTemplate>
         <HierarchicalDataTemplate DataType="local:TreeDot"
                                  ItemsSource="{Binding Dos}">
             <TextBlock Text="{Binding Name}"/>
         HierarchicalDataTemplate>
     TreeView.ItemTemplate>
TreeView>
1
2
3
4
5
6
7
8
9

事件代码