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

I hope you have some knowledge of WPF and XAML before starting.

To know more about MVVM using Prism, follow.

Before starting, I hope you added the ‘Prism.Unity’ from ‘NuGet Packages’ and for the chart, we will do the same for thr chart 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 chart controls, type ‘System.Windows.Controls.DataVisualization‘ in browse section, select that package and click on install button.



After successfully installing the package, the screenshot is given below..



Now, you can see the newly added DLL's in the reference section of the project.



Step 4

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



Step 5

Create pages in all the 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’.

1. Create a class for chart binding with the key and value properties for axis-X and Y.
   

   classKeyvalue BindableBase {
       privatestring _Key;
       publicstring Key {
           get {
               return _Key;
           }
           set {
               SetProperty(ref _Key, value);
           }
       }
       privateint _Value;
       publicint Value {
           get {
               return _Value;
           }
           set {
               SetProperty(ref _Value, value);
           }
       }
   }

2. Create a list type property named DataListto to store multiple values of keyvalue class.
   

   classTestModel BindableBase {
       privateList < Keyvalue > _DataList;
       publicList < Keyvalue > DataList {
           get {
               return _DataList;
           }
           set {
               SetProperty(ref _DataList, value);
           }
       }
   }

   
   

Step 7

On the TetsView page, we do as shown below.

1. Access the assembly of the chart on the top of the view.
   

   xmlnsChartToolKit="clr-namespaceSystem.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

2. Create two GroupBoxes with different header names for the static and dynamic chart respectively, where the first will contain a chart with a column series with an itemsource ,IndependentvaluePath and DependentvaluePath property.
   
   Note
   
   Here, Itemsource property is binded with ‘DataList’ property, which we have created in TestModel class and for IndependentvaluePath&DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue class.
   
   
3. The second groupbox didn’t contain anything, as it just has a name.
   

   <Grid>
       <Grid.RowDefinitions>
           <RowDefinition></RowDefinition>
           <RowDefinition></RowDefinition>
       </Grid.RowDefinitions>
       <GroupBoxGrid.Row="0" Header="Static Column Chart">
           <ChartToolKitChart>
               <ChartToolKitColumnSeriesItemsSource="{Binding Path=TestModel.DataList,
   UpdateSourceTrigger=PropertyChanged,Mode=TwoWay,NotifyOnSourceUpdated=True }" IndependentValuePath="Key" DependentValuePath="Value">
                   </ChartToolKitColumnSeries>
           </ChartToolKitChart>
           </GroupBox>
           <GroupBoxGrid.Row="1" Header="Dynamic Column Chart" xName="GroupBoxDynamicChart">
               </GroupBox>
   </Grid>

   
   

Step 8

Add PrismMVVMTestProject.ViewModels namespace and bind DataContext of TestView page to the ViewModel named ‘TestViewModel’.and pass the 2ndgroupbox into it.

usingSystem.Windows;
usingPrismMVVMTestProject.ViewModels;
namespacePrismMVVMTestProject.Views {
    ///<summary>
    /// Interaction logic for TestView.xaml
    ///</summary>
    publicpartialclassTestView Window {
        publicTestView() {
            InitializeComponent();
            this.DataContext = newTestViewModel(GroupBoxDynamicChart);
        }
    }
}

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 classnamed ‘tempList’ and add some data into it.
   

   List < Keyvalue > tempList = newList < Keyvalue > ();
   tempList.Add(newKeyvalue() {
       Key = "Rs.100", Value = 50
   });
   tempList.Add(newKeyvalue() {
       Key = "Rs.500", Value = 18
   });
   tempList.Add(newKeyvalue() {
       Key = "Rs.1000", Value = 25
   });
   tempList.Add(newKeyvalue() {
       Key = "Rs.2000", Value = 5
   });

4. Assign ‘tempList’ to ‘TestModel.DataList’ to bind the static chart.
   

   //Bind the sttaic Chart
   TestModel.DataList = tempList;

5. Create the dynamic chart and column series.
   
6. Bind the item source of the column series with ‘tempList’.
   
7. To bind the IndependentvaluePath&DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue class, which is similar as in Static chart.
   
8. Add the series in to the chart and chart into the groupbox. 
   

   //Create the Dynamic Chart, Bind it and add it into the 2nd GroupBox
   ChartdynamicChart = newChart();
   ColumnSeriescolumnseries = newColumnSeries();
   columnseries.ItemsSource = tempList;
   columnseries.DependentValuePath = "Value";
   columnseries.IndependentValuePath = "Key";
   dynamicChart.Series.Add(columnseries);
   GroupBoxDynamicChart.Content = dynamicChart;

   
   

Run the page and see the output.