[Silverlight入门系列]使用MVVM模式(6)：使用Behavior

Behavior把一些常用的行为封装成可重复使用的组件(Component)，在理想状况下，Designer(设计师)或domain expert(特定领域的专家，例如财会人员、HR人员、或MIS)甚至可以完全不需要具备程序设计的观念，只需要了解基础的事件(Event)观念，就可以顺利的开发出一套系统，若需要实现特定的功能时，可商请developere为他们开发所需要的Behavior，designer只需要取得这些Behavior并使用即可。例如，界面设计人员可以使用Expression Blend把一个Behavior拖到一个界面元素上，比如右键点击以后启动一段动画这个行为，这个界面元素就会自动执行，岂不是很清爽！（当然，执行函数还是要编程人员编写），来个例子：

界面xaml:

 

View Code

    
    


     
      1 <
     
     UserControl  2  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     
      
     
      3  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     
      
     
      4  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     
      
     
      5  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     
      
     
      6  xmlns:wm="clr-namespace:AsycValidation"
     
      
     
      7  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="AsycValidation.MainPage"
     
      
     
      8  mc:Ignorable="d"
     
      
     
      9  x:Name="MyUserControl"
     
      
     
     10  d:DesignHeight="300" d:DesignWidth="400">
     
      
     
     11 
     
      
     
     12  <Grid x:Name="Layout" >
     
      
     
     13  <TextBlock Height="32" HorizontalAlignment="Left" Margin="41,53,0,0" x:Name="textBlock1" Text="Company:" VerticalAlignment="Top" Width="66" />
     
      
     
     14  <TextBox Height="31" HorizontalAlignment="Left" Margin="120,45,0,0" x:Name="textBox1" Text="{Binding CompanyName, Mode=TwoWay, NotifyOnValidationError=True}" VerticalAlignment="Top" Width="119" />
     
      
     
     15  <TextBox Height="30" HorizontalAlignment="Left" Margin="120,104,0,0" x:Name="textBox2" Text="{Binding CompanyID, Mode=TwoWay, NotifyOnValidationError=True}" VerticalAlignment="Top" Width="119" />
     
      
     
     16  <Button Content="Button" Height="36" HorizontalAlignment="Left" Margin="120,156,0,0" x:Name="button1" VerticalAlignment="Top" Width="81" >
     
      
     
     17  <i:Interaction.Triggers>
     
      
     
     18  <i:EventTrigger EventName="Click">
     
      
     
     19  <ei:CallMethodAction MethodName="button1_Click" TargetObject="{Binding ElementName=MyUserControl}"/>
     
      
     
     20  </i:EventTrigger>
     
      
     
     21  <i:EventTrigger>
     
      
     
     22  <ei:CallMethodAction MethodName="button1_loaded" TargetObject="{Binding ElementName=MyUserControl}"/>
     
      
     
     23  </i:EventTrigger>
     
      
     
     24  </i:Interaction.Triggers>
     
      
     
     25  </Button>
     
      
     
     26  </Grid>
     
      
     
     27  </UserControl>

    
    

 

界面xaml.cs:

 

View Code

    
    


     
      1 using
     
      System;  2  using
     
      System.Collections.Generic;  3  using
     
      System.Linq;  4  using
     
      System.Net;  5  using
     
      System.Windows;  6  using
     
      System.Windows.Controls;  7 using
     
      System.Windows.Documents;  8 using
     
      System.Windows.Input;  9 using
     
      System.Windows.Media; 10 using
     
      System.Windows.Media.Animation; 11 using
     
      System.Windows.Shapes; 12 
     
      
     
     13 namespace
     
      AsycValidation 14 
     
     { 15  public partial class
     
      MainPage : UserControl 16 
     
      { 17  public
     
      MainPage() 18 
     
      { 19 
     
      InitializeComponent(); 20 
     
      
     
     21  CompanyModel m1 = new CompanyModel() { CompanyID = 1, CompanyName = "abc"
     
      }; 22 
     
      
     
     23  companyViewModel = new
     
      CompanyViewModel(m1); 24  this.DataContext =
     
      companyViewModel; 25 
     
      
     
     26 
     
      } 27 
     
      
     
     28  public void
     
      button1_Click() 29 
     
      { 30  MessageBox.Show("ok"
     
     ); 31 
     
      } 32 
     
      
     
     33  public void
     
      button1_loaded() 34 
     
      { 35  MessageBox.Show("loaded"
     
     ); 36 
     
      
     
     37 
     
      } 38 
     
      
     
     39  public CompanyViewModel companyViewModel { get; set
     
     ; } 40 
     
      
     
     41 
     
      } 42 }

    
    

 

注意给这个button定义了两个CallMethodAction的behavior：一个是点击事件，一个是加载Loaded事件。

 

   
   


    
     1 <Button Content="Button" Height="36" HorizontalAlignment="Left" Margin="120,156,0,0" x:Name="button1" VerticalAlignment="Top" Width="81" >
    
     
    
     2  <i:Interaction.Triggers>
    
     
    
     3  <i:EventTrigger EventName="Click">
    
     
    
     4  <ei:CallMethodAction MethodName="button1_Click" TargetObject="{Binding ElementName=MyUserControl}"/>
    
     
    
     5  </i:EventTrigger>
    
     
    
     6  <i:EventTrigger>
    
     
    
     7  <ei:CallMethodAction MethodName="button1_loaded" TargetObject="{Binding ElementName=MyUserControl}"/>
    
     
    
     8  </i:EventTrigger>
    
     
    
     9  </i:Interaction.Triggers>
    
     
    
    10 </Button>

   
   

 

