Silverlight Toolkit--PivotViewer

PivotViewer控件可在較短時間內載入近千條數據,並將其進行可視化處理,在使用過程中,結合Deep Zoom技術,可以輕鬆閱覽高分辨率的數據內容。

image

 

看效果圖很帶勁啊

那麼就自己動手實驗下效果吧

 

首先要收集數據,Pivot 爲我們提供了3種收集方法

1. Pivot Collection Tool for Microsoft Excel

2. Pivot Collection Tools for the Command Line

3. Sample Code for Creating Just in Time Pivot Collections

比較習慣excel,這裏我們用excel來做演示。

 

安裝完Pivot Collection Tool for Microsoft Excel後,可以在excel上看到加載項:

image

 

我們首先新建一個Collection :

image

 

Pivot 給我們提供了一個標準的數據模板

image

Image Location:圖片的地址(絕對路徑,只要填入圖片的地址,自動就能出圖片的預覽圖)

Preview:圖片預覽

Name:數據名稱

Href:鏈接(Pivot每條數據可以跟一個頁面鏈接 )

Description:內容介紹

根據我們的需要,我們還可以再添加(支持中文哦)

 

然後整理下數據

image

複製到模板裏去:

image

最後再配置下輸出的標題等信息

image

然後輸出就可以了:

image

 

輸出後我們的數據收集就結束了

image

 

然後打開VS2010,添加一個Silverlight4項目

首先添加引用“System.Windows.Pivot.dll”(在C:/Program Files (x86)/Microsoft SDKs/Silverlight/v4.0/PivotViewer/Jun10/Bin/下)

image

然後在xaml裏添加:

 

xmlns:pivot="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot"

 


下面我們就可以使用PivotViewer了,添加一個PivotViewer:

 

            <pivot:PivotViewer Name="PivotViewerControl"
                               Grid.Column="0"
                               ItemDoubleClicked="PivotViewerControl_ItemDoubleClicked">
            </pivot:PivotViewer>

 


這裏我們定義了一個雙擊事件,在雙擊事件中,我們要彈出之前我們設置的鏈接

        private void PivotViewerControl_ItemDoubleClicked(object sender, ItemEventArgs e)
        {
            PivotItem piv_item = PivotViewerControl.GetItem(e.ItemId);

            if (!string.IsNullOrWhiteSpace(piv_item.Href))
            {
                PivotViewerControl.CurrentItemId = e.ItemId;
                HtmlPage.Window.Navigate(new Uri(piv_item.Href, UriKind.RelativeOrAbsolute), "NewPage");
            }
            else
            {
                MessageBox.Show("No Web Page...");
            }
        }

 

 

注意別忘了

 

using System.Windows.Pivot;



 

 

 

當然最後我們不能忘了關鍵的一條,還沒有把 PivotViewer指定到我們剛纔收集的數據上呢(我放到了站點的根目錄下)

        public MainPage()
        {
            InitializeComponent();
            PivotViewerControl.LoadCollection("http://127.0.0.1/New Collection1.cxml", " ");
        }

 

然後編譯運行,看看效果

爲啥不顯示呢…

我們還要添加MIME類型到Web服務器

    .cxml - text/xml

    .dzc  - text/xml

    .dzi   - text/xml

image

 

 

然後就能看效果了:

image



image

image



看看還湊合…

 

 

 

參考:http://10rem.net/blog/2010/06/29/introducing-the-pivotviewer-control-for-silverlight

http://www.cnblogs.com/jv9/archive/2010/06/30/1767989.html

http://www.codeproject.com/KB/grid/PivotViewer.aspx

http://blogs.microsoft.co.il/blogs/shair/archive/2010/07/03/silverlight-pivotviewer-the-full-guide.aspx

作者:sun8134
    
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章