[uwp]MVVM之MVVMLight，一个登录注销过程的简单模拟

之前学MVVM，从ViewModelBase,RelayCommand都是自己瞎写，许多地方处理的不好，接触到MVVMLigth后，就感觉省事多了。

那么久我现在学习MVVMLight的收获，简单完成以下一个Demo

Demo主要功能是：

　　用户在登录界面登陆，登录成功后跳转到另一个页面，同时把登录时的用户信息作为参数传递过去，然后用户可以选择注销，注销时会弹出对话框，让用户选择是否真的注销，如果是，就真的注销，回退到　　　　　　　 　      登录页面，否则就不做任何处理。

功能很简洁，接下来就用MVVMLight来实现，另外我的开发环境是vs2015，项目类型是windows10通用应用，由于mvvmlight并未对win10通用应用项目做适配，所以不会像wpf项目那样，在工程中自动添加ViewModel文件夹和全局资源ViewModelLocator,所以需要我们手动添加，不过这个过程也很简单。

一.为项目安装MVVMLightLibs（通过vs中的NuGet包管理器)

　

　　安装成功后，就可以使用了。

二.创建ViewModelLocator

自己创建一个类ViewModelLocator可以直接放在项目根目录，也可以放在ViewModel里面，具体放哪儿仁者见仁，智者见智。我们后面用到的页面导航，ViewModel和View绑之间的定都是以这个类为基础

   public class ViewModelLocator
    {
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
        }
    }

现在看起来很简单，待会会给他加东西的。

三.确定View

 在这个demo中，我们主要有LoginView和MainView两个页面，前者是登录页面，后者是登录成功后的页面。

 LoginView的布局代码如下：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid Margin="24">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <TextBox Grid.Row="0" Header="用户名" Text="{Binding Username,Mode=TwoWay}"/>
            <TextBox Grid.Row="1" Header="密码" Text="{Binding Password,Mode=TwoWay}"/>
            <TextBox Grid.Row="2"></TextBox>
            <Button Grid.Row="3" HorizontalAlignment="Stretch" Content="登录" Command="{Binding LoginCommand}"></Button>
        </Grid>
    </Grid>

MainView的布局代码如下：

<Grid Margin="36" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBlock>
            <Run FontSize="36" Text="欢迎你:"></Run>
            <Run FontSize="72" Foreground="Purple" Text="{Binding Username,Mode=TwoWay}"></Run>
            </TextBlock>
            <TextBox></TextBox>
        </StackPanel>
        <Button Content="注销" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
                Command="{Binding LogoffCommand}"></Button>
    </Grid>

布局很简单，也很好理解，但是我们目前还没有把View和ViewModel绑定到一起，因为我们ViewModel还没搞呢。

四.创建ViewModel

接下来就是ViewModel了。这个工程简单，所以也只有两个ViewModel,分别是LoginViewModel和MainViewModel，相信从名字就能看出他他们和View的对应关系了。

在LoginViewModel中，对应LoginView，添加Username和Password两个属性，并且添加一个命令LoginCommand.

一定要让LoginViewModel继承ViewModelBase。。（在红色波浪线处敲击键盘Shift+alt+F10自动添加命名空间哦）

 public class LoginViewModel:ViewModelBase
    {
        private string _username;
        private string _password;

        public string Username
        {
            get
            {
                return _username;
            }

            set
            {
                Set(ref _username, value);
            }
        }

        public string Password
        {
            get
            {
                return _password;
            }

            set
            {
                Set(ref _password, value);
            }
        }

        public ICommand LoginCommand { get; set; }
        private void Login()
        {
            User model = new User { Username = Username.Trim(), Password = Password.Trim() };
            if (true==AuthenticateHelper.Authenticate(model))
            {
                var navigation = ServiceLocator.Current.GetInstance<INavigationService>();
                navigation.NavigateTo("Main",model);
                
                ViewModelLocator.Main.User = model;
            }
            else
            {
                GalaSoft.MvvmLight.Messaging.Messenger.Default.Send<string>("用户名或密码错误！！！");
            }
        }
        public LoginViewModel()
        {
            LoginCommand = new RelayCommand(Login);
        }
    }

View Code

除了Login方法的具体实现目前有些模糊外，其他的理解起来都很容易。

至于MainViewModel就更简单了

public class MainViewModel:ViewModelBase
    {
        private string _username;
        public string Username
        {
            get
            {
                return _username;
            }

            set
            {
                Set(ref _username, value);
            }
        }

        private Model.User _user;
        public User User
        {
            get
            {
                return _user;
            }

            set
            {
                _user = value;
                Username = value.Username;
            }
        }

        public MainViewModel()
        {
            Username = "CQ";
            LogoffCommand = new RelayCommand(Logoff);

        }
        public ICommand LogoffCommand { get; set;}
        private void Logoff()
        {
            GalaSoft.MvvmLight.Messaging.Messenger.Default.Send<object>("确认注销吗？");
        }
    }

