silverlight   发布时间:2022-05-04  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Silverlight 的 DataBindings大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_618_2@

概述

  Silverlight 的Data Bindings :Silverlight 與 ASP.NET Ajax     文/黃忠成  不可否認,對於網頁美工人員或是動畫設計師而言,Silverlight提供了Flash以外的一個畫布,令她們可盡情揮灑創意!但對於設計師而言,Silverlight如何結合資料庫來呈現資料則是更具吸引力的課題,很明顯的!Silverlight 1.0 RC與Silv
@H_618_2@
@H_618_2@ @H_618_2@
@H_618_2@
 
Silverlight Data Bindings Silverlight ASP.NET Ajax @H_618_2@
  @H_618_2@
  @H_618_2@
文/黃忠成 @H_618_2@
@H_618_2@
 不可否認,對於網頁美工人員或是動畫設計師而言,Silverlight提供了Flash以外的一個畫布,令她們可盡情揮灑創意!但對於設計師而言,Silverlight如何結合資料庫來呈現資料則是更具吸引力的課題,很明顯的!Silverlight 1.0 RC與Silverlight 1.1並不支援Data Binding機制,而且目前對於@L_675_0@顯示仍存在著問題(下載字型不算是個解法,因為有法律問題),不過如果這個問題獲得解決,Silverlight結合資料庫後所呈現的效果,相信會給客戶完全不同的網頁操作感受,當然!前提得要Silverlight支援Data Bindings,否則一切都是紙上談兵罷了。要令Silverlight支援Data Bindings說來也不難,只要處理幾個關鍵問題即可。一、資料提供者為何?ASP.NET Ajax的PageMethods/Web service可以勝任此工作,如下列程式片段所示。 @H_618_2@
private static DataTable BuildDataCache() @H_618_2@
    { @H_618_2@
        if (httpRuntime.Cache["DataCache_employees"] != null) @H_618_2@
            return httpRuntime.Cache["DataCache_employees"] as DataTable; @H_618_2@
        else @H_618_2@
        { @H_618_2@
            using (sqlConnection conn = new sqlConnection(ConfigurationManager.ConnectionStrings[ @H_618_2@
"NorthwindConnectionString" ].ConnectionString)) @H_618_2@
            { @H_618_2@
                sqlDataAdapter adapter = new sqlDataAdapter( @H_618_2@
"SELECT * FROM employees ORDER BY employeEID" ,conn); @H_618_2@
                DataTable table = new DataTable("employees"); @H_618_2@
                adapter.Fill(tablE); @H_618_2@
                httpRuntime.Cache["DataCache_employees"] = table; @H_618_2@
                return table; @H_618_2@
            } @H_618_2@
        } @H_618_2@
    } @H_618_2@
  @H_618_2@
    [WebMethod] @H_618_2@
    public static employee GetData(int indeX) @H_618_2@
    { @H_618_2@
        DataTable table = BuildDataCache(); @H_618_2@
        return new employee(table.DefaultView[index]); @H_618_2@
    } @H_618_2@
  @H_618_2@
    [WebMethod] @H_618_2@
    public static int GetCount() @H_618_2@
    { @H_618_2@
        DataTable table = BuildDataCache(); @H_618_2@
        return table.DefaultView.Count; @H_618_2@
    } @H_618_2@
  @H_618_2@
    protected void Button1_Click(object sender,EventArgs E) @H_618_2@
    { @H_618_2@
    } @H_618_2@
} @H_618_2@
  @H_618_2@
