Xamarin.Forms 第02局 MVVM应用

目录 - Xamarin.Forms


前言

本文介绍:MVVM的应用。
一、添加BaseViewModel
二、添加MainViewModel
三、添加ItemDetailViewModel
四、添加NewItemViewModel

环境

1.Visual Studio 2019
2.Xamarin.Froms 4.0.0.232914-pre10
3.Android 5.0(API 21)或更高版本
4.约定:XF代表Xamarin.Forms

内容

本文在《Xamarin.Forms 第01局 Shell-准备》中XFShell上应用MVVM,将页面中的一些数据及逻辑移到各自对应的ViewModel中。

Xamarin.Forms 第01局 Shell-准备

最终效果

Xamarin.Forms 第02局 MVVM应用_第1张图片

一、添加BaseViewModel

第一步:应用MVVM,一般会创建三个文件夹:Models,Views,ViewModels。所以,再添加Views,ViewModels文件夹,并将已有的页面移入Views文件夹下,并修改其命名空间。
Xamarin.Forms 第02局 MVVM应用_第2张图片
Xamarin.Forms 第02局 MVVM应用_第3张图片
Xamarin.Forms 第02局 MVVM应用_第4张图片
Xamarin.Forms 第02局 MVVM应用_第5张图片
Xamarin.Forms 第02局 MVVM应用_第6张图片
Xamarin.Forms 第02局 MVVM应用_第7张图片
Xamarin.Forms 第02局 MVVM应用_第8张图片
第二步:由于MainPage命名空间发生变化,所以AppShell.xaml需要同步变化。
Xamarin.Forms 第02局 MVVM应用_第9张图片
第三步:由于每个ViewModel会有一些通用功能,所以在ViewModels文件夹下创建ViewModel的基类BaseViewModel,并实现INotifyPropertyChanged接口。
Xamarin.Forms 第02局 MVVM应用_第10张图片

二、添加MainViewModel

第一步:在ViewModels文件夹下添加MainViewModel,并更新为以下代码。数据通常是从API中动态加载,这里先用模拟数据。
Xamarin.Forms 第02局 MVVM应用_第11张图片
第二步:在MainPage.xaml.cs中,移除模拟数据代码,并设置BindingContext。
Xamarin.Forms 第02局 MVVM应用_第12张图片
第三步:在MainPage.xaml中,做以下改动。
Xamarin.Forms 第02局 MVVM应用_第13张图片

三、添加ItemDetailViewModel

第一步:在ViewModels文件夹下添加ItemDetailViewModel,并更新为以下代码。
Xamarin.Forms 第02局 MVVM应用_第14张图片
第二步:在ItemDetailPage.xaml.cs中,移除赋值代码,并设置BindingContext。
Xamarin.Forms 第02局 MVVM应用_第15张图片
第三步:在ItemDetailPage.xaml中,做以下改动。
Xamarin.Forms 第02局 MVVM应用_第16张图片

四、添加NewItemViewModel

第一步:在ViewModels文件夹下添加NewItemViewModel,并更新为以下代码。
Xamarin.Forms 第02局 MVVM应用_第17张图片
第二步:在NewItemPage.xaml.cs中,移除OnSave方法,并设置BindingContext。
Xamarin.Forms 第02局 MVVM应用_第18张图片
第三步:在ItemDetailPage.xaml中,做以下改动。
Xamarin.Forms 第02局 MVVM应用_第19张图片

源码

下载链接:https://pan.baidu.com/s/1UQycs5rjcic9dG8N12oDAA
提取密码:bcoa

后语

下篇介绍Navigation,待续...


目录 - Xamarin.Forms

你可能感兴趣的:(Xamarin.Forms 第02局 MVVM应用)