微軟的PivotViewer控制元件程式設計

weixin_34221276發表於2017-11-05

微軟前幾天正式釋出了一個很酷的Silverlight控制元件—PivotViewer,控制元件的作用這裡就不介紹了,有興趣請瀏覽連結:http://www.silverlight.net/learn/pivotviewer/裡的幾個視訊。另外,控制元件的下載也在那個頁面上。

 

可能是因為剛出來的緣故,雖然有幾篇文件介紹了PivotViewer的資料(CXML檔案)的格式,在SDK裡,微軟還提供了一個示例程式PivotViewerSample演示它用法。但是示例程式碼好像有點問題,示例程式碼中 PivotViewer控制元件的資料來源是微軟網站上的,並沒有給出一個例子資料檔案,可以在本機獨立執行,請看下面原始碼中高亮顯示的部分(拷貝自PivotViewerSample.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head>
    <title>PivotViewerSample</title>
    <script type="text/javascript">
        ……
    </script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="enableGPUAcceleration" value="true"/>
                   <param name="source" value="PivotViewerSample.xap"/>
                   <param name="onError" value="onSilverlightError" />
                   <param name="background" value="white" />
                   <param name="minRuntimeVersion" value="4.0.50401.0" />
                   <param name="autoUpgrade" value="true" />
          <param name="initparams" value="initialCollectionUri=http://content.getpivot.com/Collections/bingnewcars/bingnewcars.cxml" />
                   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
                            <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
                   </a>
    </form>
</body>
</html>

 

 

對著文件還有網上不多的例子試了一下,這裡分享一下我的發現。

顯示靜態CXML檔案

根據PivotViewerControl SDK中示例程式PivotViewerSample(安裝好以後應該在資料夾C:\Program Files\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Jun10\Source裡面)的原始碼,在Silverlight程式裡引用PivotViewerControl時,資料來源的載入是通過PivotViewer.LoadCollection函式來做的。例如下面的程式碼:

 

MainPage.xaml.cs:

程式碼

 

但是你要自己建立資料來源(CXML檔案)的時候,在PivotViewerControl官網提供的文件中,你會發現文件裡作為例子的CXML檔案根本就不能用,下面是那個CXML檔案的原始碼:

 

HelloWorld.cxml:

程式碼

 

 

如果你直接把這個檔案儲存到網站的目錄,然後再通過將CXMLURL傳入給LoadCollection函式試圖載入資料。在除錯的時候,特別是開啟異常通知的除錯模式下,可能會碰到幾個WebException,告訴你找不到檔案,這是因為CXML這個字尾名的檔案,預設情況下IIS不會傳送給客戶端,你需要新增一個新的MIME型別,這個可以在Web.config檔案修改即可(在web.config檔案中修改,可以同時影響IISwebdev.exe,甚至以後的IIS Express也支援這種方法)。把下面的程式碼新增到你的web.config檔案就為IIS新增了一個的MIME型別:

 

Web.config:

程式碼

 

但即便是這樣,你在網頁上還是看不到任何東西,這是因為PivotViewer控制元件和Deep Zoom Composer結合的實在是“太緊密”了,注意前面HelloWorld.cxml的原始碼中,我高亮出來了一行。那一行是Deep Zoom的圖片索引檔案,如果PivotViewer下載不了那個檔案的話,或者你在CXML檔案的Items節點中不指定ImageBase屬性的話,PivotViewer都會拒絕顯示任何東西。為了解決這個問題,你可以建立一個空的.dzc檔案,但是檔案裡面還是需要有內容的,請把下面的內容儲存為helloworld.dzc檔案:

 

Helloworld.dcz:

程式碼

 

這個時候,你才能看到類似下面的網頁:

哇塞,是不是有點辛苦?看起來微軟不是很鼓勵大家開發簡單的例子嘛。複雜點的?可以,請接著往下看。

生成複雜的靜態CXML檔案

先看看效果圖:

有了上面的基礎知識以後,做一個類似上面的網站卻有點簡單了,步驟:

1.         下載Pivot Collection Tool for the Command Line

2.         解壓以後,將資料夾“Pauthor-RC3\Pauthor\docs”中的所有檔案拷貝到你的網站的某個目錄(比如說根目錄)。

3.         然後開啟命令列視窗,並在儲存剛才拷貝的檔案的目錄中執行下面的命令:

\Pauthor-RC3\Pauthor\bin\Pauthor.exe /source cxml sample.cxml /target deepzoomsample_dz.cxml

4.         Pauthor.exe就是剛剛下載的Pivot Collection Tool for the Command Line

a)         sample.cxml是剛剛我們從“Pauthor-RC3\Pauthor\docs”拷出來的例子資料檔案。

b)         Sample_dz.cxml才是真正在PivotViewer控制元件中使用的資料來源。

5.         轉換好了以後,使用PivotViewer.LoadCollection函式載入sample_dz.cxmlURL就可以得到上面的效果了。

 

使用Excel生成CXML檔案

請參考網頁Developer Info: Pivot Collection Tool for Microsoft Excel,那裡面已經說得很詳細了,不再重複。

 

下面是程式碼下載:

 /Files/killmyday/PivotTest.zip

明天講解如何動態生成CXML檔案,未完待續……




本文轉自 donjuan 部落格園部落格,原文連結:http://www.cnblogs.com/killmyday/archive/2010/07/08/1773264.html   ,如需轉載請自行聯絡原作者

相關文章