[serializable] @H_618_2@
public class employee @H_618_2@
{ @H_618_2@
    [Nonserialized] @H_618_2@
    private Da@R_73_2301@wView _rv = null; @H_618_2@
  @H_618_2@
    public String employeEID @H_618_2@
    { @H_618_2@
        get @H_618_2@
        { @H_618_2@
            return (_rv.Row.IsNull("employeEID") ? String.Empty : _rv["employeEID"].ToString()); @H_618_2@
        } @H_618_2@
    } @H_618_2@
  @H_618_2@
    public String LastName @H_618_2@
    { @H_618_2@
        get @H_618_2@
        { @H_618_2@
            return (_rv.Row.IsNull("LastName") ? String.Empty : (String)_rv["LastName"]); @H_618_2@
        } @H_618_2@
    } @H_618_2@
  @H_618_2@
    public String FirstName @H_618_2@
    { @H_618_2@
        get @H_618_2@
        { @H_618_2@
            return (_rv.Row.IsNull("FirstName") ? String.Empty : (String)_rv["FirstName"]); @H_618_2@
        } @H_618_2@
    } @H_618_2@
  @H_618_2@
    public String title @H_618_2@
    { @H_618_2@
        get @H_618_2@
        { @H_618_2@
            return (_rv.Row.IsNull("title") ? String.Empty : (String)_rv["title"]); @H_618_2@
        } @H_618_2@
    } @H_618_2@
  @H_618_2@
    public String hiredate @H_618_2@
    { @H_618_2@
        get @H_618_2@
        { @H_618_2@
            return (_rv.Row.IsNull("hiredate") ? @H_618_2@
String .Empty : ((datetiR_799_11845@e)_rv["hiredate"]).ToShortDateString()); @H_618_2@
        } @H_618_2@
    } @H_618_2@
  @H_618_2@
    public employee(Da@R_73_2301@wView rv) @H_618_2@
    { @H_618_2@
        _rv = rv; @H_618_2@
    } @H_618_2@
} @H_618_2@
運用ASP.NET Ajax及JSON,我們可以輕易的用JavaScript來取得資料庫的資料,接著只要將資料設定給指定Silverlight控制項即可,這個工作可以簡單化也可以複雜化,簡單的作法是直接在JavaScript以findName來取得控制項,然後一一設定其屬性值。 @H_618_2@
handleLoad: function(plugIn,userContext,rootElement) @H_618_2@
{ @H_618_2@
           this.plugIn = plugIn; @H_618_2@
           this.dataContext = rootElement.children.getItem(0); @H_618_2@
           PageMethods.GetCount(this.OnSucceeded,this.OnFailed,this); @H_618_2@
           this.receiveData(this.currentDataIndeX); @H_618_2@
}, @H_618_2@
OnSucceeded: function(result,methodName) @H_618_2@
{ @H_618_2@
      if (methodName == "GetData") @H_618_2@
      { @H_618_2@
          userContext.displayData(result); @H_618_2@
      } @H_618_2@
      else if(methodName == "GetCount") @H_618_2@
          userContext.recordCount = result; @H_618_2@
},          @H_618_2@
OnFailed:function(error,methodName) @H_618_2@
{ @H_618_2@
       if(error !== null) @H_618_2@
       { @H_618_2@
          alert(error.get_message()); @H_618_2@
       } @H_618_2@
}, @H_618_2@
displayData: function(data) @H_618_2@
{ @H_618_2@
      var idCtrl = this.dataContext.findName('txtemployeEID'); @H_618_2@
       var firstNameCtrl = this.dataContext.findName('txtLastName'); @H_618_2@
       var lastNameCtrl = this.dataContext.findName('txtFirstName'); @H_618_2@
       var titleCtrl = this.dataContext.findName('txttitle'); @H_618_2@
       var hiredateCtrl = this.dataContext.findName('txthiredate'); @H_618_2@
       var imgCtrl = this.dataContext.findName("imgPhoto"); @H_618_2@
       idCtrl.text = data.employeEID; @H_618_2@
       firstNameCtrl.text = data.FirstName; @H_618_2@
       lastNameCtrl.text = data.lastName; @H_618_2@
       titleCtrl.text = data.title; @H_618_2@
       hiredateCtrl.text = data.hiredate; @H_618_2@
       imgCtrl.source = "Default.aspx?ID="+idCtrl.text; @H_618_2@
       this.dataContext.findName("imgAnimation").begin(); @H_618_2@
} @H_618_2@
這種做法的缺點是設計師得用 JavaScript 寫下許多程式碼。另一種做法是利用 Silverlight 控制項的 Tag 屬性,指定 Binding Expression ,然後於 JavaScript 中巡覽她們來一一指定值,如下列片段所示。 @H_618_2@
< Canvas xmlns = "http://scheR_799_11845@as.microsoft.com/client/2007" @H_618_2@
           xmlns:x = "http://scheR_799_11845@as.microsoft.com/winfx/2006/xaml"> @H_618_2@
     < Canvas Name = "DataDemo"Height="600"Width="800"Tag="BindingContext:GetData,GetCount"> @H_618_2@
           < Canvas.BACkground > @H_618_2@
                < LinearGradientBrush > @H_618_2@
                     < GradientStop Color = "Yellow"Offset="0.0" /> @H_618_2@
                     < GradientStop Color = "Orange"Offset="0.5" /> @H_618_2@
                     < GradientStop Color = "Red"Offset="1.0" /> @H_618_2@
                LinearGradientBrush> @H_618_2@
           Canvas.BACkground> @H_618_2@
           < TextBlock Tag = "BindingField:employeEID;BindingProperty:Text" Name = "txtemployeEID"Width="144"Height="24"Canvas.Left="166"Canvas.Top="23"Text="A00001"textwrapping="Wrap"/> @H_618_2@
           < TextBlock Tag = "BindingField:LastName;BindingProperty:Text"Name="txtLastName"Width="320"Height="24"Canvas.Left="500"Canvas.Top="23"Text="Alean Company"textwrapping="Wrap"/> @H_618_2@
           < TextBlock Tag = "BindingField:FirstName;BindingProperty:Text"Name="txtFirstName"Width="320"Height="24"Canvas.Left="166"Canvas.Top="72"Text="jeffray"textwrapping="Wrap"/> @H_618_2@
           < TextBlock Tag = "BindingField@R_234_6964@;BindingProperty:Text"Name="txttitle"Width="576"Height="24"Canvas.Left="166"Canvas.Top="122"Text="Taipen 101"textwrapping="Wrap"/> @H_618_2@
           < TextBlock Tag = "BindingField:hiredate;BindingProperty:Text"Name="txthiredate"Width="576"Height="24"Canvas.Left="166"Canvas.Top="171"Text="2005/3/4"textwrapping="Wrap"/> @H_618_2@
           < Image Name = "imgPhoto" Tag="BindingField:employeEID;BindingProperty:@R_489_9016@e;Format:Default.aspx?ID={0}"Width="357"Height="206"Canvas.Left="400"Canvas.Top="301"> @H_618_2@
                < Image.triggers > @H_618_2@
                     < Eventtrigger RoutedEvent = "Image.Loaded"> @H_618_2@
                           < BeginStoryboard > @H_618_2@
                                < Storyboard Name = "imgAnimation"> @H_618_2@
                                     < DoubleAnimation @H_618_2@
                                       Storyboard.TargetName = "imgPhoto" @H_618_2@
                                       Storyboard.TargetProperty = "Opacity" @H_618_2@
                                       From = "0.0"To="1.0"Duration="0:0:6"/> @H_618_2@
                                Storyboard> @H_618_2@
                           BeginStoryboard> @H_618_2@
                     Eventtrigger> @H_618_2@
                Image.triggers> @H_618_2@
           Image> @H_618_2@
           < TextBlock Name = "txtLabel1"Width="114"Height="24"Canvas.Left="18"Canvas.Top="23"Text="employee ID:"textwrapping="Wrap"/> @H_618_2@
           < TextBlock Name = "txtLabel1_Copy"Width="120"Height="24"Canvas.Left="349"Canvas.Top="23"Text="last name:"textwrapping="Wrap"/> @H_618_2@
           < TextBlock Name = "txtLabel1_Copy1"Width="130"Height="24"Canvas.Left="18"Canvas.Top="72"Text="First Name:"textwrapping="Wrap"/> @H_618_2@
           < TextBlock Name = "txtLabel1_Copy2"Width="104"Height="24"Canvas.Left="18"Canvas.Top="122"Text="title :"textwrapping="Wrap"/> @H_618_2@
           < TextBlock Name = "txtLabel1_Copy3"Width="93"Height="24"Canvas.Left="18"Canvas.Top="171"Text="Hire Date:"textwrapping="Wrap"/> @H_618_2@
     Canvas> @H_618_2@