View Code

里面有两点可能造成困惑，一是User属性,它是一个Model类，用于页面传递参数等；二是Logoff方法的实现，这个和Login方法一样。待会儿再说。

五.Model

写到这儿我自己都觉着一头雾水了。。。没办法，继续填坑

MVVM，我们已经有了View和ViewModel,那么最后一个Model呢？刚才提过了，Model其实就是用来传递参数用一下，在这个demo中没什么大用处。

具体可以下载源码查看。

六.现在重头戏才来！！！

如果自己写ViewModel和View的绑定，会怎么写呢？

大概是在View对应的.cs类构造函数中来一句

this.DataContext=new ViewModel();

这样的确可行，但是在MVVMLight中，是通过SimpleIoc,用一个简单的IOC容器来实现对实例的创建和销毁。即有IOC容器为我们创建ViewModel实例，然后用它作为View的数据源。

（这块儿可以具体百度一下。我也正在学习）

所以ViewModelLocator的代码就成下面这个样子了

public class ViewModelLocator
    {
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            SimpleIoc.Default.Register<LoginViewModel>();
            SimpleIoc.Default.Register<MainViewModel>();
        }

        public static LoginViewModel _login;
        public static LoginViewModel Login
        {
            get
            {
                if (_login == null)
                    _login = ServiceLocator.Current.GetInstance<LoginViewModel>();
                return _login;
            }
        }

        private static MainViewModel _main;
        public static MainViewModel Main
        {
            get
            {
                if (_main == null)
                    _main = ServiceLocator.Current.GetInstance<MainViewModel>();
                return _main;
            }
        }
    }

可以看到，在构造函数中向SimpleIoc注册了两个给定的类型LoginViewModel和MainViewModel.

然后定义了两个静态的只读属性Main和Login。他们的就是用来和具体的View绑定用的。至于为什么是静态的呢？目的是在页面导航的时候方便传递参数而做的。

那么究竟怎么吧LoginView和Login绑定？（以下方法是mvvmlight框架默认的行为，但在win10通用项目中没有自动生成，所以手动来实现）

在App.xaml中添加一个全局资源，代码如下

<Application
    x:Class="LoginDemo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LoginDemo"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary>
            <local:ViewModelLocator x:Key="Locator"></local:ViewModelLocator>
        </ResourceDictionary>
    </Application.Resources>
</Application>

这样做的好处是在整个工程中都可以使用ViewModelLocator的实例。

接下来就是具体的绑定环节了。。我们以LoginView和Login属性的绑定为例

LoginView中只需要添加如下代码：

 <Page.DataContext>
        <Binding Path="Login" Source="{StaticResource Locator}"></Binding>
    </Page.DataContext>

嗯，就这么简单，其实刚才为什么把ViewModelLocator作为全局资源，目的就是在其他地方引用方便。

 

至此。demo已经可以编译运行了。（注意，在app.xaml.cs中，把启动页面设置为LoginView）

但是却并没有实现登录验证和页面导航的功能。。

不过不用担心，我们主体框架已经搭好，其他的都简单了。

七.登录验证

在LoginViewModel中我们见到了Login方法定义如下：

private void Login()
        {
            User model = new User { Username = Username.Trim(), Password = Password.Trim() };
            if (true==AuthenticateHelper.Authenticate(model))
            {
                var navigation = ServiceLocator.Current.GetInstance<INavigationService>();
                navigation.NavigateTo("Main",model);
                
                ViewModelLocator.Main.User = model;
            }
            else
            {
                GalaSoft.MvvmLight.Messaging.Messenger.Default.Send<string>("用户名或密码错误！！！");
            }
        }

首先把用户名和密码初始化一个User的实例，然后调用Authenticate方法验证，如果验证通过，就导航到MainView，如果失败，就弹出一个消息框，说你失败了！！！

因为是demo嘛。Authenticate我就简单的用了一个if来判断用户名密码是否和预定义的一致（预定义的就是“cq”,"cq"）,一致就返回true，表示通过！否则就false..

这没什么好说的。重点还是验证通过后的导航和验证失败的消息提醒。

八.页面导航

针对于导航，MVVMLight也有自己的一套方法，他提供了一个接口INavigationService和方法NavigationService，我们要做的就是继续到IOC容器中注册“一个用于导航的工厂类型”

于是乎，ViewModelLocator变成了下面这样

