在UWP中构建自个儿的MVVM框架-iduyao

在UWP中构建自己的MVVM框架

其实写这篇博文的时候我是拒绝的，因为这牵扯到一个高大上的东西——"框架"。一说起这个东西，很多朋友就感觉有点蒙了，尤其是编程新手。因为它不像在代码里面定义一个变量那么显而易见，它是需要在你的整个程序架构上体现出来的，并且对于框架来说，并没有什么固定的代码格式，你可以这样写，当然也可以那样写。只要最终可以达到同样的效果，各个模块之间能够体现这种框架的思想就OK。所以当你都是用MVVM框得到两份架写的相同需求的Demo看时，发现里面的很多代码都不一样，请不要惊讶，因为你正在接触一个很抽象的东西，这种东西有的时候还真得你需要自己挖空心思去琢磨一下，光靠别人给你讲还是不行的！

--------------------------------切入正题--------------------------------

在进行搭建自己的MVVM框架的时候你需要提起掌握一下知识（至少要熟悉，如果未达标，建议先自行脑补一下，我可能不会做到面面俱到）：

1、熟练掌握数据绑定；

2、熟练使用委托；

3、对MVVM框架有一定的了解；

--------------------------------在你决定继续要往下看的时候我会默认你已经对上述知识有所了解------------------------------

一：为页面绑定数据

按照规范的MVVM框架来说，一个项目中至少要有要有三个文件夹：View、ViewModel、Model；这三个文件夹分别对应该框架的三个组成部分，这一点没什么好说的。针对Model中的一些属性而言，如果想具有属性通知的功能的话就需要继承INotifyPropertyChanged接口，并需要自定义一个函数用于触发对应的PropertyChanged事件，一般情况下我们都会把这一部分封装到一个类中，供其它类来继承它。这样就避免出现代码冗余的问题。示例代码如下所示：

 1
                public
                class ObservableObject : INotifyPropertyChanged

 2
                    {

 3
                public
                event PropertyChangedEventHandler PropertyChanged;

 4
                public
                void RaisePropertyChanged(string propertyName)

 5
                        {

 6
                if (PropertyChanged != null)

 7
                            {

 8                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

 9
                            }

10
                        }

11     }

View Code

接下来，我们就需要让对应的Model类来继承我们写的这个具有属性通知的类，示例代码如下所示：

 1
                public
                class User:ObservableObject

 2
                    {

 3
                private
                string _name;

 4
                public
                string Name

 5
                        {

 6
                get { return _name; }

 7
                set
            
 8
                            {

 9                 _name = value;

10                 RaisePropertyChanged("Name");

11
                            }

12
                        }

13
            
14
                private
                int _age;

15
            
16
                public
                int Age

17
                        {

18
                get { return _age; }

19
                set
            
20
                            {

21                 _age = value;

22                 RaisePropertyChanged("Age");

23
                            }

24
                        }

25
            
26
                public User(string name,int age)

27
                        {

28
                this.Name = name;

29
                this.Age = age;

30
                        }

31
            
32
                ///
                <summary>
            
33
                /// 给ViewModel提供一个获取Model中集合对象的接口

34
                ///
                </summary>
            
35
                ///
                <returns></returns>
            
36
                public
                static ObservableCollection<User> GetUsers()

37
                        {

38
                return
                new ObservableCollection<User>()

39
                            {

40
                new User("hippieZhou",23),

41
                new User("小明",12),

42
                new User("老王",50)

43
                            };

44
                        }

45     }

View Code

Model已经搭建完成，接着我们就开始搭建ViewModel，示例代码如下所示：

 1
                public
                class MainPageViewModel : ObservableObject

 2
                    {

 3
                private ObservableCollection<User> _users;

 4
                public ObservableCollection<User> Users

 5
                        {

 6
                get { return _users; }

 7
                set
            
 8
                            {

 9                 _users = value;

10                 RaisePropertyChanged("Users");

11
                            }

12
                        }

13
            
14
                public MainPageViewModel()

15
                        {

16
                this.Users = User.GetUsers();

17
                        }

18     }