Canvas> @H_618_2@
那如何解析 Tag Binding Expression 並指定值呢?答案是利用 Silverlight JavaScript 支援,一一巡覽所有控制項,一一解析 Tag ,然後再指定值。 @H_618_2@
///////////////////////////////////////////////////////////////////////// @H_618_2@
// Silverlight Data Binding Helper 0.1 @H_618_2@
///////////////////////////////////////////////////////////////////////// @H_618_2@
  @H_618_2@
if (!window.SilverlightBinding) @H_618_2@
     window.SilverlightBinding = {}; @H_618_2@
  @H_618_2@
SilverlightBinding.bindingData = function(ctrl,bindingExpression) @H_618_2@
{ @H_618_2@
   var bindings = bindingExpression.split(';'); @H_618_2@
   this.bindingComplete = false; @H_618_2@
   this.ctrl = ctrl; @H_618_2@
   for(var i = 0; i < bindings.length; i++) @H_618_2@
   { @H_618_2@
      var temp = bindings[i].split(':'); @H_618_2@
      if(temp.length != 2) @H_618_2@
      { @H_618_2@
         this.bindingComplete = false; @H_618_2@
         return; @H_618_2@
      } @H_618_2@
      if(temp[0] == 'BindingField') @H_618_2@
         this.bindingField = temp[1]; @H_618_2@
      else if(temp[0] == 'BindingProperty') @H_618_2@
         this.bindingProperty = temp[1]; @H_618_2@
      else if(temp[0] == 'Format') @H_618_2@
         this.format = temp[1];   @H_618_2@
   } @H_618_2@
   this.bindingComplete = true; @H_618_2@
} @H_618_2@
  @H_618_2@
