silverlight以資料庫內容動態繪製圖表

在這個範例當中，我們將為讀者展示如何透過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的開發人員真的顯然要幸運的多很多。

转于《董大偉Silverlight權威講座--ASP.NET整合秘技與獨家案例剖析》