View Code

OK，是不是很简单，接下来就是View中的数据绑定，示例代码如下所示：

 1
                <Page.DataContext>
                    
 2
                <vm:MainPageViewModel/>
                    
 3
                </Page.DataContext>
                    
 4
            
 5
                <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                                
 6
                <ListView x:Name="lv" Grid.Row="1" ItemsSource="{Binding Users}">
                                                
 7
                <ListView.ItemTemplate>
                    
 8
                <DataTemplate>
                    
 9
                <ListViewItem>
                    
10
                <Grid>
                    
11
                <Grid.ColumnDefinitions>
                    
12
                <ColumnDefinition Width="200"/>
                        
13
                <ColumnDefinition Width="*"/>
                        
14
                </Grid.ColumnDefinitions>
                    
15
                <TextBlock Text="{Binding Name}" Grid.Column="0"/>
                                        
16
                <TextBlock Text="{Binding Age}" Grid.Column="1"/>
                                        
17
                </Grid>
                    
18
                </ListViewItem>
                    
19
                </DataTemplate>
                    
20
                </ListView.ItemTemplate>
                    
21
                </ListView>
                    
22
                </Grid>

View Code

二：为页面绑定Command

写到这算是完成了1/3，界面是展示了数据，但是我们不能对它进行任何的操作，因此我们还需要让数据能够动态的增加和删除，接下来我们需要使用有关Command的相关知识了，首先，Command属于ButtonBase的一个字段，如果我们想为对应的Command进行绑定的话，那就需要这个绑定源对应的委托继承自ICommand接口，需要重写ICommand对应的两个接口函数。其次，由于ICommand提供了两个接口函数CanExecute和Execute，因此当CanExecute为false时候Execute是不被执行，此时绑定的Command是失效的，那么对应的控件应该自动处于禁用状态的，但是在WindowsStore类型的应用不再像WPF那样具有CommandManager的功能，不能自动触发CanExecuteChanged，这样就导致控件的颜色仍然不是禁用状态的颜色（尽管没有执行对应的函数），因此我们需要手动触发这个事件，来保证前台的控件的显示状态在指定的条件下发生改变。

在此，我们一般会采取封装的思想来处理这种情况，因此我选择封装一个类DelegateCommand，继承至ICommand，示例代码如下所示：

 1
                public sealed class DelegateCommand : ICommand

 2
                    {

 3
                        public event EventHandler CanExecuteChanged;

 4         /// <summary>
                    
 5
                        /// 需要手动触发属性改变事件

 6         /// </summary>
                    
 7
                        public void RaiseCanExecuteChanged()

 8
                        {

 9
                            if (CanExecuteChanged != null)

10
                            {

11
                                CanExecuteChanged(this, EventArgs.Empty);

12
                            }

13
                        }

14
            
15         /// <summary>
                    
16
                        /// 决定当前绑定的Command能否被执行

17
                        /// true：可以被执行

18
                        /// false：不能被执行

19         /// </summary>
                    
20         /// <param name="parameter">不是必须的，可以依据情况来决定，或者重写一个对应的无参函数</param>
                                
21         /// <returns></returns>
                            
22
                        public bool CanExecute(object parameter)

23
                        {

24
                            return this.MyCanExecute == null ? true : this.MyCanExecute(parameter);

25
                        }

26
            
27         /// <summary>
                    
28
                        /// 用于执行对应的命令，只有在CanExecute可以返回true的情况下才可以被执行

29         /// </summary>
                    
30         /// <param name="parameter"></param>
                                
31
                        public void Execute(object parameter)

32
                        {

33
                            try

34
                            {

35
                                this.MyExecute(parameter);

36
                            }

37
                            catch (Exception ex)

38
                            {

39
                                #if DEBUG

40
            
41
                                Debug.WriteLine(ex.Message);

42
            
43
                                #endif

44
                            }

45
                        }

46
            
47         /// <summary>
                    
48
                        /// 

49         /// </summary>
                    
50         public Action<Object> MyExecute { get; set; }

51         public Func<Object, bool> MyCanExecute { get; set; }

52
            
53         /// <summary>
                    
54
                        /// 构造函数，用于初始化

55         /// </summary>
                    
56         /// <param name="execute"></param>
                                
57         /// <param name="canExecute"></param>
                                
58         public DelegateCommand(Action<Object> execute, Func<Object, bool> canExecute)

59
                        {

60
                            this.MyExecute = execute;

61
                            this.MyCanExecute = canExecute;

62
                        }

63     }

