最近比較關(guān)注MVVM（Model-View_ViewModel）模式，該模式十分適合WPF/Silverlight的開發(fā)。出于練習(xí)的目的打算使用Silverlight做個(gè)英漢詞典（可能是由于近來瘋狂的聽VOA的緣故），下面針對該項(xiàng)目進(jìn)行簡單的分析。
注：由于Silverlight不支持Command 所以并無法像WPF那樣完全實(shí)現(xiàn)MVVM模式。

老規(guī)矩，先看下運(yùn)行時(shí)的截圖

這里說下我的開發(fā)環(huán)境

windows server 2008
visual studio 2008 with sp1
sliverlight 2

下面開始一步一步的制作該應(yīng)用。

首先新建一個(gè)Silverlight項(xiàng)目并宿主在ASP.NET Web Application中（當(dāng)然我強(qiáng)烈建議宿主在ASP.NET MVC中，不過該項(xiàng)目基本上和宿主端沒什么聯(lián)系而并不是每個(gè)人都安裝了ASP.NET MVC，所以宿主在可以使用Silverlight控件的Web Form中也許受眾面更廣泛一些）

在Silverlight的項(xiàng)目中分別新建三個(gè)文件夾Model、View、ViewModel并添加相應(yīng)的文件，最終的解決方案視圖如下

Model/DictModel.cs以及Model/SentModel.cs為純粹的業(yè)務(wù)模型，所有的屬性都必須實(shí)現(xiàn)IPropertyChanged接口以便在其值更改時(shí)可以同時(shí)更新UI。這兩個(gè)類同時(shí)繼承PropertyChangedBase，該基類很簡單，請見我的另外一篇文章：讓INotifyPropertyChanged的實(shí)現(xiàn)更優(yōu)雅一些

這兩個(gè)類的代碼如下

DictModel.cs

using System;namespace EternalDict.Model {public class DictModel : PropertyChangedBase{string _key;public string Key{get{return _key;}set{_key = value;this.NotifyPropertyChanged(p => p.Key);}}string _lang;public string Lang{get{return _lang;}set{_lang = value;this.NotifyPropertyChanged(p => p.Lang);}}string _audio;public string Audio{get{return _audio;}set{_audio = value;this.NotifyPropertyChanged(p => p.Audio);}}string _pron;public string Pron{get{return _pron == null ? string.Empty : string.Format("[{0}]", _pron);}set{_pron = value;this.NotifyPropertyChanged(p => p.Pron);}}string _def;public string Def{get{return _def;}set{_def = value;this.NotifyPropertyChanged(p => p.Def);}}System.Collections.ObjectModel.ObservableCollection<SentModel> _sentCollection;public System.Collections.ObjectModel.ObservableCollection<SentModel> SentCollection{get{return _sentCollection;}set{_sentCollection = value;this.NotifyPropertyChanged(p => p.SentCollection);}}} }

SentModel.cs

using System;namespace EternalDict.Model {public class SentModel : PropertyChangedBase{string _orig;public string Orig{get{return _orig;}set{_orig = value;this.NotifyPropertyChanged(p => p.Orig);}}string _trans;public string Trans{get{return _trans;}set{_trans = value;this.NotifyPropertyChanged(p => p.Trans);}}} }

ViewModel/DictViewModel.cs則用來為View/DictView.xmal提供數(shù)據(jù)

這里我使用海詞http://dict.cn/提供的API，通過Linq to XML進(jìn)行解析。不過有個(gè)問題，海詞的API可以提供GBK和UTF8這兩種編碼的服務(wù)，不過當(dāng)前UTF8并不提供漢英翻譯的功能，而silverlight并不支持GBK的編碼轉(zhuǎn)換，所以也只能實(shí)現(xiàn)英漢查找。也許某天你會發(fā)現(xiàn)漢英查找可用了，那么八成是海詞官方升級了API。

該類的代碼如下

