UWPDemo(一)创建一个简单MVVM模式的UWP应用

创建一个UWP应用

UWPDemo(一)创建一个简单MVVM模式的UWP应用_第1张图片

新建文档

由于我们要采用MVVM的模式所有添加如图文件夹:
UWPDemo(一)创建一个简单MVVM模式的UWP应用_第2张图片
其中

Model 层

Model 层,对应数据层的域模型,它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里,它主要用于抽象出 ViewModel 中视图的 Model。

View 层

View 层,作为视图模板存在,在 MVVM 里,整个 View 是一个动态模板。除了定义结构、布局外,它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态,View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声明。

ViewModel 层

ViewModel 层把 View 需要的层数据暴露,并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责,也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化,View 层会得到更新;而当 View 中声明了数据的双向绑定(通常是表单元素),框架也会监听 View 层(表单)值的变化。一旦值变化,View 层绑定的 ViewModel 中的数据也会得到自动更新。

Controls

里面存放对数据库的操作;

图示:

UWPDemo(一)创建一个简单MVVM模式的UWP应用_第3张图片
如果大家想深入了解,我参考的文章

在View层中添加视图

UWPDemo(一)创建一个简单MVVM模式的UWP应用_第4张图片
这里我添加了LoginPage.xamlRegisterPage.xaml的登陆注册界面,
由于采用MVVM,我们需要将界面都放在View层,所有对UWP应用创建时的MainPage.xaml不做考虑,但是注意在App.xaml.cs中将启动页面MainPage改为LoginPage
还有一个重点
虽然我们将xaml的后台操作写在ViewModel层,但我们还是要添加他的xaml.cs文件,并在文件里写上构造函数,不然页面显示不出来。

namespace UWPDemo.Views
{
    public partial class LoginPage : Page
    {
        public LoginPage()
        {
            InitializeComponent();
        }
    }
}

虽然界面很丑但如果大家想看源码的话,看文章末尾的GitHub地址

在ViewModel 层中添加视图的后台文件

UWPDemo(一)创建一个简单MVVM模式的UWP应用_第5张图片
如图添加俩LoginPageViewModel.csRegisterPageViewModel.cs,View层对应的ViewModel文件
添加了还没完要想要想View层的事件和ViewModel关联,必须将他们绑定。
这里我们使用PageContext x:band的方法。
这里我参考的文章
方法为在View层的xaml代码前:
先引入ViewModel的命名空间

xmlns:vm11="using:UWPDemo.ViewModels"

在使用PageContext (类似于进行实例化)

<Page.DataContext>
        <vm11:LoginViewModel x:Name="ViewModel"/>
 Page.DataContext>

最后在你要绑定的控件的事件:(这里为Register键的click事件)

Click="{x:Bind ViewModel.Register_Click}"

在View层进行绑定后,在ViewModel 层写对应事件的代码(这里仅为页面跳转)
例如:在LoginPageViewModel.cs中的Register_Click事件

namespace UWPDemo.ViewModels
{
    public class LoginViewModel : INotifyPropertyChanged
    {
        public LoginViewModel()
        {
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void Register_Click()
        {
            //将当前激活页面实例
            Frame root = Window.Current.Content as Frame;//获取当前激活页面
            root.Navigate(typeof(RegisterPage));
        }
    }

} 

最后:

这样我们的UWPDemo就能愉快的跳转啦 (≧∇≦)ノ
那今天就先讲到着,后续还有Model 层Sqlite数据库的操作,欢迎大家关注!
GitHub源码

你可能感兴趣的:(C#,UWP)