另類的Silverlight中文解法

 

另類的 Silverlight 中文解法

 

文 / 黃忠成

 

    如你所知，由於字型的關係， Silverlight 目前對於雙位元文字顯示可說是困難重重，大概可歸類出兩種解法，一種是下載字型到客戶端，一種是利用 Blend2 將文字變成圖形，下載字型目前有法律問題的隱憂，而且一個中文字型檔大小約 5MB ，仍嫌過大。在上次嘗試實作 DataBinding 功能後，心中就有一種想法，假如於 Server 端將文字轉成圖形後下載到客戶端，那麼因為不是直接下載字型，所以應無法律問題 ( 這我不確定！ ) ，也不會因下載整個字型檔而導致網頁開啟速度過慢，這樣是否就能讓前次的 Data Bindigns 例子支援中文的顯示呢？可惜前幾天因陪老婆考試，一直沒時間來實現心中的構想，這幾天終於有時間來實現這個架構了。基本上，實現這個架構有兩個問題必須先行解決，第一個問題是 Server 端如何將文字變成圖形？這不難，下列的程式便可辦到。

protected void Page_Load(object sender,EventArgs e) {         if (Request.QueryString["ID"] != null &&            Request.QueryString["ID"].Length > 0)         {           ..................         }         else if (Request.QueryString["Transform"] != null)         {             int index;             string column;             ResolveParams(Request.QueryString["Transform"], out index,out column);             if (index != -1)             {                 Employee data = GetData(index);                 MemoryStream ms = ResolveTransform(data,column);                 if (ms != null)                 {                     Response.Clear();                     Response.BufferOutput = true;                     Response.ContentType = "image/bmp";                     Response.OutputStream.Write(ms.GetBuffer(),(int)ms.Length);                     ms.dispose();                     Response.Flush();                     Response.End();                 }                 else                     Response.End();             }         }     }       private void ResolveParams(string transformParams,out int index,out string column)     {         string[] p = Request.QueryString["Transform"].Split('*');         index = -1;         column = string.Empty;         if (p.Length == 2)         {             index = int.Parse(p[0]);             column = p[1];         }            }       private MemoryStream ResolveTransform(object data,string column)     {                PropertyInfo pi = data.GetType().GetProperty(column);         if (pi != null)             return GetDBCSJpestream(pi.GetValue(data,null).ToString(), new Font("PMingLiU",11,FontStyle.Bold),Color.Black,Color.White,280,24);         return null;     }       private MemoryStream GetDBCSJpestream(string str,Font font,Color foreColor, Color background,int width,int height)     {         Bitmap bmp = new Bitmap(width,height);                Graphics g = Graphics.FromImage(bmp);         Brush bFore = new SolidBrush(foreColor);         Brush bBack = new SolidBrush(background);         g.Clear(Color.Transparent);         g.DrawString(str,font,bFore,2,2);         bFore.dispose();         bBack.dispose();         MemoryStream ms = new MemoryStream();         bmp.Save(ms,System.Drawing.Imaging.ImageFormat.Png);         bmp.dispose();         ms.Position = 0;         return ms;     }

如果你仔細看上面的程式，會發覺其中有字體預設的問題，若要以此觀念實作一個完整的架構，關於字型的資訊應於 XAML 中指定才好，不過目前我只是展示這個想法的可行性，就先放著這部份不理了。第二個要解決的問題是如何於 XAML 中指定 Data Bindings 資訊，這點不難，依據前版以 TAG 來指定 Binding Expression 的概念，只需加油添醋一番，即可套用。

< Canvas xmlns = "http://schemas.microsoft.com/client/2007" ................... < Image Name = "imgLastName"Tag="BindingField:LastName;BindingProperty:Source;Format:Default.aspx?Transform={INDEX}*{BindingField}"Width="300"Height="24"Canvas.Left="500"Canvas.Top="23" /> Canvas>

請注意，由於採圖形方式的緣故，這裡已不再使用 TextBlock ，而是使用 Image 控制項來顯示， SLDH.js 也需稍做修改。

///////////////////////////////////////////////////////////////////////// // Silverlight Data Binding Helper 0.1 /////////////////////////////////////////////////////////////////////////   if (!window.SilverlightBinding)            window.SilverlightBinding = {};   SilverlightBinding.BindingData = function(ctrl,bindingExpression,context) {    var bindings = bindingExpression.split(';');    this.bindingComplete = false;    this.ctrl = ctrl;    this.context = context;    for(var i = 0; i < bindings.length; i++)    {       var temp = bindings[i].split(':');       if(temp.length != 2)       {          this.bindingComplete = false;          return;       }       if(temp[0] == 'BindingField')          this.bindingField = temp[1];       else if(temp[0] == 'BindingProperty')          this.bindingProperty = temp[1];       else if(temp[0] == 'Format')          this.format = temp[1];      }    this.bindingComplete = true; }   SilverlightBinding.BindingData.prototype = {    updateValue : function(dataItem)    {       if(this.bindingComplete)       {         if(this.format)         {            var str = eval("this.format.replace('{0}',dataItem."+this.bindingField+');');                                            if(this.format.indexOf("INDEX") != -1)               str = str.replace("{INDEX}",this.context.currentDataIndex);            if(this.format.indexOf("BindingField") != -1)               str = str.replace("{BindingField}",this.bindingField);            eval('this.ctrl.'+this.bindingProperty+" = str;");         }         else            eval('this.ctrl.'+this.bindingProperty+' = dataItem.'+this.bindingField+';');       }    } }   SilverlightBinding.BindingContext = function(bindingContainer) {    var parseBindings = bindingContainer.tag.split(';');    this.bindingComplete = false;    this.bindingContainer = bindingContainer;    this.bindingControls = new Array();    this.currentDataIndex = 0;    this.recordCount = 0;    for(var i = 0; i < parseBindings.length; i++)    {      var parseBinding = parseBindings[i].split(':');      if(parseBinding[0] == "BindingContext")      {         var bindingMethods = parseBinding[1].split(',');         if(bindingMethods.length == 2)         {            this.bindingMethod = bindingMethods[0];            this.bindingCountMethod = bindingMethods[1];            this.bindingComplete = true;         }      }         }    if(!this.bindingComplete) alert('ERROR,Binding Failed.'); }     SilverlightBinding.BindingContext.prototype = {    _childWorker : function(parent,parseParent)    {      if(parent.tag && parent.tag != '')      {         if(parseParent)         {           var bindingData = new SilverlightBinding.BindingData(parent,parent.tag,this);           if(bindingData.bindingComplete)           {              this.bindingControls.length++;              this.bindingControls[this.bindingControls.length-1] = bindingData;           }           else             delete bindingData;         }         try         {            var temp = parent.children;         }         catch(err)         {            return;         }         for(var i = 0; i < parent.children.count; i++)             this._childWorker(parent.children.getItem(i),true);      }      },    initialize:function()    {      this._childWorker(this.bindingContainer,false);       this._receiveCount();        this._receiveData(0);                  },    OnSucceeded: function(result,userContext,methodName)     {        if (methodName == userContext.bindingMethod)        {                         for(var i = 0; i < userContext.bindingControls.length; i++)                userContext.bindingControls[i].updateValue(result);        }        else if(methodName == userContext.bindingCountMethod)            userContext.recordCount = result;     },              OnFailed:function(error,methodName)     {        if(error !== null)        {           alert(error.get_message());        }     },     _receiveData: function(index)     {         eval('PageMethods.'+this.bindingMethod+'(index,this.OnSucceeded,this.OnFailed,this);');     },     _receiveCount: function()     {         eval('PageMethods.'+this.bindingCountMethod+'(this.OnSucceeded,     next:function()     {         if(this.currentDataIndex+1 >= this.recordCount)            return;         this._receiveData(++this.currentDataIndex);     },     prev:function()     {         if(this.currentDataIndex -1 < 0)            return;         this._receiveData(--this.currentDataIndex);     } }

下圖為執行例。

 

後記

 

  這種方式僅是一個應急的解法，畢竟傳輸圖形也是需要時間的，自然不比直接使用位於客戶端的字型來的有效率。

 

示例下載：

http://www.dreams.idv.tw/~code6421/files/SLDataDemo2.zip