MVVMLight Hello World 在 10 分钟内

本文展示了一个使用 MVVM Light 库 的简单‘Hello World’ MVVM WPF 应用程序。

代码在 github 上 (链接在文章底部)。 

入门

• 首先，启动 VS2010，并创建一个新的 WPF 项目。
• 确保你已经安装了 Nuget。
• 管理 Nuget 包引用并添加 ‘MVVM Light’

MVVM Light 现在添加了一个 ViewModel 文件夹，其中包含 MainViewModel 和 ViewModelLocator。

编辑主窗口

简单地添加一个按钮，并将 DataContext 绑定推迟到 ViewModelLocator (省略)。

<Window x:Class="MvvmLightTest.MainWindow"
        DataContext="{Binding Main, Source={StaticResource Locator}}">
    <Grid>
        <Button Command="{Binding ShowPopUp}" Content="Show Pop Up" />
    </Grid>
</Window>

然后，在 MainViewModel 中，我们定义 ShowPopUp 命令

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        ShowPopUp = new RelayCommand(() => ShowPopUpExecute(), () => true);
    }

    public ICommand ShowPopUp { get; private set; }

    private void ShowPopUpExecute()
    {
        MessageBox.Show("Hello!");
    }
}

MainViewModel 继承自 ViewModelBase 类，该类还为我们提供了 RaisePropertyChanged 方法，如果更改我们绑定到的属性的值，我们就会调用该方法 (有关更多信息，请参阅 这篇文章)。示例代码中也包含属性数据绑定的示例。

这一切是如何工作的？

首先，我们的 App.xaml 包含 ViewModelLocator 的应用程序范围实例

<Application x:Class="MvvmLightTest.App"
             xmlns:vm="clr-namespace:MvvmLightTest.ViewModel"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
    </Application.Resources>
</Application>

然后，我们将 DataContext 绑定推迟到 ViewModelLocator (省略) 在 MainWindow 中

<Window x:Class="MvvmLightTest.MainWindow"
        DataContext="{Binding Main, Source={StaticResource Locator}}">
    <Grid>
        <Button Command="{Binding ShowPopUp}" Content="Show Pop Up" />
    </Grid>
</Window>

这只是返回 ViewModelLocator 实例中保存的 MainViewModel 的 static 实例。

示例代码在 github 上。