Syncfusion公司在Essential Studio Enterprise Edition 2011 v3版本中發(fā)布了一套針對(duì)于Windows Phone 7（WP7）的UI控件。過(guò)去也曾使用過(guò)Syncfusion公司的控件產(chǎn)品，覺(jué)得還不錯(cuò)，因此，我決定再次親自體驗(yàn)一下本次版本中針對(duì)于WP7的UI控件。本文將通過(guò)代碼實(shí)例來(lái)展示如何運(yùn)用User Interface Edition for Windows Phone控件在程序中創(chuàng)建圖表。

　　在使用前，肯定要下載Essential Studio User Interface Edition for Windows Phone 7 撒！這里說(shuō)明一下，User Interface Edition for Windows Phone 7 包含在Essential Studio Enterprise Edition中的，只需要下載Essential Studio Enterprise Edition即可！

　　一旦安裝了該控件包，您需要啟動(dòng)Syncfusion儀表板，并用它來(lái)安裝二進(jìn)制文件。Syncfusion這樣做就是為了讓在管理不同版本的控件包時(shí)更加輕松。

　　一旦安裝了Essential Studio Enterprise Edition控件包，接下來(lái)啟動(dòng)Visual Studio，然后便可以開(kāi)啟一個(gè)新的Windows Phone程序或者打開(kāi)一個(gè)已有的程序。來(lái)到添加引用的對(duì)話框，選擇組件，選擇擴(kuò)展，然后添加你的程序中需要用到的Syncfusion庫(kù)。在本文中，我們將使用Syncfusion.Chart.Phone. 接下來(lái)，你需要添加引用到你的XAML中，使其在頁(yè)面中可以。對(duì)于圖表控件，下面的代碼就是我添加到XAML文件頂部的 “phone:PhoneApplicationPage”標(biāo)簽的代碼：

　　xmlns:chart="clr-namespace:Syncfusion.Phone.Chart;assembly=
Syncfusion.Chart.Phone"

　　這樣做是為了將Syncfusion圖表控件公開(kāi)到頁(yè)面，方便我們可以使用。現(xiàn)在，我們可以開(kāi)始放置部分圖表在頁(yè)面上。我們馬上將開(kāi)始一個(gè)“圖表”對(duì)象，然后將 “ChartArea”裝進(jìn)“圖表”對(duì)象中。ChartArea中可包含圖例和圖表數(shù)據(jù)等。因?yàn)槲覀兪褂脠D表命名控件導(dǎo)入了控件， XAML中的所有圖表標(biāo)簽都以“chart”開(kāi)始。一旦我們填寫了標(biāo)簽，你就可以發(fā)現(xiàn)可視化設(shè)計(jì)器中的圖表以及初具規(guī)模了。我們將添加一個(gè)空的圖例和兩個(gè)軸。你最多可以添加兩種軸類型， PrimaryAxis (x-axis)和SecondaryAxis (y-axis).對(duì)于每個(gè)軸，你可以將“IsAutoSetRange”設(shè)置為“True”，然后通過(guò)控件指出使用范圍。

　　你需要在控件中導(dǎo)入一些數(shù)據(jù)。你可以通過(guò)后臺(tái)代碼來(lái)設(shè)置數(shù)據(jù)上下文，從而實(shí)現(xiàn)手動(dòng)執(zhí)行此操作。根據(jù)我的經(jīng)驗(yàn)，這并不是最好的方法，因?yàn)樗呛茈y跟蹤到屏幕上的數(shù)據(jù)進(jìn)入到控件中了。您需要追蹤實(shí)際調(diào)用來(lái)設(shè)置數(shù)據(jù)上下文。所以，我們將在XAML中來(lái)完成它。要做到這一點(diǎn)，首先要在ChartArea中創(chuàng)建一個(gè)ChartSeries對(duì)象。這使我們能夠控制制成什么樣的圖，其在屏幕上的標(biāo)簽和外觀，以及數(shù)據(jù)從何而來(lái)。

 Code sample A: The Chart control itself

<chart:ChartArea Header="Sample Chart" GridBackground="AliceBlue">

<chart:ChartArea.Legends>

<chart:ChartLegend></chart:ChartLegend>

</chart:ChartArea.Legends>

<chart:ChartArea.PrimaryAxis>

<chart:ChartAxis Name="Xaxis" Header="Week"
 IsAutoSetRange="True"></chart:ChartAxis>

</chart:ChartArea.PrimaryAxis>

<chart:ChartArea.SecondaryAxis>

<chart:ChartAxis Name="Yaxis" Header="Sales"
 IsAutoSetRange="True"></chart:ChartAxis>

</chart:ChartArea.SecondaryAxis>

<chart:ChartSeries Name="WeeklySales"
 Label="Weekly Sales" Type="Line" Stroke="Blue" StrokeThickness="2" 
BindingPathX="WeekNumber" BindingPathsY="Sales"
 DataSource="{StaticResource dataSet}"></chart:ChartSeries>

</chart:ChartArea>

</chart:Chart>

Code sample B: The data binding classes

public class SalesData

{

public int WeekNumber { get; set; }

public double Sales { get; set; }

}

public class WeeklySalesData : ObservableCollection<SalesData>

{

}

Code sample C: The data resource in the XAML

<UserControl.Resources>

<localItems:WeeklySalesData x:Key="dataSet">

<localItems:SalesData WeekNumber="1" Sales="890.45" />

<localItems:SalesData WeekNumber="2" Sales="912.12" />

<localItems:SalesData WeekNumber="3" Sales="1234.87" />

<localItems:SalesData WeekNumber="4" Sales="908.34" />

<localItems:SalesData WeekNumber="5" Sales="762.78" />

<localItems:SalesData WeekNumber="6" Sales="671.23" />

<localItems:SalesData WeekNumber="7" Sales="908.99" />

<localItems:SalesData WeekNumber="8" Sales="1342.11" />

<localItems:SalesData WeekNumber="9" Sales="1276.21" />

<localItems:SalesData WeekNumber="10" Sales="1098.07" />

</localItems:WeeklySalesData>

</UserControl.Resources>

Figure D: What the layout looks like in Visual Studio 

Figure E: Screenshot of the running application

下載《Essential Studio Enterprise Edition》