UWPDemo(一)创建一个简单MVVM模式的UWP应用
创建一个UWP应用
新建文档
由于我们要采用MVVM的模式所有添加如图文件夹:
其中
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
里面存放对数据库的操作;
图示:
在View层中添加视图
这里我添加了LoginPage.xaml和RegisterPage.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 层中添加视图的后台文件
如图添加俩LoginPageViewModel.cs和RegisterPageViewModel.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源码
上一篇: CSS清除浮动笔记
下一篇: 在 Linux 系统中手动滚动日志的方法
推荐阅读
-
UWPDemo(一)创建一个简单MVVM模式的UWP应用
-
UWPDemo(二)创建一个简单MVVM模式的UWP应用——SQLite在UWP中的使用
-
MVVM之旅(1)创建一个最简单的MVVM程序
-
Kotlin入门实战:2、 Android 创建一个简单的 Kotlin 应用程序
-
使用最基础的Node,创建一个简单的node.js应用
-
简约之美Kotlin(一)Android Studio创建一个简单的Kotlin应用
-
使用最基础的Node,创建一个简单的node.js应用
-
怎么创建一个简单的Java应用程序/
-
MVVM之旅(1)创建一个最简单的MVVM程序
-
怎么创建一个简单的Java应用程序/