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>

暫時總結道這里。