SilverlightBinding.bindingData.prototype = @H_618_2@
{ @H_618_2@
   updateValue : function(dataItem) @H_618_2@
   { @H_618_2@
      if(this.bindingCompletE) @H_618_2@
      { @H_618_2@
        if(this.format) @H_618_2@
           eval('this.ctrl.'+this.bindingProperty+ @H_618_2@ @H_301_1980@ " = this.format.replace('{0}',dataItem." +this.bindingField+');'); @H_618_2@
        else @H_618_2@
           eval('this.ctrl.'+this.bindingProperty+' = dataItem.'+this.bindingField+';'); @H_618_2@
      } @H_618_2@
   } @H_618_2@
} @H_618_2@
  @H_618_2@
SilverlightBinding.bindingContext = function(bindingContainer) @H_618_2@
{ @H_618_2@
   var parseBinding = bindingContainer.tag.split(':'); @H_618_2@
   this.bindingComplete = false; @H_618_2@
   this.bindingContainer = bindingContainer; @H_618_2@
   this.bindingControls = new Array(); @H_618_2@
   this.currentDataIndex = 0; @H_618_2@
   this.recordCount = 0; @H_618_2@
   if(parseBinding.length == 2 && parseBinding[0] == "BindingContext") @H_618_2@
   { @H_618_2@
      var bindingMethods = parseBinding[1].split(','); @H_618_2@
      if(bindingMethods.length == 2) @H_618_2@
      { @H_618_2@
         this.bindingMethod = bindingMethods[0]; @H_618_2@
         this.bindingCountMethod = bindingMethods[1]; @H_618_2@
         this.bindingComplete = true; @H_618_2@
      } @H_618_2@
   } @H_618_2@
   if(!this.bindingCompletE) alert('ERROR,Binding Failed.'); @H_618_2@
} @H_618_2@
  @H_618_2@
