uwp - MVVM - 初学完全无基础第一次尝试1

Posted 2020-08-25

【前记】

学c#断断续续算来也有2年上下的时间了，接触的框架仅有asp.net mvc，而且也是只用过一两次。最近在尝试uwp开发听说了mvvm，呃，第一次看到或者听到这个英文的时候是前几天，当时感觉就是应该很厉害，很屌，然后，就没了，我也没去用，我觉得大多是个框架而已，我才懒得弄得那么麻烦，直接这样写多快。

第二次看到是在微软的build视频上，因为我在找一些资料偶然看到这个视频，视频里演示了一个完整的项目Kliva（也是放在github上开源共享）我被项目中的动画深深吸引住了，就把项目下载来，然后采用面向复制粘贴编程完成我自己的APP。但是，当我打开项目后就懵逼了，完全看不懂，因为它就是采用MVVM模式写的，我开始怀疑人生，过去的2年我到底做了什么。

不甘心，昨天晚上开始在网上找资料，慢慢尝试去理解。

今天，也就是现在晚上8点，刚起床。

昨晚看资料到几点我是不记得了，只记得有点收获了，记下来。

 

MVVM网上说明+个人理解：

M=Model

V=View

VM=View Model

所以，在一个Uwp项目使用这种模式的话，解决方案目录应该有三个固定文件夹：Model，View，ViewModel。（不知道是不是熟练后就可以随便定义文件夹名字，反正我刚学所以就按照这个命名）

到现在看，比较清晰了，跟MVC差不多，Model放数据模型，View放页面Page，ViewModel负责处理数据和交互。（个人理解也许是这样）

 

 

【实战】

一个页面，1个输入框1个按钮，点击按钮通过命令更改数据，并将数据绑定在输入框，数据带有通知效果，也就是说点击按钮后输入框的数据实时更新。

新项目 -> uwp通用 名为 Firstmvvmapp

在View文件夹创建一个page名为：Login.xaml

【Login.xaml - > code】

 1 <Page
 2     x:Class="Firstmvvmapp.Views.Login"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:Firstmvvmapp.Views"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d"
 9     xmlns:core="using:Microsoft.Xaml.Interactions.Core"
10     xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
11     xmlns:vm="using:Firstmvvmapp.ViewModels"
12   >
13     <Page.DataContext>
14         
15         <vm:LoginViewModel/>
16         
17     </Page.DataContext>
18 
19     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
20         <!--<Grid.ColumnDefinitions>
21             
22             <ColumnDefinition Width="1*"/>
23             <ColumnDefinition Width="1*"/>
24         </Grid.ColumnDefinitions>-->
25         <Grid.RowDefinitions>
26             <RowDefinition Height="1*"/>
27             <RowDefinition Height="1*"/>
28         </Grid.RowDefinitions>
29 
30         <Grid Margin="20" Grid.Row="0">
31             <TextBox x:Name="tbox_Pin" Height="40" BorderBrush="Black" VerticalAlignment="Bottom" Margin="0,0,0,0" Text="{Binding username}"/>
32         </Grid>
33         <Grid Margin="20" Grid.Row="1">
34 
35             <Button x:Name="bt_Submit" 
36                     Content="Go to" 
37                     HorizontalAlignment="Center" 
38                     VerticalAlignment="Top"
39                    Command="{Binding LogoutCommand}"
40                     >
41 
42             </Button>
43 
44         </Grid>
45 
46     </Grid>
47 </Page>

View Code

这里的主要知识点在 xmlns:vm="using:Firstmvvmapp.ViewModels" 引用命名空间；

还有绑定数据模型

<Page.DataContext>

<vm:LoginViewModel/>

</Page.DataContext>

Loginviewmodel就是负责处理Login.xaml这个页面的所有功能

然后是Text="{Binding username}"这句，就是绑定数据给输入框

最后是命令绑定：Command="{Binding LogoutCommand}"（命名不要在意，急急忙忙写的，所以直接面向复制编程把Kliva的代码复制来用，因为我写代码如果有新的知识点不赶快写完保存起来怕以后会忘记=，=）

然后可能你会发现username是从哪来的，其实是loginviewmodel直接继承了数据模型

然后的话Login.xaml.cs里面就什么都不用写了。

到Models。

新建一个Test.cs

代码：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 
 7 namespace Firstmvvmapp.Models
 8 {
 9     public class Test : ObservableObject
10     {
11         string d = "test";
12         public string username
13         {
14             get
15             {
16                 return d;
17             }
18             set
19             {
20                 d = value;
21                 RaisePropertyChanged("username");
22             }
23         }
24     }
25 }

View Code

这里的知识点就是属性更改通知RaisePropertyChanged("username");，也是从网上复制的。当username的值变动时就会通知程序说，嘿，username变了，让负责绑定数据的那货刷新一下数据哟。

然后新建一个ObservableObject.cs也就是负责通知的类

代码：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.ComponentModel;
 4 using System.Linq;
 5 using System.Text;
 6 using System.Threading.Tasks;
 7 
 8 namespace Firstmvvmapp.Models
 9 {
10     public class ObservableObject : INotifyPropertyChanged
11     {
12         public event PropertyChangedEventHandler PropertyChanged;
13         public void RaisePropertyChanged(string propertyName)
14         {
15             //if (PropertyChanged != null)
16             //{
17             //    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
18             //}
19             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
20 
21 
22         }
23     }
24 }

View Code

最后建立LoginViewModel.cs数据处理

代码：

 1 using Firstmvvmapp.Models;
 2 using GalaSoft.MvvmLight.Command;
 3 using System;
 4 using System.Collections.Generic;
 5 using System.Linq;
 6 using System.Text;
 7 using System.Threading.Tasks;
 8 using Windows.UI.Popups;
 9 
10 namespace Firstmvvmapp.ViewModels
11 {
12     class LoginViewModel : Test
13     {
14         private RelayCommand _logoutCommand;
15         public RelayCommand LogoutCommand => _logoutCommand ?? (_logoutCommand = new RelayCommand(async () => await this.Logout()));
16 
17         private async Task Logout()
18         {
19             username = "xmy";
20             await new MessageDialog(username).ShowAsync();
21         }
22     }
23 }

View Code

这里知识点在RelayCommand，因为我刚用也不知道怎么说，暂时不写。

到这里程序就可以运行了，记得在mainpage让Login页面显示出来，进入Login页是一个输入框一个按钮，输入框的数据是我默认的test，然后点击按钮会更改成xmy，并且弹出一个DialogBox。收尾。

【总结-个人理解】

String A="无框架模式开发";

String B="MVVM";

A前后台完全混乱结合，开发可以很快完成一个APP，但是，不利于维护，代码也许比较混乱，不易读；

B前后台完全分离，开发速度可能稍慢，利于维护，代码更清晰简洁易读。

 

 

 

在我刚学代码觉得，自己写的代码怎么会不利于维护，屁话，我才不信，然后写了许久程序后，才发现问题，程序是写完了，功能也是正常能用，但是出现bug时有时候经常要找好久，因为代码太多，命名也是半英文半拼音，特别是要添加功能时，代码就会变成这里一块那里一块，然后最后都不知道哪里是干什么的了。当然，也不排除非常熟练的大佬，不用框架，或者自己写框架，然后各种屌，不过对于我来说，那种程序目前来看没有一个10年是做不到，so，学习别人优秀的地方，继续进步。

this.Close();