Tip:MVVM分为Model、ViewMode、View三层。
•Model是实体类层,它存放所有需要用到的实体类。
•ViewMode层是逻辑层,操作所有Model层和View界面层的逻辑运算并且作为一个大的实体类,提供属性绑定到View层上面去。
•View层是界面显示层,只需要它的Xaml代码去绑定相应的ViewMode层的属性即可。
下面我们来看新建成功的项目结构如下:
一、在这里我们先来看MainPage.xaml中的代码,在这里绑定的MainPage.xaml是View层,它绑定上了ViewModel层,也就是MainViewModel.cs类
<UserControl x:Class="MvvmLight1.MainPage" 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Height="300" Width="300" DataContext="{Binding Main, Source={StaticResource Locator}}"> <!--在这里绑定App.xaml中的静态资源,以连接MainViewModel类(ViewMode层) MainPage.xaml代码为View层--> <UserControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Skins/MainSkin.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </UserControl.Resources> <Grid x:Name="LayoutRoot"> <TextBlock FontSize="36" FontWeight="Bold" Foreground="Purple" Text="{Binding Welcome}" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" Margin="12,25,20,171" /> <Button Content="{Binding BtnContent}" Height="23" HorizontalAlignment="Left" Margin="12,178,0,0" Command="{Binding ShowMessage}" Name="button1" VerticalAlignment="Top" Width="75" /> <Button Content="点我改变文字" Height="23" HorizontalAlignment="Left" Command="{Binding ChangeText}" Margin="187,178,0,0" Name="button2" VerticalAlignment="Top" Width="75" /> </Grid> </UserControl>
二、然后我们看ViewModel层,在这里我们申明了一些string属性以绑定到View层得显示内容上,然后对于鼠标的点击事件采用Command命令传递事件和处理方法,并且设置绑定。这样我们可以直接将前台的点击事件等和后台分离,并且我们可以继承INotifyPropertyChanged接口,以让ViewModel层的属性被改变的时候,也反映到View层,在Command方法中改变ViewModel层的属性即可改变View层的前台显示。其具体的详解在下面的代码中已经给出。
using GalaSoft.MvvmLight;
using System.Windows.Input;
using GalaSoft.MvvmLight.Command;
using System.Windows;
using System.ComponentModel;
namespace MvvmLight1.ViewModel
{
/// <summary>
/// This class contains properties that the main View can data bind to.
/// <para>
/// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel.
/// </para>
/// <para>
/// You can also use Blend to data bind with the tool's support.
/// </para>
/// <para>
/// See http://www.galasoft.ch/mvvm/getstarted
/// </para>
/// </summary>
public class MainViewModel : ViewModelBase, INotifyPropertyChanged
{
public string Welcome
{
get
{
return "欢迎使用MVVM Light! ";
}
}
/// <summary>
/// 类初始化
/// </summary>
public MainViewModel()
{
_btnContent = "点击我";
RegistCommand();
}
//A.对于属性的绑定
private string _btnContent;
public string BtnContent
{
set
{
_btnContent = value;
NotifyPropertyChanged("BtnContent");
}
get
{
return _btnContent;
}
}
//B.1申明对于点击事件的绑定
public RelayCommand ShowMessage { get; set; }
//使用C步骤的注册,将Command和需要运行的方法联系起来。
private void showmsg()
{
MessageBox.Show("你成功的将命令绑定到界面层!");
}
//B.2改变界面上的控件显示文字
public RelayCommand ChangeText { get; set; }
//执行改变文字操作
private void changeTxt()
{
BtnContent = "我已经被改变了";
}
//是否可以改变文字
private bool canchangeTxt()
{
if (BtnContent == "点击我")
{
return true;
}
else
{
return false;
}
}
//C.对于所有的事件进行注册
private void RegistCommand()
{
//C.1指定需要执行的函数showmsg()
ShowMessage = new RelayCommand(() => showmsg());
//先执行canchangeTxt()函数,验证是否可以改变文字,如果可以改变则执行changeTxt()函数
ChangeText = new RelayCommand(() => changeTxt(), () => canchangeTxt());
}
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
三、在这里我们没有使用到Model层,它用于构造实体集合以绑定诸如DataGrid之类的控件。
最后我们来看实例的运行效果如下,如需源码请点击 MvvmLight1.rar 下载。