<ComponentOne Studio for WPF下載>

當(dāng)C1Chart在MVVM框架下應(yīng)用的時(shí)候，有的時(shí)候圖表不可能知道屬性，到runtime才能binding。例如，C1Chart的DataSeries的ValueBinding只能在runtime設(shè)置。本文就來(lái)介紹對(duì)于MVVM模式下，C1Chart for WPF的動(dòng)態(tài)軸綁定。

下面是詳細(xì)的步驟：首先，創(chuàng)建新的WPF應(yīng)用，添加下面的Sales類(lèi)到工程。

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
}

其次，創(chuàng)建ViewModeBase類(lèi)。我們會(huì)定義ChartViewModel類(lèi)繼承自它。

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));
}
}
}

創(chuàng)建自定義的ChartViewModel類(lèi)

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
}

在這個(gè)類(lèi)里，創(chuàng)建SalesList集合和導(dǎo)入數(shù)據(jù)。AxisView集合將提供不同的展示的chart series。在這個(gè)片段他們是";SaleValue",Volume和"ItemVariance"。

下面我們創(chuàng)建ModelDataSeries類(lèi)繼承與C1Chart dataseries，設(shè)計(jì)在run time實(shí)際綁定的屬性。如下的類(lèi)創(chuàng)建了ValueNameProperty dependency property來(lái)綁定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();
}
}

添加相關(guān)控件

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

ItemsSource="{Binding AxisView}"

設(shè)置圖表的datacontext如下：

DataContext="{Binding}"

給Sales類(lèi)的Product域設(shè)置ChartData ItemNameBinding：

DataContext="{Binding}"

現(xiàn)在我們需要添加series到圖表。我們將添加ModelDataSeries如下：

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

以上是我們需要做的。詳細(xì)的可以參考如下完成的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>

最后我們?cè)O(shè)置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();
}

運(yùn)行示例，然后從listbox選擇不同的視圖，圖表就會(huì)展示相應(yīng)的視圖。

本文示例： 

PS: 關(guān)于ComponentOne，這些產(chǎn)品你可以關(guān)注>>

本文轉(zhuǎn)載自

葡萄城經(jīng)典UI產(chǎn)品惠風(fēng)迎春，驚喜折扣禮品送不停！優(yōu)惠詳情點(diǎn)擊查看>>

強(qiáng)大工具Qt新版發(fā)布，慧都助力——解決方案大放送！優(yōu)惠詳情點(diǎn)擊查看>>