Post
Ask Question

Static And Dynamic Area Chart In WPF With MVVM Pattern Using Prism Library

I assume that you have some knowledge of WPF and XAML.  To know more about MVVM using Prism, follow- http://www.c-sharpcorner.com/article/getting-started-mvvm-pattern-using-prism-library-in-wpf/.

Before starting, I hope you have added the ‘Prism.Unity’ from ‘NuGet Packages’. We will do the same with charting controls package.

Note - In this article, I am using Visual Studio 2015.

Step 1

Create a project named ‘PrismMVVMTestProject’ of WPF application.


Step 2

Right click on project and select ‘Manage NuGet Packages…’


Step 3

For Charting controls, type ‘System.Windows.Controls.DataVisualization ‘ in browse section, select that package, and click on "Install" button.


After successfully installing the package, you will see the following screen.


Now, you can see the newly added dlls in reference section of the project.


Step 4

It’s a better approach to create three different folders in the project for Models, Views, and View Models respectively.


Step 5

Create pages in all folders.

  1. Create a View named ‘TestView.xaml’ in the Views folder.



  2. Create a Model named ‘TestModel.xaml’ in the Models folder.



  3. Create a ViewModel named ‘TestViewModel.xaml’ in the ViewModels folder.


Step 6

Add the namespace named ‘Prism.MVVM’ in the TestModel page to inherit the class named ‘Bindable Base’.

Create a class for chart binding with key and value properties for Axis- X and Y.
  1. class Keyvalue : BindableBase  
  2.     {  
  3.         private string _Key;  
  4.         public string Key { get { return _Key; } set { SetProperty(ref _Key, value); } }  
  5.   
  6.         private int _Value;  
  7.         public int Value { get { return _Value; } set { SetProperty(ref _Value, value); } }  
  8.     }   
Create a list type property named DataList to store multiple values of keyvalue class.
  1. class TestModel : BindableBase  
  2.     {  
  3.         private List<Keyvalue> _DataList;  
  4.         public List<Keyvalue> DataList { get { return _DataList; } set { SetProperty(ref _DataList, value); } }  
  5.     }  

Step 7

On the TetsView page, we -

Access the assembly of charting on the top of the view .

  1. xmlns:ChartToolKit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"  

Create 2 Group boxes with different header names for static and dynamic chart respectively. The first header will contain a chart with an area series with item source, IndependentvaluePath and DependentvaluePath property.

Note

Here, Itemsource property is bound with ‘DataList’ property which we have created in TestModel class and for IndependentvaluePath & DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue Class.

The second group box didn’t contain anything but a name.
  1. <Grid>  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition></RowDefinition>  
  4.         <RowDefinition></RowDefinition>  
  5.     </Grid.RowDefinitions>  
  6.     <GroupBox Grid.Row="0" Header="Static Area Chart">  
  7.         <ChartToolKit:Chart>  
  8.             <ChartToolKit:AreaSeries ItemsSource="{Binding Path=TestModel.DataList,  
  9.             UpdateSourceTrigger=PropertyChanged,Mode=TwoWay, NotifyOnSourceUpdated=True }"   
  10.             IndependentValuePath="Key"  
  11.             DependentValuePath="Value">  
  12.             </ChartToolKit:AreaSeries>  
  13.         </ChartToolKit:Chart>  
  14.     </GroupBox>  
  15.         <GroupBox  Grid.Row="1" Header="Dynamic Area Chart" x:Name="GroupBoxDynamicChart">  
  16.     </GroupBox>  
  17. </Grid>  

Step 8

Add PrismMVVMTestProject.ViewModels namespace and bind the data context of TestView page to the ViewModel named ‘TestViewModel’. Then, pass the 2nd groupbox into it.

  1. using System.Windows;  
  2. using PrismMVVMTestProject.ViewModels;  
  3. namespace PrismMVVMTestProject.Views  
  4. {  
  5.     /// <summary>  
  6.     /// Interaction logic for TestView.xaml  
  7.     /// </summary>  
  8.     public partial class TestView : Window  
  9.     {  
  10.         public TestView()  
  11.         {  
  12.             InitializeComponent();  
  13.             this.DataContext = new TestViewModel(GroupBoxDynamicChart);  
  14.         }  
  15.     }  
  16. }  

Step 9

  1. Add the namespace named ‘Prism.MVVM’ and ‘PrismMVVMTestProject.Models’ in the TestViewModel page to inherit the class named ‘Bindable Base’ and accessing TestModel in this page.
  2. Create a property of TestModel class object where ‘ref‘ parameter allows you to update its value.
  3. Create a local list of Keyvalue class named ‘tempList’ and add some data into it.
    1. List<Keyvalue> tempList = new List<Keyvalue>();  
    2. tempList.Add(new Keyvalue() { Key = "Rs.100", Value = 50 });  
    3. tempList.Add(new Keyvalue() { Key = "Rs.500", Value = 18 });  
    4. tempList.Add(new Keyvalue() { Key = "Rs.1000", Value = 25 });  
    5. tempList.Add(new Keyvalue() { Key = "Rs.2000", Value = 5 });  
  4. Assign ‘tempList’ to ‘TestModel.DataList’ to bind the static chart.
    1. //Bind the sttaic Chart  
    2. TestModel.DataList = tempList;  
  5. Create the dynamic chart and area series.
  6. Bind the item source of area series with ‘tempList’.
  7. To bind the IndependentvaluePath & DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue Class same as in static chart.
  8. Add the area series into the chart and chart into the groupbox.
    1. //Create the Dynamic Chart, Bind it and add it into the 2nd GroupBox  
    2. Chart dynamicChart = new Chart();  
    3. AreaSeries areaseries = new AreaSeries();  
    4. areaseries.ItemsSource = tempList;  
    5. areaseries.DependentValuePath = "Value";  
    6. areaseries.IndependentValuePath = "Key";  
    7. dynamicChart.Series.Add(areaseries);  
    8. GroupBoxDynamicChart.Content = dynamicChart;    

Run the page and see the Output.


Similar Articles