顯示具有 silverlight 標籤的文章。 顯示所有文章
顯示具有 silverlight 標籤的文章。 顯示所有文章

2009年9月23日 星期三

SilverLight處理XML資料

在之前的文章中,有介紹過如何在SilverLight上處理JSON資料。事實上,除了 JSON,XML也是另一個常用的資料格式。雖然比起JSON,XML的格式很囉嗦,傳輸所佔的頻寬也比較大,但XML出現的較早,很多地方還是會用得到。而這篇文章將會介紹如何在SilverLight上處理XML。







首先,新增一個名為SilverlightApplicatioUseXML專案。

2009-09-22_204724

 

將專案裡的Page.xaml改為下列內容,等會會用來顯示XML的內容。

2009-09-22_213203

 

接下來新增一個XML檔,命名為data.xml。

2009-09-22_213300

 

2009-09-23_150648

 

新增參考System.Xml.Linq。

2009-09-22_214629

 

原始碼新增下列兩個命名空間。

2009-09-22_214702

在程式啟動後就開始下載data.xml,之後再呼叫client_OpenReadCompleted函式來處理資料。

2009-09-23_150723

下列程式碼主要是處理XML,使用Xelement物件讀取,之後再透過foreach迴圈取出每一筆Person資料。

2009-09-23_150736

 

執行結果。

2009-09-23_150805

 

範例下載:

2009年9月17日 星期四

簡單的SilverLight動畫效果

許多人都會將把SilverLight跟Flash做比較,雖然微軟官方一直強調這兩者是不同方向的產品,各有優勢,但我個人是把它們當成一樣的東西。用Flash可以輕易的做出動畫效果,那SilverLigth自然也有一樣的功能。








所謂的動畫效果,其實就是動態的改變某些變數的數值,例如下面這個轉動的方塊。

這個方塊之所以會旋轉,其實就是在週期內改變方塊的角度所產生的效果,有了這個觀念,就可以輕易的利用SilverLight做出簡單的效果。本篇文章要示範的動畫效果如下:

上面的SilverLight程式其實是兩張重疊的圖,其中一張圖會隨時間慢慢透明化,完全透明之後又會隨時間提高透明度。待會程式會用到的圖如下,檔名分別為1.jpg、2.jpg。

2 1

新增SilverLight專案,專案名稱為AnimationDemoSilverlightApplication。

2009-09-17_164523

修改介面如下:

2009-09-17_165334

XAML碼

2009-09-17_165514

基本上就是將2.jpg疊在1.jpg上。

接下來打開cs檔,在Page類別裡新增兩個Storyboard。Storyboard就像是一個計數器,會在固定時間內執行所要求的動畫效果。

2009-09-17_165745

下列的程式碼是在整個頁面讀取完之後執行,而程式碼內容主要是宣告動畫所需的物件,然後加到Storyboard裡。obj與obj2兩個物件做的是差不多的事情:

  • 設定動畫長度
  • 設定要改變的物件
  • 設定要更動物件的哪個屬性

最後再設定動畫結束後的Completed事件,告訴Storyboard執行完動畫後該做什麼事。

2009-09-17_170036

下面這兩個函式要加到Storyboard的Completed事件裡,當timer1執行完畢後就啟動timer2,timer2結束後再重新啟動timer1,就這樣一直重覆下去。

2009-09-17_170048

最後,其實動畫效果不是非得靠程式,將前面的Storyboard刪掉,並將介面改為下圖所示,重新執行後也會有動畫效果出來。

2009-09-17_200323

程式範例下載

之後又用jQuery寫了差不多的東西,感覺jQuery比較簡單(倒)

點擊網頁中的圖片就會有動畫效果了。

http://sholfen.googlepages.com/jQueryDemo2.htm

2009年9月9日 星期三

SilverLight處理JSON資料

在上一次的文章,是利用JavaScript讀取JSON資料,這次就示範如何利用SilverLight讀取資料。

 








首先新增一個SilverLight專案,命名為SilverLightUseJSON。

2009-09-08_223821

 

然後用Blend 2拉出下列介面。

2009-09-08_225158

 

原始的XAML碼。

2009-09-08_225229

 

接下來在Web專案上新增檔案data.json。

2009-09-08_225309

2009-09-08_225338

 

將下列的文字新增至data.json。

2009-09-08_225402

 

為了讓SilverLight程式能處理JSON格式的資料,必需加入一個System.Json這個元件。

2009-09-08_225524

然後引用System.Json這個命名空間。

2009-09-08_225554

 

之後新增下列程式碼到按鈕的click事件裡,這段程式碼裡新增了一個WebClient物件,用來開啟前面新增的data.json檔案,並且新增一個函式到WebClient的OpenReadCompleted事件。

2009-09-08_231107

實作OpenReadCompleted事件裡的函式。這段程式碼很簡單,就是將文字資料轉為JsonArray物件,並且利用name以及desc這兩個屬性去查詢資料。

2009-09-08_230129

 

執行結果。

2009-09-08_230211

2009年7月12日 星期日

Hello Silverlight Part. 1

Silverlight,中文名稱「淫光銀光」,是有點軟公司想跟奧多打對台的一個玩意。

為了要寫一個簡單的SilverLight程式(還是說頁面= =?),
你必須要有以下的東西

  1. Visual Studio 或 Visual Web Developer Express(2008版推獎)

  2. Visual Studio 2008 SP1 的 Microsoft® Silverlight™ Tools


寄件者 技術教學

當你確定都ok(安裝沒問題)的話,
那麼請打開你的Visual Web Developer Express(或你的Visual Studio,不過我以下都用VWD Express作說明),
選擇新增專案,
再選擇Silverlight應用程式後,
會出現左側視窗。
基本上,我個人偏好選第二個啦,
所以就直接選第二個吧(如果你是寫ASP.net的話,那還是選第一個好了)。


寄件者 技術教學



寄件者 技術教學

科科,這就是我們要開發的Silverlight的介面了。
上半部是即時預覽視窗(?),
下半部則是你要敲的xaml內容,
看到這裡你一定會懷疑真的要靠敲程式碼(和xml語句)來寫銀光嗎?
當然也不是這樣啦,
不過這是以後的事,等到有時間再去談好了!



既然看到了介面,
我們就先來敲一段x(a)ml語句吧,
不過為了篇幅原因,請點這裡看語句,
你可以把它完整複製下來,
並貼到VWD Express的XAML語句編輯區(要完全取代掉),
或是只複製間的內容,
並貼到XAML語句編輯區中的區塊間。

在你做完這件事後,
你應該會看到上方的即時預覽視窗已經有3*3的方格了,
這就是未來我們繼續開發的基礎了XD(未完待續......)


(難得會寫有附圖的技術文章呢,科科!)

本文同步轉載於Faryne的程式設計館
 

我們搬家了

新部落格在http://b-plurkers.com/