【概要】
这一章主要讲述,讲述MVVM模式和用法。
如有学习过程中想交流学习、疑惑解答可以来此QQ群交流:580749909。(所有涉及到的源码都上传到了群文件里)
希望加群的人提问时尽量想清楚自己的问题,愿意钻研而不是等现成的答案而不去思考。祝各位同仁早日学会WPF这项技术。
【MVVM】
前言:MVVM的核心思想就是界面与代码分离,实现“解耦”。是一种开发模式,并不是一种开发框架。主要是以数据驱动的开发模式。
先从项目应用的角度来介绍一下MVVM是什么、怎么用、项目中该怎么建项目结构。
话不多说直接上图:
图中的结构一眼就能看明白如何建项了,但是实际开发中它们之间的关系又是如何呢,如何使用起来呢。
【关系】
View:
拿到需求的第一件事就是会知道界面要做成什么样子,那么第一个创建的就是View。
ViewModel:
主要用来实现业务逻辑的地方,比如需要计算 1 + 1的结果显示到View上。
Model:
这一层主要是用来存放,ViewModel种需要用到的实体类。比如ViewModel业务处理逻辑需要用到的自定义类都可以放到这一层。
【调用】
View:
<Window x:Class="TestX.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:TestX" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="MainWindow" Width="800" Height="800" Opacity="1" mc:Ignorable="d"> <Grid> <ListBox ItemsSource="{Binding NameCollection}"></ListBox> </Grid> </Window>
View-Code:
DataContext 一般是用来放view model的,因为你要绑定或操作的对象都在view model里。当然也能存放其它类型的对象。
namespace TestX { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new MainViewModel(); } } }
ViewModel:
using GalaSoft.MvvmLight; using System.Collections.ObjectModel; using TestX.Models; namespace TestX.ViewModels { public class MainViewModel : ViewModelBase { private ObservableCollection<MainModel> _nameCollection; public ObservableCollection<MainModel> NameCollection { get { return _nameCollection; } set { _nameCollection = value; } } /// <summary> /// Initializes a new instance of the MainViewModel class. /// </summary> public MainViewModel() { Do(); } private void Do() { NameCollection = new ObservableCollection<MainModel>(); NameCollection.Add(new MainModel() { Name = "张三" }); NameCollection.Add(new MainModel() { Name = "李四" }); NameCollection.Add(new MainModel() { Name = "王五" }); } } }
Model:
public class MainModel { public string Name { get; set; } public override string ToString() { return Name; } }
最终效果: