Silverlight之MVVM:模型-视图-视图模型(Model-View-ViewModel)(16)

Silverlight之MVVM:模型-视图-视图模型(Model-View-ViewModel)(16)


概述
组成部分Model、View、ViewModel,程序=数据结构+算法。Model就是数据结构,ViewModel实现算法数据处理,View实现数据展现。
View:UI界面
ViewModel:它是View的抽象,负责View与Model之间信息转换,将View的Command传送到Model;
Model:数据层

View与ViewModule连接可以通过下面的方式

Binding Data:实现数据的传递
Command:实现操作的调用
AttachBehavior:实现控件加载过程中的操作

View没有大量代码逻辑。结合WPF、Silverlight绑定机制,MVP演变出了MVVM,充分利用了WPF、Silverlight的优势,将大量代码逻辑、状态转到ViewModel,
可以说MVVM是专门为WPF、Silverlight打造的。

View绑定到ViewModel,然后执行一些命令在向它请求一个动作。而反过来,ViewModel跟Model通讯,告诉它更新来响应UI。
这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易,外观设计师就越容易使用Blend来创建一个漂亮的界面。
同时,当UI和功能越来越松耦合的时候,功能的可测试性就越来越强。

下面是一个具体的代码实现例子:

1.Model

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MVVM模式.Model
{
public class AddModel : DependencyObject
{
public static readonly DependencyProperty Num1Property = DependencyProperty.Register("Num1", typeof(int), typeof(AddModel), null);
public int Num1
{
get { return (int)GetValue(Num1Property); }
set { SetValue(Num1Property, value); }
}

public int Num2
{
get { return (int)GetValue(Num2Property); }
set { SetValue(Num2Property, value); }
}

// Using a DependencyProperty as the backing store for Num2. This enables animation, styling, binding, etc...
public static readonly DependencyProperty Num2Property =
DependencyProperty.Register("Num2", typeof(int), typeof(AddModel), null);

public static readonly DependencyProperty ResoultProperty = DependencyProperty.Register("Resoult", typeof(int), typeof(AddModel), null);
public int Resoult
{
get { return (int)GetValue(ResoultProperty); }
set { SetValue(ResoultProperty, value); }
}

}
}


2.ViewModel

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using MVVM模式.Model;
namespace MVVM模式.ViewModel
{
public class AddViewModel
{

public AddModel MyModel
{
get { return new AddModel(); }
}

public ICommand AddCommand
{
get
{
return new AddParams();
}
}
}

public class AddParams : ICommand
{
public bool CanExecute(object parameter)
{
return true;
}

public event EventHandler CanExecuteChanged;

public void Execute(object parameter)
{
AddModel am=parameter as AddModel;
am.Resoult = am.Num1 + am.Num2;
}
}
}

3.View
后台代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using MVVM模式.ViewModel;
namespace MVVM模式
{
public partial class MainPage : UserControl
{
private AddViewModel am = new AddViewModel();
public MainPage()
{
InitializeComponent();
this.DataContext = am.MyModel;
this.button1.Command = am.AddCommand;
}

}
}
前台代码:

<UserControl x:Class="MVVM模式.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<TextBox Height="23" HorizontalAlignment="Left" Margin="42,70,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Num1,Mode=TwoWay}" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="213,70,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Text="{Binding Num2,Mode=TwoWay}" />

<TextBox Height="23" HorizontalAlignment="Left" Margin="127,120,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" Text="{Binding Resoult,Mode=TwoWay}"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="178,71,0,0" Name="textBlock1" Text="+" VerticalAlignment="Top" />
<Button Content="计算" Height="23" HorizontalAlignment="Left" Margin="149,150,0,0" CommandParameter="{Binding}" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</UserControl>

4.注意附加属性应用

public int Num1
{
get { return (int)GetValue(Num1Property); }
set { SetValue(Num1Property, value); }
}

// Using a DependencyProperty as the backing store for Num1. This enables animation, styling, binding, etc...
public static readonly DependencyProperty Num1Property =
DependencyProperty.Register("Num1", typeof(int), typeof(TestModel), new PropertyMetadata(0, new PropertyChangedCallback(xxx)));


static void xxx(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MessageBox.Show("sss");
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值