实现步骤：在VS2010中右键点击xaml文件“在Expression Blend中打开...”，然后左边拖一个Behavior到控件上来，配置属性，保存即可。要注意的是TargetObject属性配置。

Behavior or Command?

MVVM设计模式为了实现UI元素也UI界面逻辑分离项目组决定使用MVVM设计模式。把界面逻辑写在ViewModel层，View层由美工设计，通过绑定VM层的数据，实现分离。可是问题出来了，UI元素如何触发VM层的事件呢? 最开始很多人建议使用command命令，因为silverlight/wpf的很多控件都提供了Command属性。感觉还挺好使，只需要绑定VM层的ICommand属性就可以了。可是后来问题越来越复杂，主要出来以下几方面的问题：

　　(1) 只有ButtonBase提供了Command属性。其他没有继承这个基类的元素不提供此接口。需要自己扩展。

　　(2) UI元素事件一般会有很多，比如左击、右击、拖拉、load、unload等。

　　(3) UI元素可能在初始化时就会需要一些操作，比如Load事件。

 

开始我们使用Prism提供的DelegateCommand和CompositeCommand类来处理，可是对于左、右击这种情况很棘手，重写ICommand，那么多UI元素想累死啊，终于在微软Expression blend中找到答案。使用behavior，一切搞定。

 

Behavior提供CallMethodAction、ChangePropertyAction、DataStateBehavior等十三个行为，足够你处理一般事件调用情况了。比如CallMethodAction：提供EventName、MethodName两个属性，EventName：你可以选择任意元素事件，MethodName：可以让你直接绑定方法，基本上可以解决所有问题。使用也很简单，只需要在Blend中把相关行为Behavior拖放到控件上，然后设置相关属性，一切OK!

有哪些Behavior可用？

首先在Expression Blend控件库左边的behavior部分已经有好多实现的行为，可直接拖过来用，当然网上资源也很多(如这个），还能自己扩展。

自定义Behavior

举个例子，Silverlight文本框的一个老问题就是它只在失去焦点的时候才更新绑定源，失去焦点才做Validation，我们来编写一个behavior可以简单的解决这个问题：textbox文字改变就立即validation并更新绑定数据源。下载本CustomBehavior示例源代码

代码：

 

TextBoxUpdateBehavior : Behavior

    
    


     
      1 using
     
      System;  2 using
     
      System.Net;  3 using
     
      System.Windows;  4 using
     
      System.Windows.Controls;  5 using
     
      System.Windows.Documents;  6 using
     
      System.Windows.Ink;  7 using
     
      System.Windows.Input;  8 using
     
      System.Windows.Media;  9 using
     
      System.Windows.Media.Animation; 10 using
     
      System.Windows.Shapes; 11 using
     
      System.Windows.Interactivity; 12 
     
      
     
     13 namespace
     
      AsycValidation 14 
     
     { 15  public class TextBoxUpdateBehavior : Behavior<TextBox>
     
      
     
     16 
     
      { 17  public
     
      TextBoxUpdateBehavior() 18 
     
      { 19 
     
      } 20  protected override void
     
      OnAttached() 21 
     
      { 22  base
     
     .OnAttached(); 23  AssociatedObject.TextChanged +=
     
      AssociatedObjectOnTextChanged; 24 
     
      } 25  private void AssociatedObjectOnTextChanged(object
     
      sender, TextChangedEventArgs args) 26 
     
      { 27  var bindingExpr =
     
      AssociatedObject.GetBindingExpression(TextBox.TextProperty); 28 
     
      bindingExpr.UpdateSource(); 29 
     
      
     
     30 
     
      } 31  protected override void
     
      OnDetaching() 32 
     
      { 33  base
     
     .OnDetaching(); 34  AssociatedObject.TextChanged -=
     
      AssociatedObjectOnTextChanged; 35 
     
      } 36 
     
      } 37 }

    
    

 

xaml

 

Xaml code

    
    


     
     <UserControl xmlns:wm="clr-namespace:AsycValidation"
     
      <TextBox Height
     
     ="30" HorizontalAlignment="Left" Margin="120,104,0,0" x:Name="textBox2" Text="{Binding CompanyID, Mode=TwoWay, NotifyOnValidationError=True}" VerticalAlignment="Top" Width="119" >
     
       
     
     <i:Interaction.Behaviors>
     
       
     
     <wm:TextBoxUpdateBehavior/>
     
       
     
     </i:Interaction.Behaviors>
     
      
     
     </TextBox>
     
      
     
     </UserControl>

    
    

 

（运行后如何看效果：在第二个textbox输入1，输入2，输入1，看看validation）下载本CustomBehavior示例源代码

（本示例同时演示了Behavior, CustomBehavior, Validation, INotifyPropertyChanged, INotifyDataErrorInfo, MVVM, WCF Ria Service, 异步validation...）

更复杂的Custom Behavior会在后续博文中放出....