using System; using System.Net; using System.Xml.Linq; using System.Linq; using System.Text; using EternalDict.Model;namespace EternalDict.ViewModel {public class DictViewModel{string _wordToQuery;public DictModel Dm { get { return _dm; } set { _dm = value; } }private DictModel _dm;public DictViewModel(){_dm = new DictModel();}public void QueryWord(string wordToQuery){this._wordToQuery = wordToQuery;string apiUrlString = string.Format("http://api.dict.cn/ws.php?utf8=true&q={0}", this._wordToQuery);Uri endPoint = new Uri(apiUrlString);WebClient client = new WebClient();client.DownloadStringAsync(endPoint);client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);}void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e){if (e.Error == null){this.ParseXml(e.Result);}}void ParseXml(string stringToParse){/*Silverlight不支持其他編碼 囧Encoding gbk = Encoding.GetEncoding("GBK");Encoding utf8 = Encoding.UTF8;byte[] gbkBytes = gbk.GetBytes(stringToParse);byte[] utf8Bytes = Encoding.Convert(gbk, utf8, gbkBytes);char[] utf8Chars = new char[utf8.GetCharCount(utf8Bytes, 0, utf8Bytes.Length)];utf8.GetChars(utf8Bytes, 0, utf8Bytes.Length, utf8Chars, 0);stringToParse = new string(utf8Chars);*/XDocument xDoc = XDocument.Parse(stringToParse);var nodeDict = xDoc.Root;var audio = nodeDict.Elements().Where(p => p.Name == "audio").SingleOrDefault();var lang = nodeDict.Elements().Where(p => p.Name == "lang").SingleOrDefault();var pron = nodeDict.Elements().Where(p => p.Name == "pron").SingleOrDefault();var def = nodeDict.Element("def").Value;_dm.Audio = audio == null ? string.Empty : audio.Value;_dm.Def = def.Equals("Not Found") ? "未找到該單詞的釋義" : def;_dm.Key = this._wordToQuery;_dm.Lang = lang == null ? string.Empty : lang.Value;_dm.Pron = pron == null ? "無" : pron.Value;var eleSents = nodeDict.Elements().Where(p => p.Name == "sent");if (eleSents != null){_dm.SentCollection = new System.Collections.ObjectModel.ObservableCollection<SentModel>();foreach (var item in eleSents){SentModel sm = new SentModel();sm.Orig = item.Element("orig").Value;sm.Trans = item.Element("trans").Value;_dm.SentCollection.Add(sm);}}}} }

這里公開了DictModel這個(gè)屬性，用于為View提供數(shù)據(jù)。在View中完全通過數(shù)據(jù)綁定與其通訊。現(xiàn)在看下DictView.cs中最重要的幾行代碼

DictViewModel dvm = new DictViewModel();public DictView(){InitializeComponent();Loaded += new RoutedEventHandler(Dict_Loaded); }void Dict_Loaded(object sender, RoutedEventArgs e){this.DataContext = dvm;}

在View加載后便將ViewModel本身作為其DataContext。當(dāng)點(diǎn)擊查詢按鈕的時(shí)候便調(diào)用DictViewModel的QueryWord方法。

private void btnLookUp_Click(object sender, RoutedEventArgs e){dvm.QueryWord(txtWord.Text.Trim());}

剩下的就是在DictView.xaml中進(jìn)行UI的設(shè)計(jì)了，代碼比較多就不貼了。比較關(guān)鍵的是

<StackPanel DataContext="{Binding Dm}" Orientation="Vertical" >

這里將BM綁定到該StackPanel的DataContext上，其可視化樹上的所有子孫元素便都可以通過Binding與Model進(jìn)行關(guān)聯(lián)了。

源碼下載：點(diǎn)此下載
在線體驗(yàn)：http://024hi.com/lab/ria/dict.html

轉(zhuǎn)載于:https://www.cnblogs.com/024hi/archive/2009/06/14/1503169.html

總結(jié)

以上是生活随笔為你收集整理的[Silverlight]使用MVVM模式打造英汉词典的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。