|
在這個範例當中，我們將為讀者展示如何透過ASP.NET與Silverlight的結合，讓開發人員得以自由的在頁面上繪製圖表。過去，我們可能需要採購國外昂貴的軟體元件，或是自行開發以AJAX技術為核心的動態圖表產生程式，這不僅要花費不少的時間，且必須和動態圖表產生時所需要處理的GDI+打交道，另外圖表呈現到前端頁面時的顯示效果也不盡理想(即使用了AJAX技術都會有一點閃爍的感覺)。
然而，ASP.NET開發人員辛苦的過去即將結束，從現在這個範例中，您將會看到另一種未來的可能性，當您翻開這一章，會發現原來透過ASP.NET加上Silverlight來繪製圖表是這樣的簡單，而且整個呈現出的效果與過去AJAX時代所動態組出的圖表在品質上更是有過之而無不及，整體的開發時程、產品品質、維護和管理成本的降低，總而言之，您的ASP.NET開發效益都將因為Silverlight的加入而大大的提升，不多說了…繼續往下看吧。
功能展示
關於動態繪圖功能
這是一個對ASP.NET開發人員來說相當有意義的範例，您會從這個範例看到未來Web應用程式發展的可能性。
不知道您是否像筆者一樣，過去花了不少的時間在和ASP.NET上的動態圖表呈現打交道，歷經了多種不同的做法，終於到現在，有一個令筆者滿意的結果。
透過Silverlight與ASP.NET的整合，再加上《董大偉Silverlight權威講座》一書所提供的DynamicXaml控制項，不需要學GDI+、不用動態產生圖片、不需要管什麼複雜的泛型處理函式、連AJAX也不用學了，透過Silverlight動態產生圖表直接變得相當的簡單。
不僅如此，當您看到下面的範例和程式碼之後，相信您也會覺得，透過我們提供的DynamicXaml控制項，未來在Web上繪圖，對您的專案來說絕對是一個大大的加分，而不是像過去一樣，得花上那麼大的成本。
展示畫面
我們先看程式執行的結果：
這樣的功能怎麼完成的呢?我們立刻來看。
功能實作
抓取資料庫繪製圖表
當使用者按下畫面的『以資料庫數據繪製圖表』鈕時，執行到的是底下的程式碼：
'以資料庫數據繪製圖表
Protected Sub Button6_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'開啟資料庫
Dim db As New mdbAccess("AccessDB.mdb")
'讀取Table1的內容放置於dt (DataTable)
Dim dt As Data.DataTable = db.ReadDataTable("select * from Table1")
'清空Canvas
Me.DynamicXaml1.ClearCanvas("Canvas1")
'繪製圖表座標
Me.DynamicXaml1.Line(30, 10, 30, 450,"Black")
Me.DynamicXaml1.Line(30, 450, 600, 450,"Black")
For y As Integer = 450To 30 Step -50
'座標數值
Me.DynamicXaml1.DrawString(5, y - 10, 0, 0, 12,"Blue", Right
("00" & 450 - y, 3))
'座標線條
Me.DynamicXaml1.Line(30, y, 600, y,"3,3", 2, "gray")
Next
'繪製長條圖
Dim value As Integer
'第一組數字
value = dt.Rows(0).Item(1) → 開始以資料庫抓取到的數值繪圖
Me.DynamicXaml1.Rectangle(100, 450 - value, 20, value, "Red", "Black", 0.7)
Me.DynamicXaml1.DrawString(100, 450 - value - 12,0, 0, 9, "Black", value)
'第二組數字
value = dt.Rows(0).Item(2)
Me.DynamicXaml1.Rectangle(200, 450 - value, 20, value, "Blue", "Black", 0.7)
Me.DynamicXaml1.DrawString(200, 450 - value - 12, 0, 0, 9, "Black", value)
'第三組數字
value = dt.Rows(0).Item(3)
Me.DynamicXaml1.Rectangle(300, 450 - value, 20, value, "Brown", "Black", 0.7)
Me.DynamicXaml1.DrawString(300, 450 - value - 12, 0, 0, 9, "Black", value)
'第四組數字
value = dt.Rows(0).Item(4)
Me.DynamicXaml1.Rectangle(400, 450 - value, 20, value, "Green", "Black", 0.7)
Me.DynamicXaml1.DrawString(400, 450 - value - 12, 0, 0, 9, "Black", value)
End Sub
|
抓取資料→繪圖→結束，就是這樣，簡單明瞭，幾乎不用多作解釋的程式碼。
由於DynamicXaml的非同步繪圖支援，所以我們只需要把數值表示的長度轉成座標，然後繪製Rectangle並且透過DrawString方法顯示圖表上的數值文字，就可以輕鬆的抓取後端資料庫中的內容，以動態的完成圖表，您甚至還可以清除重新畫一次呢：
動態繪製圖表功能
至於上圖畫面底下的繪製線條、矩形、橢圓、以及用來繪製文字等測試按鈕的程式碼如下：
當使用者按下畫面的『以資料庫數據繪製圖表』鈕時，執行到的是底下的程式碼：
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'繪製線條
Dim x, y, width, height As Integer
x = txb_X.Text
y = txb_Y.Text
width = txb_Width.Text
height = txb_Height.Text
Me.DynamicXaml1.Line(x, y, x + width, y + height, DDL_Color.SelectedValue)
End Sub
Protected Sub Button2_Click(ByValsender As Object, ByVal eAs System.EventArgs)
'繪製矩形
Me.DynamicXaml1.Rectangle(txb_X.Text, txb_Y.Text, txb_Width.Text,
txb_Height.Text, DDL_Color.SelectedValue, DDL_BorderColor.SelectedValue)
End Sub
Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'繪製橢圓
Me.DynamicXaml1.Ellipse(txb_X.Text, txb_Y.Text, txb_Width.Text,
txb_Height.Text, DDL_Color.SelectedValue, DDL_BorderColor.SelectedValue)
End Sub
Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'繪製文字
Dim eleName As String = "a" & Now.Ticks
Me.DynamicXaml1.DrawPathString(eleName, txb_X.Text, txb_Y.Text,
txb_Width.Text, txb_Height.Text, txb_TextSize.Text, DDL_Color.SelectedValue,
DDL_Color.SelectedValue, Me.txb_Words.Text,"新細明體")
End Sub
Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'清空Canvas
Me.DynamicXaml1.ClearCanvas()
End Sub
|
您會發現也都是透過DynamicXaml控制項來完成，我們可以隨意的在Silverlight物件的Canvas上繪圖：
您會發現整個繪製動作明顯比過去以ASP.NET甚至ASP.NET AJAX來的順暢很多。而且都是即時完成，相信這樣的效果會讓Web
Solutions的開發人員感到驚艷。
當然，如果您是ASP、PHP、JSP…的使用著。恐怕目前還在與傳統的動態圖檔產生打交道吧…ASP.NET的開發人員真的顯然要幸運的多很多。 |
Wii 無所不玩 - 玩家禁斷密技講座
