<ComponentOne Studio for WPF下載>

當C1Chart在MVVM框架下應用的時候，有的時候圖表不可能知道屬性，到runtime才能binding。例如，C1Chart的DataSeries的ValueBinding只能在runtime設置。本文就來介紹對于MVVM模式下，C1Chart for WPF的動態軸綁定。

下面是詳細的步驟：首先，創建新的WPF應用，添加下面的Sales類到工程。

public class Sales:INotifyPropertyChanged
{
public Sales(string product,double salevalue,double volume)
{
_product = product;
_salevalue = salevalue;
_volume = volume;
_itemvariance = (_volume /_salevalue)*100;
}
#region privateFields
string _product;
double _salevalue;
double _volume;
double _itemvariance;
#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 ItemVariance
{
get {return _itemvariance; }

}
#endregion
#region INotifyPropertyChanged Members

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

其次，創建ViewModeBase類。我們會定義ChartViewModel類繼承自它。

public class ViewModelBase:INotifyPropertyChanged
{
#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

#endregion
public ViewModelBase()
{
}
protected void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}

創建自定義的ChartViewModel類

public class ChartViewModel:ViewModelBase
{
#region Ctor..
public ChartViewModel()
{
_saleslist = new ObservableCollection<Sales>();
LoadData();
_axisvalues = new ObservableCollection<string>();
PropertyInfo[] pi = typeof(Sales).GetProperties();
//add the properties of Sales class as axis value collection

foreach (PropertyInfo p in pi)
{
if (p.Name == "Product")
{
}
else
{
_axisvalues.Add(p.Name);
}
}
_axisview = new CollectionView(_axisvalues);

}
#endregion
#region private Fields
ObservableCollection<Sales> _saleslist;
ObservableCollection<string> _axisvalues;
CollectionView _axisview;

#endregion
#region publicProperties
public ObservableCollection<Sales> SalesList
{
get { return _saleslist; }
set { _saleslist = value; }
}

public CollectionView AxisView
{
get { return _axisview; }
set { _axisview = value; OnPropertyChanged("AxisView"); }
}
#endregion
#region privateMethods
void LoadData()
{
_saleslist.Add(new Sales("Confectionaries", 2500.00,3000.00));
_saleslist.Add(new Sales("Plastics", 3500.00,7200.00));
_saleslist.Add(new Sales("Electronics", 7500.00,8000.00));
_saleslist.Add(new Sales("Produces", 800.00,1000.00));
_saleslist.Add(new Sales("Machinary", 18000.00, 11000.00));
}

#endregion
}

在這個類里，創建SalesList集合和導入數據。AxisView集合將提供不同的展示的chart series。在這個片段他們是";SaleValue",Volume和"ItemVariance"。

下面我們創建ModelDataSeries類繼承與C1Chart dataseries，設計在run time實際綁定的屬性。如下的類創建了ValueNameProperty dependency property來綁定chart series。

public class ModelDataSeries : DataSeries
{
public string ValueName
{
get { return (string)GetValue(ValueNameProperty); }
set { SetValue(ValueNameProperty, value); }
}

public static readonly DependencyProperty ValueNameProperty =
DependencyProperty.Register("ValueName", typeof(string), typeof(ModelDataSeries), new UIPropertyMetadata(OnValueNameChanged));

static void OnValueNameChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
var ds = (ModelDataSeries)obj;
if (string.IsNullOrEmpty(ds.ValueName))
ds.ValueBinding = null;
else
ds.ValueBinding = new Binding(ds.ValueName);
ds.Invalidate();
}
}

添加相關控件

這時拖一個C1Chart和listbox到MainWindow。添加ViewMode的命名空間：xmlns:local="clr-namespace:DynamicAxisBinding"，給AxisView設置IListBox的temSource屬性，如下是XAML：

ItemsSource="{Binding AxisView}"

設置圖表的datacontext如下：

DataContext="{Binding}"

給Sales類的Product域設置ChartData ItemNameBinding：

DataContext="{Binding}"

現在我們需要添加series到圖表。我們將添加ModelDataSeries如下：

<local:ModelDataSeries ValueName="{Binding AxisView.CurrentItem}" Label="{Binding AxisView.CurrentItem}"/>.

以上是我們需要做的。詳細的可以參考如下完成的XAML代碼：

<Window x:Class="DynamicAxisBinding.MainWindow"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DynamicAxisBinding"
Title="Chart View" Height="350" Width="782" xmlns:c1chart="//schemas.componentone.com/xaml/c1chart">
<Grid>
<ListBox Height="100" HorizontalAlignment="Left" Margin="0,73,0,0" Name="listBox1" VerticalAlignment="Top" Width="120" ItemsSource="{Binding AxisView}" />
<c1chart:C1Chart Height="264" HorizontalAlignment="Left" Margin="135,27,0,0" Name="c1Chart1" VerticalAlignment="Top" Width="613" Theme="{DynamicResource {ComponentResourceKey ResourceId=Office2007Blue, TypeInTargetAssembly=c1chart:C1Chart}}">
<c1chart:C1Chart.Data>
<c1chart:ChartData DataContext="{Binding}" ItemsSource="{Binding SalesList}" ItemNameBinding="{Binding Product}" >
<local:ModelDataSeries ValueName="{Binding AxisView.CurrentItem}" Label="{Binding AxisView.CurrentItem}"/>
</c1chart:ChartData>
</c1chart:C1Chart.Data>
<c1chart:C1ChartLegend DockPanel.Dock="Right" />
</c1chart:C1Chart>
</Grid>
</Window>

最后我們設置MainWindow的DataContext。 在Sppp.cs的Application_startup事件添加如下代碼：

private void Application_Startup(object sender, StartupEventArgs e)
{
DynamicAxisBinding.ViewModel.ChartViewModel vm = new ViewModel.ChartViewModel();
MainWindow _win = new MainWindow();
_win.DataContext = vm;
_win.Show();
}

運行示例，然后從listbox選擇不同的視圖，圖表就會展示相應的視圖。

本文示例： 

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

本文轉載自

葡萄城經典UI產品惠風迎春，驚喜折扣禮品送不停！優惠詳情點擊查看>>

強大工具Qt新版發布，慧都助力——解決方案大放送！優惠詳情點擊查看>>