MvvmLight初尝试

首先，关于Mvvm的教程，网上很多都是零散的，我自己找的也很辛苦，学的也不是很全面很系统，不过还是要总结下。

我所理解的Mvvm，那就是把传统的.xaml.cs挪到了另一个地方（ViewModel）。View上的界面要么显示数据，要么接受用户的输入。显示数据就利用依赖属性Binding到View界面，接受用户输入就利用Binding把命令绑定到View界面。Model就是基本的基础数据，例如学生，那学生类就是一个Model，Model不用管要用学生做什么。而ViewModel就是用这些Model组装成我需要的数据，然后显示到View。

首先我们需要安装NuGet这个vs插件，这个东西可以方便的管理我们的引用，比如MvvmLight需要的一些引用啊，它可以自动帮你添加，不需要时，卸载也很方便。它的下载地址是http://nuget.codeplex.com/。

安装完之后，它会出现在这里

新建一个WPF项目，然后打开NuGet的控制台

然后输入Install-Package MvvmLight

稍微等待下，它就会为你配置好MvvmLight所需要的引用。

默认NuGet为我们创建了ViewModel，View和Model文件夹我们需要自己创建。还有一点要注意，NuGet为我们创建了一个ViewModelLocator.cs，这个是用来控制我们应该使用哪个ViewModel的。Mvvm是怎么做到界面与后台代码分离的就是使用了DataContext这个属性，NuGet没有给我们加上使用MainViewModel，所以我们自己加上

<Window x:Class="MvvmStudentSample.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        DataContext="{Binding Main,Source={StaticResource Locator}}"

        Title="MainWindow" Height="350" Width="525">

如果这一段没有搞清楚，我希望读者回去看一下WPF Binding关于DataContext这一节，再看一下ViewModelLocator的源码。

创建一个学生类Stu.cs，它当然是Model了

class Stu

    {

        public int StuId { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }

    }

我的界面上只想显示学生的Name和Age，并且属性Name和Age的值改变了需要能够放映到界面上，那么我们就需要在ViewModel中封装Stu的属性，我们就用MainViewModel吧

大家都看到了RaisePropertyChanged这个方法，其实我们的Stu是没有继承INotifyPropertyChanged接口的，没有继承该接口，就不具备通知界面修改的功能，这个如果不理解可以去研究下WPF的Binding。

所以这里对Name和Age的封装相当于将其封装成依赖属性。

public class MainViewModel : ViewModelBase

    {

        private Stu _stu = new Stu();



        public string StuName

        {

            get { return _stu.Name; }

            set

            {

                _stu.Name = value;

                RaisePropertyChanged("StuName");

            }

        }



        public int StuAge

        {

            get { return _stu.Age; }

            set

            {

                _stu.Age = value;

                RaisePropertyChanged("StuAge");

            }

        }

        public MainViewModel()

        {

            if (!IsInDesignMode)

            {

                _stu = new Stu();

                StuName = "HuangTao";

                StuAge = 22;

            }

        }

    }

 

MainWindow.xaml暂时设计成这样

<StackPanel TextElement.FontSize="20">

        <TextBlock Text="姓名："></TextBlock>

        <TextBox Text="{Binding StuName}"></TextBox>

        <TextBlock Text="年龄："></TextBlock>

        <TextBox Text="{Binding StuAge}"></TextBox>

    </StackPanel>

然后我们给Stu赋值。

public MainViewModel()

        {

            if (!IsInDesignMode)

            {

                _stu = new Stu();

                StuName = "HuangTao";

                StuAge = 22;

            }

        }

然后运行之，我们就能看到值。

我们加入一个按钮，按钮就是来接受用户点击的，点击事件我们将修改StuName和StuAge

public RelayCommand ChangeStuCommand

        {

            get;

            private set;

        }



        public MainViewModel()

        {

            if (!IsInDesignMode)

            {

                _stu = new Stu();

                StuName = "HuangTao";

                StuAge = 22;



                ChangeStuCommand = new RelayCommand(() =>

                    {

                        StuName = "Hello";

                        StuAge = 100;

                    });

            }

        }

然后将ChangeStuCommand绑定到界面上的按钮。

<StackPanel TextElement.FontSize="20">

        <TextBlock Text="姓名："></TextBlock>

        <TextBox Text="{Binding StuName}"></TextBox>

        <TextBlock Text="年龄："></TextBlock>

        <TextBox Text="{Binding StuAge}"></TextBox>

        <Button Width="150" Height="30" Content="ChangeStu" Command="{Binding ChangeStuCommand}"></Button>

    </StackPanel>

点击按钮，发现界面上的数据自动变更了。假如我们不是Click事件来触发按钮事件，而是MouseEnter时改变数据，这又要怎么做呢

先引入命名空间

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

        xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"

然后修改刚才的Button

<StackPanel TextElement.FontSize="20">

        <TextBlock Text="姓名："></TextBlock>

        <TextBox Text="{Binding StuName}"></TextBox>

        <TextBlock Text="年龄："></TextBlock>

        <TextBox Text="{Binding StuAge}"></TextBox>

        <Button Width="150" Height="30" Content="ChangeStu">

            <i:Interaction.Triggers>

                <i:EventTrigger EventName="MouseEnter">

                    <cmd:EventToCommand Command="{Binding ChangeStuCommand}"></cmd:EventToCommand>

                </i:EventTrigger>

            </i:Interaction.Triggers>

        </Button>

    </StackPanel>

暂时总结道这里。