初识MVVM(一)
说明：关于什么是MVVM，园子中已经有很多文章做过介绍，自己对MVVM也有了初步的认识，算是一知半解吧。概念看起来总是有那么点抽象，简单的办法就是通过动手实践来进一步理解。
从网上弄了几个案例，相信有人看过，在此只为了自己加深对MVVM的认识。
1.目录结构，MVVM的目录结构大致如下：
2.类图及实现过程
简单的实现过程大致如下，首先就是手动实现两个接口：INotifyPropertyChanged,ICommand.
2.1 INotifyPropertyChanged 接口的实现
1 //1.继承INotifyPropertyChanged，要引用该命名空间 2 using System.ComponentModel; 3 4 namespace MVVMDemo.ViewModels 5 { 6 class NotificationObject:INotifyPropertyChanged 7 { 8 //（intface INotifyPropertyChanged,向客户端发出某些属性已更改的通知） 9 //2.实现接口INotifyPropertyChanged 10 11 public event PropertyChangedEventHandler PropertyChanged; 12 13 public void RaisePropertyChanged(string propertyName) 14 { 15 if (this.PropertyChanged!=null) 16 { 17 this.PropertyChanged.Invoke(this,new PropertyChangedEventArgs(propertyName)); 18 } 19 } 20 } 21 }
2.2 实现ICommand接口
1 class DelegateCommand:ICommand 2 { 3 //ICommand 两个方法 CanExecute 和Execute，一个事件CanExecuteChanged 4 5 public bool CanExecute(object parameter) 6 { 7 //throw new NotImplementedException(); 8 if (this.CanExecuteFunc==null) 9 { 10 return true; 11 } 12 return this.CanExecuteFunc(parameter); 13 } 14 15 public event EventHandler CanExecuteChanged; 16 17 //Execute 18 public void Execute(object parameter) 19 { 20 // throw new NotImplementedException(); 21 if (this.ExecuteAction==null) 22 { 23 return; 24 } 25 this.ExecuteAction(parameter); 26 } 27 28 public Action<object> ExecuteAction { get; set; } 29 public Func<object, bool> CanExecuteFunc { get; set; } 30 }
2.3 ViewModel的实现
ViewModel中主要实现业务逻辑。本例要实现两数的加法运算：
在这个步骤中首先要完成数据属性的定义，例如：
private double input1; public double Input1 { get { return input1; } set { input1 = value; this.RaisePropertyChanged("Input1"); } }
如果数据属性的数量比较多，那么输入总是要花费较多的时间，这里有个小技巧，就是使用快捷的输入方法，但是VS自身提供的代码段是有限的，幸运的是我们可以通过：工具>
代码段管理器>添加来添加自定义的代码段。
具体的方法是在安装路径下找到系统内置的代码段来修改，自定义自己需要的代码段。
1 <CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> 2 <CodeSnippet Format="1.0.0"> 3 <Header> 4 <Title>propfull</Title> 5 <Shortcut>propfull</Shortcut> 6 <Description>属性和支持字段的代码段</Description> 7 <Author>Microsoft Corporation</Author> 8 <SnippetTypes> 9 <SnippetType>Expansion</SnippetType> 10 </SnippetTypes> 11 </Header> 12 <Snippet> 13 <Declarations> 14 <Literal> 15 <ID>type</ID> 16 <ToolTip>属性类型</ToolTip> 17 <Default>int</Default> 18 </Literal> 19 <Literal> 20 <ID>property</ID> 21 <ToolTip>属性名</ToolTip> 22 <Default>MyProperty</Default> 23 </Literal> 24 <Literal> 25 <ID>field</ID> 26 <ToolTip>支持此属性的变量</ToolTip> 27 <Default>myVar</Default> 28 </Literal> 29 </Declarations> 30 <Code Language="csharp"> 31 <![CDATA[private $type$ $field$; 32 33 public $type$ $property$ 34 { 35 get { return $field$;} 36 set { $field$ = value;} 37 } 38 $end$]]> 39 </Code> 40 </Snippet> 41 </CodeSnippet> 42 </CodeSnippets>
主要修改Title，Shortcut和Code节点中的内容。例如：将上面的Code节点的内容改为如下
<Code Language="csharp"> <![CDATA[private $type$ $field$; public $type$ $property$ { get { return $field$;} set { $field$ = value; this.RaisePropertyChanged("$property$"); } } $end$]]> </Code>
通过输入ShortCut节点中的名称，双击Tab键就可以快速输入代码。
2）命令属性的实现
public DelegateCommand AddCommand { get; set; } public DelegateCommand SaveCommand { get; set; } private void Add(object parameter) { this.Result = this.Input1 + this.Input2; } private void Save(object parameter) { SaveFileDialog dlg = new SaveFileDialog(); dlg.ShowDialog(); }
3）在构造函数中实例化委托
1 //构造函数 2 public MainWindowViewModel() 3 { 4 this.AddCommand = new DelegateCommand(); 5 this.AddCommand.ExecuteAction = new Action<object>(this.Add); 6 7 this.SaveCommand = new DelegateCommand(); 8 this.SaveCommand.ExecuteAction = new Action<object>(this.Save); 9 }
2.4绑定View
1 <Button Content="Save" Height="38" HorizontalAlignment="Left" Margin="163,20,0,0" x:Name="btnSave" VerticalAlignment="Top" Width="110" Command="{Binding SaveCommand}" /> 2 <TextBox Background="{StaticResource {x:Static SystemColors.HighlightBrushKey}}" Grid.Row="1" Margin="6" Text="{Binding Input1}" /> 3 <TextBox Background="{StaticResource {x:Static SystemColors.HighlightBrushKey}}" Grid.Row="2" Margin="6" Text="{Binding Input2}" /> 4 <TextBox Background="{StaticResource {x:Static SystemColors.HighlightBrushKey}}" Grid.Row="3" Margin="6" Text="{Binding Result}" /> 5 <Button Content="Add" Height="38" HorizontalAlignment="Left" Margin="163,21,0,0" x:Name="btnAdd" VerticalAlignment="Top" Width="108" Grid.Row="4" Command="{Binding AddCommand}" />
在后台代码中，只需做类似如下的操作：
1 public partial class MainWindow : Window 2 { 3 public MainWindow() 4 { 5 InitializeComponent(); 6 7 this.DataContext = new MainWindowViewModel(); 8 } 9 }
即使我们将TextBox控件改为使用Slider，我们只需重新对Slider的进行重新绑定。如下：
<Slider x:Name="slider1" Grid.Row="0" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4" Value="{Binding Input1}" /> <Slider x:Name="slider2" Grid.Row="1" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4" Value="{Binding Input2}" /> <Slider x:Name="slider3" Grid.Row="2" Background="LightBlue" Minimum="-100" Maximum="100" Margin="4" Value="{Binding Result}" /> <Button x:Name="addButton" Grid.Row="3" Content="Add" Width="120" Height="80" Command="{Binding AddCommand}"/>
说明：其实，没有必要自己手动实现两个接口，Prism为你完成了这两件事，你需要做的就是添加引用集并引用相应的命名空间。
