WPF界面開發工具DevExpress WPF使用教程：使用自動生成的序列創建3D圖表（Part 1)

---

下載DevExpress v20.2完整版    DevExpress v20.1漢化資源獲取

通過DevExpress WPF Controls，您能創建有著強大互動功能的XAML基礎應用程序，這些應用程序專注于當代客戶的需求和構建未來新一代支持觸摸的解決方案。

本教程將指導您完成根據基礎數據源自動創建3D系列所需的步驟。

應該執行以下步驟，本文我們將為大家介紹3個步驟及最后結果，更多完整內容歡迎持續關注！

• Step 1. 編寫一個應用程序
• Step 2. 添加圖表并將其綁定到數據
• Step 3. 自定義圖表外觀
• 結果

Step 1. 編寫一個應用程序

在此步驟中，您將數據文件添加到項目中并設計Model和ViewModel類。

• 運行Microsoft Visual Studio 2012, 2013, 2015, 2017或2019
• 創建一個新的WPF Application項目
• 將新文件夾添加到解決方案，將其命名為Data。
• 將數據文件添加到新創建的文件夾中，因此請右鍵單擊該文件夾，然后選擇Add | Existing Item... 元素。

• 在invoked窗口中，瀏覽默認情況下存儲在C:\Users\Public\Documents\DevExpress Demos 20.2\Components\WPF\CS\ChartsDemo.Wpf\Data目錄中的IrisDataSet.xml文件，單擊Add來將文件夾引入到項目中。
• 然后，您需要設計一個新的模型類，因此將一個新的代碼文件添加到項目中。 右鍵單擊該項目，然后選擇Add | New Item。

• 在invoked窗口中，選擇Code組，然后在項目列表中選擇Code File項，將項目名稱設置為Iris.cs，然后單擊Add。

 在invoked窗口中，選擇Code組，然后在項目列表中選擇Code File項，將項目名稱設置為Iris.cs，然后單擊Add。

C#

namespace Chart3D_Lesson3 {
public class IrisData {
public string Species { get; private set; }
public double SepalWidth { get; private set; }
public double SepalLength { get; private set; }
public double PetalWidth { get; private set; }
public double PetalLength { get; private set; }
public IrisData(
string species,
double sepalWidth,
double sepalLength,
double petalWidth,
double petalLength
) {
Species = species;
SepalWidth = sepalWidth;
SepalLength = sepalLength;
PetalWidth = petalWidth;
PetalLength = petalLength;
}
}
}

VB.NET

Namespace Chart3D_Lesson3
Public Class IrisData
Private privateSpecies As String
Public Property Species() As String
Get
Return privateSpecies
End Get
Private Set(ByVal value As String)
privateSpecies = value
End Set
End Property
Private privateSepalWidth As Double
Public Property SepalWidth() As Double
Get
Return privateSepalWidth
End Get
Private Set(ByVal value As Double)
privateSepalWidth = value
End Set
End Property
Private privateSepalLength As Double
Public Property SepalLength() As Double
Get
Return privateSepalLength
End Get
Private Set(ByVal value As Double)
privateSepalLength = value
End Set
End Property
Private privatePetalWidth As Double
Public Property PetalWidth() As Double
Get
Return privatePetalWidth
End Get
Private Set(ByVal value As Double)
privatePetalWidth = value
End Set
End Property
Private privatePetalLength As Double
Public Property PetalLength() As Double
Get
Return privatePetalLength
End Get
Private Set(ByVal value As Double)
privatePetalLength = value
End Set
End Property
Public Sub New(ByVal species As String, ByVal sepalWidth As Double, ByVal sepalLength As Double, ByVal petalWidth As Double, ByVal petalLength As Double)
Me.Species = species
Me.SepalWidth = sepalWidth
Me.SepalLength = sepalLength
Me.PetalWidth = petalWidth
Me.PetalLength = petalLength
End Sub
End Class
End Namespace

• 在下一步中，開發一個視圖模型，該模型將基于模型從數據文件中加載數據對象。 為此請像以前一樣創建一個代碼文件，并將文件名設置為IrisesViewModel。

將下面的代碼放入此空白文件。

C#

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Resources;
using System.Xml.Linq;

namespace Chart3D_Lesson3 {
public class IrisesViewModel {
public ObservableCollection<IrisData> Irises { get; set; }
public IrisesViewModel() {
this.Irises = DataLoader.GetIrises("/Data/IrisDataSet.xml");
}
}
static class DataLoader {
public static ObservableCollection<IrisData> GetIrises(string filepath) {
ObservableCollection<IrisData> irisDataSet = new ObservableCollection<IrisData>();
Uri uri = new Uri(filepath, UriKind.RelativeOrAbsolute);
StreamResourceInfo info = Application.GetResourceStream(uri);
XDocument document = XDocument.Load(info.Stream);
if (document == null) return irisDataSet;
foreach (XElement element in document.Element("IrisDataSet").Elements("IrisData")) {
double sepalLength = Convert.ToDouble(element.Element("SepalLength").Value);
double sepalWidth = Convert.ToDouble(element.Element("SepalWidth").Value);
double petalLength = Convert.ToDouble(element.Element("PetalLength").Value);
double petalWidth = Convert.ToDouble(element.Element("PetalWidth").Value);
string species = element.Element("Species").Value.ToString();
irisDataSet.Add(new IrisData(species, sepalWidth, sepalLength, petalWidth, petalLength));
}
return irisDataSet;
}
}
}

VB.NET

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows
Imports System.Windows.Resources
Imports System.Xml.Linq

Namespace Chart3D_Lesson3
Public Class IrisesViewModel
Public Property Irises() As ObservableCollection(Of IrisData)
Public Sub New()
Me.Irises = DataLoader.GetIrises("/Data/IrisDataSet.xml")
End Sub
End Class
Friend NotInheritable Class DataLoader

Private Sub New()
End Sub

Public Shared Function GetIrises(ByVal filepath As String) As ObservableCollection(Of IrisData)
Dim irisDataSet As New ObservableCollection(Of IrisData)()
Dim uri As New Uri(filepath, UriKind.RelativeOrAbsolute)
Dim info As StreamResourceInfo = Application.GetResourceStream(uri)
Dim document As XDocument = XDocument.Load(info.Stream)
If document Is Nothing Then
Return irisDataSet
End If
For Each element As XElement In document.Element("IrisDataSet").Elements("IrisData")
Dim sepalLength As Double = Convert.ToDouble(element.Element("SepalLength").Value)
Dim sepalWidth As Double = Convert.ToDouble(element.Element("SepalWidth").Value)
Dim petalLength As Double = Convert.ToDouble(element.Element("PetalLength").Value)
Dim petalWidth As Double = Convert.ToDouble(element.Element("PetalWidth").Value)
Dim species As String = element.Element("Species").Value.ToString()
irisDataSet.Add(New IrisData(species, sepalWidth, sepalLength, petalWidth, petalLength))
Next element
Return irisDataSet
End Function
End Class
End Namespace

• 構建解決方案。
• 然后，將ViewModel分配給Window.DataContext屬性。 為此請在design view中選擇window，然后在Properties窗口中找到DataContext屬性，然后單擊該屬性對面的New按鈕，在調用對話框中，選擇Chart3D_Lesson3.IrisesViewModel類，然后單擊OK。

準備階段完成。 我們將在下篇文章中為大家介紹如何將圖表綁定到數據源。

---

DevExpress技術交流群2：775869749      歡迎一起進群討論