欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-28 17:19:16
...

创建一个UWP应用

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

新建文档

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

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应用
如果大家想深入了解,我参考的文章

在View层中添加视图

UWPDemo(一)创建一个简单MVVM模式的UWP应用
这里我添加了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应用
如图添加俩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源码