View Code

然后在我们的ViewModel中创建对应的Command就可以了，我们可以将ViewModel改造成下面这个样子：

 1
                public class MainPageViewModel : ObservableObject

 2
                    {

 3         private ObservableCollection<User> _users;

 4         public ObservableCollection<User> Users

 5
                        {

 6
                            get { return _users; }

 7
                            set

 8
                            {

 9
                                _users = value;

10
                                RaisePropertyChanged("Users");

11
                            }

12
                        }

13
            
14
                        private DelegateCommand _addCommand;

15
            
16         /// <summary>
                    
17
                        /// 当当前集合项的个数小于5时允许用户继续添加，否则就不允许用户添加

18         /// </summary>
                    
19
                        public DelegateCommand AddCommand

20
                        {

21
                            get

22
                            {

23
                                return _addCommand ?? (_addCommand = new DelegateCommand

24
                                  ((Object obj) =>

25
                                  {

26
                                      //添加一条记录

27
                                      this.Users.Add(new User(DateTime.Now.ToString(),DateTime.Now.Hour));

28
                                      //手动触发CanExecuteChanged事件来改变对应控件的显示状态

29
                                      this._addCommand.RaiseCanExecuteChanged();

30
                                      this._delCommand.RaiseCanExecuteChanged();

31
                                  },

32                   (Object obj) => this.Users.Count < 5));

33
                            }

34
                        }

35
            
36
                        /// <summary>
                
37
                        /// 当当前集合项的个数大于1时允许用户继续删除，否则就不允许用户删除

38         /// </summary>
                    
39
                        private DelegateCommand _delCommand;

40
                        public DelegateCommand DelCommand

41
                        {

42
                            get

43
                            {

44
                                return _delCommand ?? (_delCommand =

45
                                  new DelegateCommand((Object obj) =>

46
                                  {

47
                                      //删除一条记录

48
                                      this.Users.RemoveAt(0);

49
                                      //手动触发CanExecuteChanged事件来改变对应控件的显示状态

50
                                      this._addCommand.RaiseCanExecuteChanged();

51
                                      this._delCommand.RaiseCanExecuteChanged();

52
                                  },

53
                                  (Object obj) => this.Users.Count > 1));

54
                            }

55
                        }

56
            
57
                        public MainPageViewModel()

58
                        {

59
                            this.Users = User.GetUsers();

60
                        }

61     }

View Code

并将对应的View改造成下面这个样子：

 1
                <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                                
 2
                <Grid.RowDefinitions>
                    
 3
                <RowDefinition Height="Auto"/>
                        
 4
                <RowDefinition Height="*"/>
                        
 5
                </Grid.RowDefinitions>
                    
 6
                <StackPanel Grid.Row="0" HorizontalAlignment="Center" Width="100">
                                        
 7
                <Button Content="Add" Command="{Binding AddCommand}" HorizontalAlignment="Stretch" Margin="6"/>
                                                        
 8
                <Button Content="Del" Command="{Binding DelCommand}" HorizontalAlignment="Stretch" Margin="6"/>
                                                        
 9
                </StackPanel>
                    
10
                <ListView x:Name="lv" Grid.Row="1" ItemsSource="{Binding Users}">
                                                
11
                <ListView.ItemTemplate>
                    
12
                <DataTemplate>
                    
13
                <ListViewItem>
                    