SilverlightBinding.bindingContext.prototype = @H_618_2@
{ @H_618_2@
   _childWorker : function(parent,parseParent) @H_618_2@
   { @H_618_2@
     if(parent.tag && parent.tag != '') @H_618_2@
     { @H_618_2@
        if(parseParent) @H_618_2@
        { @H_618_2@
          var bindingData = new SilverlightBinding.bindingData(parent,parent.tag); @H_618_2@
          if(bindingData.bindingCompletE) @H_618_2@
          { @H_618_2@
             this.bindingControls.length++; @H_618_2@
             this.bindingControls[this.bindingControls.length-1] = bindingData; @H_618_2@
          } @H_618_2@
          else @H_618_2@
            delete bindingData; @H_618_2@
        } @H_618_2@
        try @H_618_2@
        { @H_618_2@
           var temp = parent.children; @H_618_2@
        } @H_618_2@
        catch(err) @H_618_2@
        { @H_618_2@
           return; @H_618_2@
        } @H_618_2@
        for(var i = 0; i < parent.children.count; i++) @H_618_2@
            this._childWorker(parent.children.getItem(i),true); @H_618_2@
     }   @H_618_2@
   }, @H_618_2@
   initialize:function() @H_618_2@
   { @H_618_2@
     this._childWorker(this.bindingContainer,false);  @H_618_2@
     this._receiveCount();   @H_618_2@
     this._receiveData(0);               @H_618_2@
   }, @H_618_2@
   OnSucceeded: function(result,methodName) @H_618_2@
    { @H_618_2@
       if (methodName == userContext.bindingMethod) @H_618_2@
       {              @H_618_2@
           for(var i = 0; i < userContext.bindingControls.length; i++) @H_618_2@
               userContext.bindingControls[i].updateValue(result); @H_618_2@
       } @H_618_2@
       else if(methodName == userContext.bindingCountMethod) @H_618_2@
           userContext.recordCount = result; @H_618_2@
    },          @H_618_2@
    OnFailed:function(error,methodName) @H_618_2@
    { @H_618_2@
       if(error !== null) @H_618_2@
       { @H_618_2@
          alert(error.get_message()); @H_618_2@
       } @H_618_2@
    }, @H_618_2@
    _receiveData: function(indeX) @H_618_2@
    { @H_618_2@
        eval('PageMethods.'+this.bindingMethod+ @H_618_2@
'(index,this.OnSucceeded,this);' ); @H_618_2@
    }, @H_618_2@
    _receiveCount: function() @H_618_2@
    { @H_618_2@
        eval('PageMethods.'+this.bindingCountMethod+ @H_618_2@
'(this.OnSucceeded, @H_618_2@
    next:function() @H_618_2@
    { @H_618_2@
        if(this.currentDataIndex+1 >= this.recordCount) @H_618_2@
           return; @H_618_2@
        this._receiveData(++this.currentDataIndeX); @H_618_2@
    }, @H_618_2@
    prev:function() @H_618_2@
    { @H_618_2@
        if(this.currentDataIndex -1 < 0) @H_618_2@
           return; @H_618_2@
        this._receiveData(--this.currentDataIndeX); @H_618_2@
    } @H_618_2@
} @H_618_2@
使用此 JavaScript 物件的方法很簡單,只要於 handleLoad 中建立此物件,然後將 Silverlight 的根控制項傳入即可。 @H_618_2@
handleLoad: function(plugIn,rootElement) @H_618_2@
{ @H_618_2@
           this.plugIn = plugIn; @H_618_2@
           this.dataContext = rootElement.children.getItem(0); @H_618_2@
           this.bindingContext = @H_618_2@
new SilverlightBinding.bindingContext(rootElement.children.getItem(0)); @H_618_2@
           this.bindingContext.initialize(); @H_618_2@
} @H_618_2@
切換上下筆時也很簡單。 @H_618_2@
function Next() @H_618_2@
{ @H_618_2@
   window.Silverlight.current_DataContext.bindingContext.next(); @H_618_2@
   window.Silverlight.current_DataContext.dataContext.findName("imgAnimation").begin(); @H_618_2@
} @H_618_2@
  @H_618_2@
function Prev() @H_618_2@
{ @H_618_2@
   window.Silverlight.current_DataContext.bindingContext.prev(); @H_618_2@
   window.Silverlight.current_DataContext.dataContext.findName("imgAnimation").begin(); @H_618_2@
} @H_618_2@
下圖為執行畫面。 @H_618_2@

Silverlight 的 DataBindings

@H_618_2@
看不到炫麗效果啊?哈 ~~~ 我承認,我的美工細胞粉差! @H_618_2@
  @H_618_2@
本例下載位址: @H_618_2@
http://www.dreams.idv.tw/~code6421/files/SLDataDemo1.zip @H_618_2@  @H_618_2@ @H_618_2@
@H_618_2@
@H_618_2@@H_618_2@

大佬总结

以上是大佬教程为你收集整理的Silverlight 的 DataBindings全部内容,希望文章能够帮你解决Silverlight 的 DataBindings所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。