在前面的筆記中講過了在silverlight中作爲UI層只負責界面的展示,而與ViewModel的聯繫是通過綁定方式,其綁定可以是數據的綁定也可以是事件的綁定。那麼我們需要了解下究竟在UI中綁定的實現。
一、綁定語法
綁定可以在設計時綁定也可以在後臺綁定,通常我們在設計時進行綁定,數據綁定語法是: 屬性=“{Binding 類屬性,Mode=綁定方式}”,如下:
<TextBox name="txUserid" Height="21" TextWrapping="Wrap" DataContext="{Binding Source={StaticResource UserDataSource}}" Text="{Binding UserInfo.UserID, Mode=OneWay}"/>
當然在silverlight中除了與實體類的屬性綁定外還支持元素間屬性的綁定,即一個控件的屬性綁定另一個控件的屬性如:<TextBlock Text="{Binding Text.Length, ElementName=txUserid}" />
二、綁定方式
在Silverlight ,支持OneTime、OneWay、TwoWay三種形式的數據綁定。
簡單的說:OneTime模式下:控件與數據綁定後,能自動顯示數據,一旦顯示完成後,這二者就沒有任何關聯了。(即自動解除綁定)
OneWay模式下:控件與數據綁定後,除自動顯示數據外,顯示完成後,控件與數據源仍有單向關聯,即如果數據源以後發生了變化,控件上的值也會自動變化.
TwoWay模式下:控件與數據源的關聯是雙向的,即數據源的變化會影響控件上的值,反過來控件上的任何值變化也會影響數據源本身發生變化。
實際開發中,我們的數據源通常不會是某一個現成控件的屬性,多半是xml/數據庫等對應的實體類,這裏要注意的是,如果控件與自定義類綁定,自定義類必須實現INotifyPropertyChanged接口
在MVVM模式中由於View從ViewModel中提取數據所以ViewModel類必須從INotifyPropertyChanged接口繼承而來,通常ViewModel中會定義一個或多個Model類的實體公佈給View,所以Model類也將從INotifyPropertyChanged接口繼承。這樣才能保障數據源的變化與UI控件上值的變化進行及時更新。
需要提醒的是在silverlight中的UI的更新是在控件失去焦點後發生的。
三、事件綁定
在silverlight中除了能將UI控件中的屬性進行數據綁定外,還可以將UI控件中的事件進行綁定。在MVVM模式中,ViewModel將會向View暴露所有Vew要用到的事件屬性,而這些事件屬性都將繼承ICommand接口。其實現方式如下:
1、在Viewmodel中公佈事件屬性
public ICommand UpdateDataCommand
{
get;
set;
}
public ICommand LoadDataCommand
{
get {
return new Common.DelegateCommand(LoadData);
}
}
2、事件初始化:事件初始化往往是在ViewModel構造函數中定義
public User()
{
this.UpdateDataCommand = new Common.DelegateCommand(UpdateData);
}
此處的Common.DelegateCommand類是實現了ICommand接口的類3、定義事件處理函數
public void LoadData(object param)
{
this.UserInfo = Model.User.LoadData();
}
此處的事件處理方法中的參數類型爲object類型,即可以接入所有類型的事件參數,在實際應用中我們往往需要傳遞某個類的實例作爲事件處理函數的參數
4、在UI中定義事件綁定
<Button x:Name="button" Content="加載數據" HorizontalAlignment="Left" Margin="97,166,0,112" Width="83" Command="{Binding LoadDataCommand, Mode=OneWay}" DataContext="{Binding Source={StaticResource UserDataSource}}"/>
如上,可以將Button的command事件綁定到ViewModel中公佈的事件屬性LoadCommand上,另外一種事件綁定方式是利用行爲模式進行綁定如下代碼,其實現與上面一致。
<Button x:Name="button" Content="加載數據" HorizontalAlignment="Left" Margin="97,166,0,112" Width="83">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding LoadDataCommand, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
以上介紹了silverlight中基本的數據綁定方式,由此可以看出在silverlight中綁定是如此靈活和強大,這也爲MVVM模式將UI設計與後臺邏輯分離的實現變得更爲簡單了,如果一個好的MVVM應用模式將會在View中不用寫一行後置代碼就能實現所有應有的功能。下面精彩還將繼續!