14
                <Grid>
                    
15
                <Grid.ColumnDefinitions>
                    
16
                <ColumnDefinition Width="200"/>
                        
17
                <ColumnDefinition Width="*"/>
                        
18
                </Grid.ColumnDefinitions>
                    
19
                <TextBlock Text="{Binding Name}" Grid.Column="0"/>
                                        
20
                <TextBlock Text="{Binding Age}" Grid.Column="1"/>
                                        
21
                </Grid>
                    
22
                </ListViewItem>
                    
23
                </DataTemplate>
                    
24
                </ListView.ItemTemplate>
                    
25
                </ListView>
                    
26
                </Grid>

View Code

这个地方提醒新手朋友要注意的一个问题，如果你希望你的控件在指定条件下显示的状态不一样就需要手动触发CanExecuteChanged事件。

推荐链接：Implement ICommand.CanExecuteChanged in portable class library (PCL)

Re-enabling the CommandManager feature with RelayCommand in MVVM Light V5

三：Event To Command

接下来算是一个重点内容吧，如何将一个事件绑定到Command上？这个问题很现实，并不是所有的控件都有Command属性，当一个控件只有Event而没有Command我们该怎么办？

我们现在需求是选中一项后弹出一个对话框，显示你选中项的相关信息（通过EventToCommand来实现）

这个微软为我们提供了一个解决方案，如果你安装了Blend工具，你可以把目录C:\Program Files (x86)\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\BehaviorsXamlSDKManaged\12.0打开，你会发现有两个动态库很有用：Microsoft.Xaml.Interactions.dll和Microsoft.Xaml.Interactivity.dll；没错，就是它俩可以达成你的心愿，迅速将这两个动态库加入到工程中，然后你可以在你的XAML页面中进行绑定的，我把完整的代码罗列出来供大家参考：

 1
                <Page

 2
                x:Class="MVVM.MainPage"
                
 3
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                
 4
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                
 5
                    xmlns:local="using:MVVM"
                
 6
                    xmlns:vm="using:MVVM.ViewModel"
                
 7
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                
 8
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                
 9
                    mc:Ignorable="d"
                
10
            
11
                    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
                
12
                    xmlns:Core="using:Microsoft.Xaml.Interactions.Core">
                
13
                <!--
            
14
                    C:\Program Files (x86)\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\BehaviorsXamlSDKManaged\12.0

15
                -->
            
16
                <Page.DataContext>
                    
17
                <vm:MainPageViewModel/>
                    
18
                </Page.DataContext>
                    
19
            
20
                <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                                
21
                <Grid.RowDefinitions>
                    
22
                <RowDefinition Height="Auto"/>
                        
23
                <RowDefinition Height="*"/>
                        
24
                </Grid.RowDefinitions>
                    
25
                <StackPanel Grid.Row="0" HorizontalAlignment="Center" Width="100">
                                        
26
                <Button Content="Add" Command="{Binding AddCommand}" HorizontalAlignment="Stretch" Margin="6"/>
                                                        
27
                <Button Content="Del" Command="{Binding DelCommand}" HorizontalAlignment="Stretch" Margin="6"/>
                                                        
28
                </StackPanel>
                    
29
                <ListView x:Name="lv" Grid.Row="1" ItemsSource="{Binding Users}">
                                                
30
                <ListView.ItemTemplate>
                    
31
                <DataTemplate>
                    
32
                <ListViewItem>
                    
33
                <Grid>
                    
34
                <Grid.ColumnDefinitions>
                    
35
                <ColumnDefinition Width="200"/>
                        
36
                <ColumnDefinition Width="*"/>
                        
37
                </Grid.ColumnDefinitions>
                    
38
                <TextBlock Text="{Binding Name}" Grid.Column="0"/>
                                        
39
                <TextBlock Text="{Binding Age}" Grid.Column="1"/>
                                        
40
                </Grid>
                    
41
                </ListViewItem>
                    
42
                </DataTemplate>
                    
