<C1 Studio Enterprise下載>

在上一篇中，我們介紹了在MVVM模式下使用C1Chart。那么如何在C1Chart動態的添加和刪除數據序列？本文就在上一節的基礎上，就此內容展開討論。

如果我們在C1chart的model下有大量的bindings，那么ChartData需要接受一個binding。我們可以簡單的設計一個C1ChartData屬性，暴露在ViewModel，然后運行時從這個ChartData中添加和刪除序列。我們通過下面的實現，讓用戶更加清楚地了解。

首先，需要在Visual Studio中創建一個WPF工程。在Sales類的基礎上展示數據，因此我們需要創建這個類。代碼如下：

public class Sales:INotifyPropertyChanged
{
public Sales(string product,double salevalue,double volume,string shipcity,double discount)
{
_product = product;
_salevalue = salevalue;
_volume = volume;
_shipcity = shipcity;
_discount = discount;
_variance = (_volume*1000/_salevalue);
}
#region privateFields
string _product;
double _salevalue;
double _volume;
double _discount;
string _shipcity;
double _variance;
#endregion

#region publicProperties
public string Product
{
get { return _product; }
set { _product = value; }
}
public double SaleValue
{
get { return _salevalue; }
set { _salevalue = value; OnPropertyChanged("SaleValue"); }
}
public double Volume
{
get { return _volume; }
set { _volume = value; OnPropertyChanged("Volume"); }
}
public double Discount
{
get { return _discount; }
set { _discount = value; OnPropertyChanged("Discount"); }
}
public double Variance
{
get { return (this.Volume*1000/ this.SaleValue); }
}
public string ShipCity
{
get { return _shipcity; }
set { _shipcity = value; OnPropertyChanged("ShipCity"); }
}
#endregion

#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
#endregion
}

在這個類中，我們有六個fields：Salevalue (產品的銷售價格), Volume (產品的出售體積), Discount (產品折扣), ShipCity (發貨城市), and Variance (假設方差)。

接下來，我們需要創建ViewModelBase從INotifyPropertyChanged接口繼承。我們的ChartViewModel將從這個base viewmodel繼承。如下是base viewmode代碼：

public class ViewModelBase:INotifyPropertyChanged
{
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
#endregion
public ViewModelBase()
{
}
}

現在就可以創建ChartViewModel。如下是代碼：

public class ChartViewModel:ViewModelBase
{
#region Ctor..
public ChartViewModel()
{
_saleslist = new ObservableCollection();
LoadData();
_axisvalues = new ObservableCollection();
_axisvalues.Add("SaleValue");
_axisvalues.Add("Volume");
_axisvalues.Add("VolumeVsCity");
_axisvalues.Add("ProductDiscount");
_axisvalues.Add("VolumeTotal");
_axisview = new CollectionView(_axisvalues);
_axisview.CurrentChanged += new EventHandler(_axisview_CurrentChanged);

_chartdata = new ChartData();
ChartDataView.ItemNameBinding = new Binding("Product");

DataSeries ds1 = new DataSeries();
ds1.Label = "SaleValue";
ds1.ValueBinding = new Binding("SaleValue");

DataSeries ds2 = new DataSeries();
ds2.Label = "Volume";
ds2.ValueBinding = new Binding("Volume");

ChartDataView.ItemsSource = SalesList;
ChartDataView.Children.Add(ds1);
ChartDataView.Children.Add(ds2);
}
#endregion

#region private Fields

ObservableCollection _saleslist;
ObservableCollection _axisvalues;
CollectionView _axisview;
ChartData _chartdata;
#endregion
#region publicProperties
public ObservableCollection SalesList
{
get { return _saleslist; }
set { _saleslist = value; }
}
public CollectionView AxisView
{
get { return _axisview; }
set { _axisview = value; OnPropertyChanged("AxisView"); }
}
public ChartData ChartDataView
{
get { return _chartdata; }
set { _chartdata = value; OnPropertyChanged("ChartDataView"); }
}
#endregion
#region privateMethods
void LoadData()
{
_saleslist.Add(new Sales("Confectionaries", 2500.00,300000.00,"NewYork",25.50));
_saleslist.Add(new Sales("Plastics", 3500.00,720000.00,"Newark",15.75));
_saleslist.Add(new Sales("Electronics", 7500.00,800000.00,"GeorgeTown",20.65));
_saleslist.Add(new Sales("Produces", 800.00,100000.00,"Houston",30.35));
}
void _axisview_CurrentChanged(object sender, EventArgs e)
{
if (_axisview.CurrentItem.ToString() == "SaleValue")
{
_chartdata.Children.Clear();

DataSeries ds1 = new DataSeries();
ds1.Label = "SaleValue";
ds1.ValueBinding = new Binding("SaleValue");
ds1.ItemsSource = SalesList;
_chartdata.Children.Add(ds1);
_chartdata.ItemNameBinding = new Binding("Product");
}
else if (_axisview.CurrentItem.ToString() == "Volume")
{
_chartdata.Children.Clear();
DataSeries ds2 = new DataSeries();
ds2.ValueBinding = new Binding("Volume");
ds2.Label = "Volume";
ds2.ItemsSource = SalesList;
_chartdata.Children.Add(ds2);
_chartdata.ItemNameBinding = new Binding("Product");
}
else if (_axisview.CurrentItem.ToString() == "VolumeVsCity")
{
_chartdata.Children.Clear();
DataSeries ds1 = new DataSeries();
ds1.Label="Volume";
ds1.ValueBinding = new Binding("Volume");
ds1.ItemsSource = SalesList;
_chartdata.Children.Add(ds1);
_chartdata.ItemNameBinding = new Binding("ShipCity");
}
else if (_axisview.CurrentItem.ToString() == "ProductDiscount")
{
_chartdata.Children.Clear();
DataSeries ds1 = new DataSeries();
ds1.Label = "Discount";
ds1.ValueBinding = new Binding("Discount");
ds1.ItemsSource = SalesList;
_chartdata.Children.Add(ds1);
_chartdata.ItemNameBinding = new Binding("Product");
}
else if (_axisview.CurrentItem.ToString() == "VolumeTotal")
{
_chartdata.Children.Clear();
DataSeries ds1 = new DataSeries();
ds1.Label = "Volume";
ds1.ValueBinding = new Binding("Volume");
ds1.ItemsSource = SalesList;
DataSeries ds2 = new DataSeries();
ds2.Label = "Variance";
ds2.ValueBinding = new Binding("Variance");
ds2.ItemsSource = SalesList;
_chartdata.Children.Add(ds1);
_chartdata.Children.Add(ds2);
_chartdata.ItemNameBinding = new Binding("Product");
}
}
#endregion
}