public class ViewModelLocator
    {
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            SimpleIoc.Default.Register<LoginViewModel>();
            SimpleIoc.Default.Register<MainViewModel>();

            var navigationService = this.InitNavigationService();
            SimpleIoc.Default.Register(() => navigationService);
        }

        public INavigationService InitNavigationService()
        {
            NavigationService navigationService = new NavigationService();
            navigationService.Configure("Login", typeof(LoginView));
            navigationService.Configure("Main", typeof(MainView));
            return navigationService;
        }

        public static LoginViewModel _login;
        public static LoginViewModel Login
        {
            get
            {
                if (_login == null)
                    _login = ServiceLocator.Current.GetInstance<LoginViewModel>();
                return _login;
            }
        }

        private static MainViewModel _main;
        public static MainViewModel Main
        {
            get
            {
                if (_main == null)
                    _main = ServiceLocator.Current.GetInstance<MainViewModel>();
                return _main;
            }
        }
    }

 

navigationService的Configure方法用来添加一个键值对，从而建立起一个字符串和View的对应关系。以便于在需要导航时，只需要传递一个对应的字符串，就可以实现到具体页面的导航。

var navigationService = this.InitNavigationService();
            SimpleIoc.Default.Register(() => navigationService);

这两行代码是注册”一个用于导航服务的工厂类型“到IOC容器中，需要导航的时候，通过ServiceLocator.Current.GetInstance<INavigationService>()获取导航服务的工厂的实例，然后通过之前配置的不同的字符串来实现到不同页面的额导航。

所以在登录成功后，导航代码如下：

 

var navigation = ServiceLocator.Current.GetInstance<INavigationService>();
 navigation.NavigateTo("Main",model);
                
 ViewModelLocator.Main.User = model;//之前说定义Main为静态目的就是为了方便传递参数，具体用途就在这儿

 

通过如上代码，就可以实现导航了。

九.怎么弹出消息提示框呢？

在我们code-behind模式中，我们是这样做的

await new MessageDialog("Hello world!").ShowAsync();

但是在MVVM中该怎么做呢？显然不能在ViewModel中写吧。那应该就还是写在View对应的.cs文件中了。那么写在View对应的.cs中后，怎么才能触发它呢？

对此，我们找MVVMLight的Messager来帮忙，可以在Login中登录失败的if-else分支中，添加如下代码

GalaSoft.MvvmLight.Messaging.Messenger.Default.Send<string>("用户名或密码错误！！！");

这代表发送的消息类型是字符串，消息内容就是”“号里面的了。

只有发送不行啊。。。必须有个接收机制吧。。接收的怎么写呢？写在哪儿呢？

在那儿接收，当然就写在哪儿了。。需要在View中接收，就写在View对应的Page的构造函数里面。写法如下：

        public LoginView()
        {
            this.InitializeComponent();
            GalaSoft.MvvmLight.Messaging.Messenger.Default.Register<string>(this, MessageBox);
        }
        private async void MessageBox(string msg)
        {
            await new MessageDialog(msg).ShowAsync();
        }

对了，其实就是注册一个对string类型消息的监听（不知道用”监听“这个词好不好，实际是通过广播进行的，具体可以百度）

然后还要添加一个处理消息的委托方法MessageBox，没错，它里面实现了弹出一个MessageDialog的功能。

值得注意的是，注册消息的类型可以是各种各样的，但都是通过匹配具体的类型来实现消息广播的。

 

九.上面是弹出一个消息框，那么接下来就弹出一个可以交互的消息框，启示就一个确认和一个返回按钮。。

按理来说，这个应该是点击注销的时候弹出的确认对话框，所以把注册这个消息的代码应该放在MainView对应得.cs文件中。

具体如下：

public MainView()
        {
            this.InitializeComponent();
            GalaSoft.MvvmLight.Messaging.Messenger.Default.Register<object>(this,true, LogoffMessage);
          
        }
        public async void LogoffMessage(object param)
        {
            
            MessageDialog msg = new MessageDialog(param as string);
            UICommand yes = new UICommand("确定", (o) =>
             {
                 var navigation = ServiceLocator.Current.GetInstance<INavigationService>();
                 navigation.GoBack();
             });
            UICommand no = new UICommand("返回", (o) =>
            {
            });
            msg.Commands.Add(yes);
            msg.Commands.Add(no);

             var re=await msg.ShowAsync();
            if (re == yes)
            {
                GalaSoft.MvvmLight.Messaging.Messenger.Default.Unregister<object>(this, LogoffMessage);
            }
        }

和之前基本无差别，只不过是把之前的MessaeDialog多加了两个UICommand而已。。

但有两点要注意：

1.我们注册两个消息，类型应该要不一样，否则会串的。。。

2.但完成注销工作后，记得取消对消息的监听，否则第二次注册的时候会弹出两次对话框的！！

 

 

至此。整个Demo就完成了。。。嗯。感觉写的还挺烂的。

最后，我把关键点提一下：

1.ViewModelBase

2.RelayCommand

3.Messager

4.NavigationService

5.SimpleIoc基本上就是这五点。

 

哦。。差点把源代码忘了。。点击”我是代码“下载。