Syncfusion公司在Essential Studio Enterprise Edition 2011 v3版本中發布了一套針對于Windows Phone 7（WP7）的UI控件。過去也曾使用過Syncfusion公司的控件產品，覺得還不錯，因此，我決定再次親自體驗一下本次版本中針對于WP7的UI控件。本文將通過代碼實例來展示如何運用User Interface Edition for Windows Phone控件在程序中創建圖表。

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

　　一旦安裝了該控件包，您需要啟動Syncfusion儀表板，并用它來安裝二進制文件。Syncfusion這樣做就是為了讓在管理不同版本的控件包時更加輕松。

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

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

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

　　你需要在控件中導入一些數據。你可以通過后臺代碼來設置數據上下文，從而實現手動執行此操作。根據我的經驗，這并不是最好的方法，因為它是很難跟蹤到屏幕上的數據進入到控件中了。您需要追蹤實際調用來設置數據上下文。所以，我們將在XAML中來完成它。要做到這一點，首先要在ChartArea中創建一個ChartSeries對象。這使我們能夠控制制成什么樣的圖，其在屏幕上的標簽和外觀，以及數據從何而來。

 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》