MVVM主要是为了逻辑代码和视图的分离,使CodeBehind只包含对UI的操作。通过绑定和Command来实现
下面我们实现一个最简单的示例,点击按钮使年龄加1.
XAML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
Window
x:Class="DeepXAML.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DeepXAML"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:cl="clr-namespace:System.Collections;assembly=mscorlib"
Title="MainWindow" Height="250" Width="450">
<
StackPanel
>
<
TextBox
Text="{Binding Path=Name}"></
TextBox
>
<
TextBox
Text="{Binding Path=Age}"></
TextBox
>
<
Button
Command="{Binding Path=AddAge}" >Add Age</
Button
>
</
StackPanel
>
</
Window
>
|
MainPageViewModel
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
public
class
MainPageViewModel : INotifyPropertyChanged
{
public
event
PropertyChangedEventHandler PropertyChanged;
private
string
name;
public
string
Name {
get
{
return
name; }
set
{
name = value;
if
(
this
.PropertyChanged !=
null
)
{
this
.PropertyChanged.Invoke(
this
,
new
PropertyChangedEventArgs(
"Name"
));
}
}
}
private
int
age;
public
int
Age {
get
{
return
age; }
set
{
age = value;
if
(
this
.PropertyChanged !=
null
)
{
this
.PropertyChanged.Invoke(
this
,
new
PropertyChangedEventArgs(
"Age"
));
}
}
}
public
ICommand AddAge
{
get
{
return
new
AddAgeCommand(
this
); }
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
public
class
AddAgeCommand : ICommand
{
private
MainPageViewModel mMainPageViewModel;
public
AddAgeCommand(MainPageViewModel model)
{
mMainPageViewModel = model;
}
public
bool
CanExecute(
object
parameter)
{
return
true
;
}
public
event
EventHandler CanExecuteChanged;
public
void
Execute(
object
parameter)
{
this
.mMainPageViewModel.Age += 1;
}
}
|
我们可以看一下后台只有很少代码:
1
2
3
4
5
6
7
8
9
|
public
partial
class
MainWindow : Window
{
public
MainWindow()
{
InitializeComponent();
MainPageViewModel mainPageViewModel =
new
MainPageViewModel { Age = 20, Name =
"Jack"
};
this
.DataContext = mainPageViewModel;
}
}
|
王德水