檢查上述代碼。有一個LoadData方法，可以導入數據到ObservableCollection"Sales"SalesList。這是一個ObservableCollection"string" _axisvalues集合，暴露了在運行時要用的dataseries。我們需要在構造器里，添加變量值到這個集合。另外，ChartDataView屬性是ChartData類型。在構造器我們需要創建兩個序列然后添加到ChartData。

現在當序列從ChartData添加或刪除的時，我們需要_axisview_CurrentChanged事件。_axisview是 _axisvalues的collectionview 。在這個事件里，檢查當前的選擇和添加一個序列到chartdata。于是，我們需要綁定C1chart的Data屬性到viewmodel的ChartDataView。因此，如下是在應用程序里的基本UI XAML代碼：

<Window x:Class="C1ChartinMVVMPart2.MainWindow"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="336" Width="790" xmlns:c1chart="//schemas.componentone.com/xaml/c1chart">
<Grid x:Name="LayoutRoot" >
<c1chart:C1Chart Height="276" HorizontalAlignment="Left" Margin="153,9,0,0" Name="c1Chart1" VerticalAlignment="Top" Width="603" Data="{Binding ChartDataView}" Theme="{DynamicResource {ComponentResourceKey ResourceId=Vista, TypeInTargetAssembly=c1chart:C1Chart}}">
<c1chart:C1ChartLegend DockPanel.Dock="Right" />
</c1chart:C1Chart>
<ListBox Height="100" ItemsSource="{Binding AxisView}" HorizontalAlignment="Left" Margin="27,98,0,0" Name="listBox1" VerticalAlignment="Top" Width="120" Background="{Binding ElementName=c1Chart1,Path=Background}"/>
</Grid>
</Window>

將AXisView collectionview暴露給ListBox。這個Listbox就能展示所有可用的數據序列，然后將相關的數據序列畫在C1chart中。添加如下代碼在Application的startup事件中。

MainWindow win = new MainWindow();
C1ChartinMVVMPart2.ViewModel.ChartViewModel vm = new ViewModel.ChartViewModel();
win.LayoutRoot.DataContext = vm;
win.Show();

運行程序就能看到行為，如下是本文的Demo：

PS: 關于ComponentOne，這些產品你可以關注>>

本文轉載自

葡萄城經典UI產品新年大促，驚喜折扣禮品送不停！優惠詳情點擊查看>>

新年新禧新氣象，送禮送福送優惠！優惠詳情點擊查看>>