Silverlight 將支持開發(fā)人員在創(chuàng)建豐富的web應(yīng)用程序，我們即將看到web應(yīng)用的一個在視覺是很有吸引力的浪潮的到來，網(wǎng)頁將能夠利用靈活的媒體播放，動畫和矢量圖形繪制。這將有利于擴展web應(yīng)用。本文描述的是一個股票跑馬燈的例子。

本例選擇一個代碼為3209的應(yīng)用股票作為樣本，它可以嵌入到現(xiàn)有的代碼，并且提供一個比"html<marquee>"標簽更好查看的ticker。為了能夠讓用戶得到最多的價值，需要有效地通過互聯(lián)網(wǎng)從服務(wù)器獲得信息進行交易。 將討論通過整合silverlight和asp.net AjAx來創(chuàng)造一個豐富的b/s應(yīng)用。同樣通過其他途徑也能創(chuàng)造出類似的視覺效果，主要焦點是如何整合這兩項技術(shù)。通過ajax不斷獲取新的股票信息拋給silverlight來展現(xiàn)。這個解決方案的關(guān)鍵點如下：

1，采用XAML和Silverlight

2.采用Asp.net AJAX實現(xiàn)無刷新顯示。

客戶端安裝：

Silverlight 1.1Alpha,和任意瀏覽器

開發(fā)和服務(wù)端安裝：

1，Microsoft .NET 2.0 Framework 本例使用vS2005開發(fā)

2，Silverlight 1.1 Alpha（或確認含有Silverlight.js 文件）

3,Asp.net Ajax 在//ajax.asp.net/下載

概覽：

在下面的的例子里將會分3個級別的內(nèi)容來介紹連續(xù)變化：

下面給出一個連續(xù)變化的視圖，程序中包含2各textblock，他們會部分顯示當他們處在Silverligth控件的范圍內(nèi)。當達到末尾時，ticketext2的數(shù)據(jù)將拷貝ticketext1的數(shù)據(jù) ，然后在動畫啟動的過程中tickertext2的信息就會被更新。理論上講，我們可以弄很多個textblocks，為了簡單期間我們只示例2個。

采用asp.net Ajax 調(diào)用web services ，Asp.net AjAX將會為你注冊使用<asp:ServiceReference>標簽的web services自動產(chǎn)生一個javascirpt代理.當頁面被加載完后，我們通過組織XAMLTextBlock上的一些數(shù)據(jù)返回給web service。下面是

一個不同對象之間傳遞消息的時序圖： 

采用隊列在silverlight和asp.net AjAx之間共享數(shù)據(jù)因為不是保證所有的數(shù)據(jù)同時通過ajax取出，所以程序再updatepanel中把asp.net Textbox當作對列來使用。asp.net AJax不斷去更新數(shù)據(jù)，同時silverlight周期性的從隊列中取出數(shù)據(jù)。

CreateSilverlight.js

各文件描述

下面的代碼是silverlight插件的運行代碼，功能是如果用戶沒有安裝sliverlight將會提示安裝silverlight插件

//contains calls to silverlight.js, example below loads TickerTape.xaml

function createSilverlight()

{

    Silverlight.createObjectEx({

        source: "TickerTape.xaml",

    parentElement: document.getElementById("SilverlightControlHost"),

    id: "SilverlightControl",

    properties: {

        width: "500",

        height: "25",

        version: "0.95",

        background: "#00000000",

        isWindowless: false,

        enableHtmlAccess: true },

        events: {}

    });

}

Ticker.aspx

這個頁面使用了silverlight展現(xiàn)證券報價數(shù)據(jù)和asp.netajax從服務(wù)器檢索數(shù)據(jù)，把這個textbox被當作隊列，asp.netajax將會把股票數(shù)據(jù)填充到隊列中，當它通過javascript給silverlight控件后將會被從隊列中刪除。

<!-- AJAX code -->

<asp:ScriptManager runat="server" ID="scriptManager">

    <Services>

        <asp:ServiceReference Path="StockUpdate.asmx" />

    </Services>

</asp:ScriptManager>

下面的asp.net Ajax 代碼來承擔少許重要的任務(wù)，通過增加<asp:ScriptManager> 控件，我們可以訪問asp.net Ajax提供的方法，使用aps.net ajax必須在頁面有這個控件，這段代碼同時也注冊了在第一次加載葉面時候調(diào)用

javascirpt的 web service StockUpdate.asmx。

<asp:UpdatePanel ID="StockPanel" runat="server">

    <ContentTemplate>

        <asp:Timer ID="RefreshTimer" runat="server" Interval="3000"

            OnTick="RefreshTimer_Tick"> </asp:Timer>

        <asp:TextBox ID="NewStockQueue" runat="server" Width="500">

        </asp:TextBox>

    </ContentTemplate>

</asp:UpdatePanel>

下面的代碼會使用ajax組件定時訪問服務(wù)器并安排進新的股票隊列的textbox

<asp:UpdatePanel ID="StockPanel" runat="server">

    <ContentTemplate>

        <asp:Timer ID="RefreshTimer" runat="server" Interval="3000"

            OnTick="RefreshTimer_Tick"> </asp:Timer>

        <asp:TextBox ID="NewStockQueue" runat="server" Width="500">

        </asp:TextBox>

    </ContentTemplate>

</asp:UpdatePanel>

TickerTape.xaml

XAML運行在siverlight插件中，它將在屏幕滾動顯示股票報價數(shù)據(jù)，西面兩個textblocks將包含進股票市場數(shù)據(jù)。

<!-- These contain the stock market information that are visible to

the client. -->

<TextBlock x:Name="tickerText1" Canvas.Top="3" FontSize="12"

    Foreground="Yellow" FontFamily="Arial Black" Text="" />

<TextBlock x:Name="tickerText2" Canvas.Top="3" FontSize="12"

    Foreground="Yellow" FontFamily="Arial Black" Text="" /> 

storyboadrd 將會從左邊移動數(shù)據(jù)，直到達到顯示邊緣，然后調(diào)用refreshTicker 代碼把數(shù)據(jù)從tickertext2復制到tickerText1,從隊列中更新數(shù)據(jù)到ticekertext2和重新啟動動畫。

<!-- This storyboard will animate the text boxes below,

moving them to the left until they hit the end.

Then it will restart, giving the appearance of continuously moving

information-->

<Storyboard x:Name="tickerAnimation" Completed="RefreshTicker" >

    <DoubleAnimation x:Name="animationText1"

    Storyboard.TargetName="tickerText1"

    Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"

    Duration="0:0:16" From="1" To="-550" />

    <DoubleAnimation x:Name="animationText2"

    Storyboard.TargetName="tickerText2"

    Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"

    Duration="0:0:16" From="550" To="0" />

</Storyboard>   

StockUpdate.asmx

這是一個簡單得web services,它提供了一個訪問makretmanager 類的途徑，目的是為了從javescirpt訪問webserices,asp.net ajax將會自動的產(chǎn)生一個web代理，只要通過<asp:ServiceReference>標簽申明，通過code頁面去修改代碼。

在GAC添加中添加System.Web.Extensions 和asp.net ajax  namespace后

// This is the ASP.NET AJAX reference we need

using System.Web.Script.Services; 

我們也可以在類中增加scriptserviece屬性

[WebService(Namespace = "//xxxx.name/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class StockUpdate : System.Web.Services.WebService 

MarketManager.cs

該類提供虛擬的隨機股票以及一些交易和價格的信息。

Web.config自動產(chǎn)生，無特殊變化Silverlight 能夠在多瀏覽前中產(chǎn)生豐富，震撼的視覺效果和良好的用戶交互，但它只是一個空殼，需要有數(shù)據(jù)來填充，無疑,asp.net ajax是很多種從服務(wù)器獲取數(shù)據(jù)的方式中最好的方式。