初识MVVM

MVVM分解：

M->   源数据一堆get,set方法，对应Java中，JavaBean

V->    窗体，显示界面

VM-> 业务逻辑层，对窗体的逻辑响应，及数据传输的处理。

这样做的优点：

窗体改变，只需变动窗体样式，绑定对应的数据及响应事件（VM）。

VM只需处理逻辑改变

M只需添加数据或删除数据，及将数据变化反馈给UI

MVVM需要实现两个关键接口。

A) 
ICommand接口，此接口用于实现界面响应事件的委托

B) 
INotifyPropertyChanged接口，此接口用于实现 界面和数据源同步变化

以登录窗体为例，实现

A）修改Module中数据，改变界面显示

B）修改界面输入数据，同步Module中的数据

1）新建工程，KnowXAML

主界面类.cs如下：

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using KnowXAML.ModuleView;
 
namespace
KnowXAML
{
   
///<summary>
   
/// Interaction logic for MainWindow.xaml
   
///</summary>
   
public partial
class MainWindow :
Window
    {
       
public MainWindow()
        {
           InitializeComponent();
        }
    }
}

 

2）新建ICommand界面命令代理类
UICommand. UICommand用于实现空间响应事件的代理。

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
 
namespace
KnowXAML.DelegateCommand
{
   
class
UICommand :
ICommand
    {
       
///<summary>
       
///判断控件是否可用
       
///</summary>
       
Func<object,
bool> canExecute;
 
       
///<summary>
       
///执行方法
       
///</summary>
       
Action<object>
executeAction;
 
       
bool canExecuteCache;
       
public event
EventHandler CanExecuteChanged;
 
       
public UICommand(Action<object>
executeAction, Func<object,
bool> canExecute)
        {
           
this.executeAction = executeAction;
           
this.canExecute = canExecute;
        }
 
        bool
ICommand.CanExecute(objectparameter)
        {
           
bool temp = canExecute(parameter);
           
if (canExecuteCache != temp)
            {
               canExecuteCache = temp;
               if
(CanExecuteChanged != null)
                   CanExecuteChanged(this,
newEventArgs());
            }
           
return canExecuteCache;
        }
 
       
void ICommand.Execute(object
parameter)
        {
           executeAction(parameter);
        }
    }
}
 

3）创建类UINotifier，实现界面数据同步接口INotifyPropertyChanged。此类用于同步界面和底层类（Bean）数据。

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel;
 
namespace
KnowXAML.DelegateNotifer
{
   
public abstract
class UINotifier :
INotifyPropertyChanged
    {
       
#region INotifyPropertyChanged
       
publiceventPropertyChangedEventHandler
PropertyChanged;
       
#endregion
 
       
#region Protected
       
protectedvirtualvoid
OnPropertyChanged(stringpropertyName)
        {
           
if (PropertyChanged !=
null)
               PropertyChanged(this,
newPropertyChangedEventArgs(propertyName));
        }
       
#endregion
    }
}
 

4）创建底层数据类（Bean）,User,继承类DelegateNotifer

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Threading.Tasks;
using KnowXAML.DelegateNotifer;
 
namespace
KnowXAML.Module
{
   
public
class
User :
UINotifier
    {
       
private
string userName;
       
public
string Name
        {
           
get
            {
               return
userName;
            }
           
set
            {
               userName =
value;
               OnPropertyChanged("Name");
           }           

        }
 
       
private
string userPassword;
       
public string
Password
        {
           
get
            {
               return
userPassword;
            }
           
set
            {
               userPassword =
value;
               OnPropertyChanged("Password");
            }
        }
    }
}
 

5）创建ModuleView类，用于User类和界面的数据桥接。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using KnowXAML.Module;
using KnowXAML.DelegateCommand;
using KnowXAML.DelegateNotifer;
 
namespace
KnowXAML.ModuleView
{
   
class
UserModuleView
    {
       
public
User user {
get;
set; }
       
public UICommand
uiCommand { get;
set; }

 
       
public UserModuleView()
        {
           
this.user =
newUser();
           
this.uiCommand =
new UICommand(SetUserInfo,
arg=>true); //指定命令外//部接口uiCommand对应函数为SetUserInfo。uiCommand用于XMAL中配置
        }
 
       
public void
SetUserInfo(object parm)
        {
           user.Name =
"zhangsan";
           user.Password =
"123124";
        }
 
       
public User
userMode
        {
           
get
            {
               return
user;
            }
           
set
            {
               if
(user == value)
                   return;
               user =
value;
            }
        }
 
    }
}
 

6）添加控件，修改XMAL，添加数据绑定及响应事件。黄色背景处为添加数据源，及响应事件项。

 

XMAL格式如下：

<Window
x:Class="KnowXAML.MainWindow"
      
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      
 xmlns:local="clr-namespace:KnowXAML"
      
 xmlns:vm="clr-namespace:KnowXAML.ModuleView"
      
 mc:Ignorable="d"
      
 Title="MainWindow"Height="277.407"
Width="525">
   <Window.DataContext>
       
<vm:UserModuleView
/>
   </Window.DataContext>
   
<Grid>
       
<Grid.ColumnDefinitions>
           
<ColumnDefinition
Width="118*"/>
           
<ColumnDefinition
Width="401*"/>
       
</Grid.ColumnDefinitions>
 
       
<GroupBox
x:Name="groupBox"Header="GroupBox"
HorizontalAlignment="Left"Margin="10,26,0,-0.4"VerticalAlignment="Top"
Height="224"Width="498"
Background="AliceBlue"Grid.ColumnSpan="2">
           
<Grid
HorizontalAlignment="Left"Margin="10,10,-3.2,34.4"
Width="478">
               <Grid.ColumnDefinitions>
                   <ColumnDefinitionWidth="115*"/>
                   <ColumnDefinitionWidth="363*"/>
               </Grid.ColumnDefinitions>
               <Label
x:Name="lblUserName"Content="UserName:"HorizontalAlignment="Left"
Margin="31,24,0,0"VerticalAlignment="Top"
Width="86"FontSize="16"
Grid.ColumnSpan="2"/>
               <TextBox
x:Name="txtUserName"HorizontalAlignment="Left"
Height="27" Margin="20.587,29,0,0"
Text="{Binding
Path= userMode.Name}"TextWrapping="Wrap" VerticalAlignment="Top"Width="251"
FontSize="16"Grid.Column="1"/>
               <Label
x:Name="lblPassword"Content="Password:"
FontSize="16" HorizontalAlignment="Left"Margin="36,82,0,0"VerticalAlignment="Top"RenderTransformOrigin="-0.205,0.338"Grid.ColumnSpan="2"/>
               <TextBox
x:Name="txtPassword"HorizontalAlignment="Left" FontSize="16"Text="{Binding
Path= userMode.Password}" Height="25"Margin="20.587,88,0,0"TextWrapping="Wrap" VerticalAlignment="Top"Width="251"
Grid.Column="1"/>
               <Button
x:Name="btnCancel"Content="Cancel"HorizontalAlignment="Left"
Margin="62.587,132,0,0"VerticalAlignment="Top"
Width="75"Grid.Column="1"/>
               <Button
x:Name="btnOK" Command="{Binding
uiCommand}" Content="OK"HorizontalAlignment="Left"
Margin="196.587,132,0,0"VerticalAlignment="Top"
Width="75"Grid.Column="1"/>
           
</Grid>
       
</GroupBox>
   
</Grid>
</Window>
 

7）运行界面

初始化界面：



点击“OK”后界面



修改UserName后，点击“OK”



如果觉得我写的还不错，请关注我的微信：