43
                </ListView.ItemTemplate>
                    
44
                <Interactivity:Interaction.Behaviors>
                    
45
                <Core:EventTriggerBehavior EventName="SelectionChanged">
                        
46
                <Core:InvokeCommandAction Command="{Binding ShowDialog}" CommandParameter="{Binding ElementName=lv,Path=SelectedItem,Converter={StaticResource converter}}"/>
                                                
47
                </Core:EventTriggerBehavior>
                    
48
                </Interactivity:Interaction.Behaviors>
                    
49
                </ListView>
                    
50
                </Grid>
                    
51
                </Page>

View Code

这里面用到了一个非MVVM的知识：值转换器（只是为了弹出框能够显示我想要的数据而已，没什么其他的作用），示例代码如下所示：

1
                ///
                <summary>
            
 2
                /// 定义一个值转换器，用于将绑定的数据格式化为指定的格式

 3
                ///
                </summary>
            
 4
                public
                class ItemConverter : IValueConverter

 5
                    {

 6
                public
                object Convert(object value, Type targetType, object parameter, string language)

 7
                        {

 8             User user = value as User;

 9
                if (user != null)

10
                            {

11
                return user.Name;

12
                            }

13
                else
            
14
                            {

15
                return
                "you have not select!";

16
                            }

17
                        }

18
            
19
                public
                object ConvertBack(object value, Type targetType, object parameter, string language)

20
                        {

21
                throw
                new NotImplementedException();

22
                        }

23     }

View Code

然后对应的命令写法和之前的是一样的，如下所示：

1
                private DelegateCommand _showDialog;

 2
                public DelegateCommand ShowDialog

 3
                        {

 4
                get
            
 5
                            {

 6
                return _showDialog ?? (_showDialog= new DelegateCommand(

 7
                async (Object obj) =>

 8
                                    {

 9
                await
                new Windows.UI.Popups.MessageDialog(obj.ToString()).ShowAsync();

10
                                    },

11                     (Object obj) => true));

12
                            }

13         }

View Code

写到这，我们的MVVM框架已经搭建的差不多了，还算满意，我运行的效果是这样的（你的也是这样的吗？）：

我不知道我用我的这种方式理解和设计应用程序的MVVM框架在诸位眼中是否规范，合法，还请高手不吝赐教呀：)！！！！

四：写在最后

如果你能够熟练理解并能够将MVVM运用到自己的项目中，并计划使用第三方MVVM框架的话，我建议你使用MVVMLight，简单易用上手快，并且它已经支持UWP的项目模板了。我真的很佩服作者（官网地址）的编码能力，我的很多思路都是从他的博客中获得灵感的，希望你也是如此！

GitHub ：https://github.com/hippieZhou/MVVM

3楼笑对当空: 突然发现这不是WPF那一套么。。。

2楼笑对当空: 额说的有点虚浮了，不过这一套其实可以应用在任何C#语言下的环境的，包括且不仅仅包括 WPF Winfrom Asp.net，由此可见框架重要的果然还是思想而不是语言本身

1楼h82258652: 好文章，支持博主，点个推荐，希望有续篇。，内容感觉还是比较浅，例如可以再扩充下ObservableObject。，例如MVVMlight中，public string Name，{， get{return _name

在UWP中构建自个儿的MVVM框架

其他相似内容：

博客园客户端(Universal App)开发漫笔

[Win 八/WP 8]简单实现弹出页更换头像的功能

博客园客户端(Universal App)开发漫笔 - 数据基础准备

博客园客户端(Universal App)开发漫笔 - 增量加载（incremental loading）

博客园客户端(Universal App)开发漫笔 - App的精灵：自定义控件

博客园客户端(Universal App)开发漫笔 - 样式管理与夜间模式

WinRT 中后台任务类的宣言

博客园 UAP 的一部分反馈回复

博客园客户端UAP开发漫笔 - App的心动杀手锏：动画

博客园客户端UAP开发漫笔-自定义控件的左膀右臂

热门推荐：