Creating Column Chart In Universal Application Development With XAML And C#

Before reading this article, please go through the article's link, given below-

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

Reading this article, you can learn how to create column chart in Universal Windows apps development with XAML and Visual C#.

The following important tools are required for developing UWP-

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step 1- Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (ColumnUWP)->OK. Choose the Target and minimum platform version for your Windows Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.

Blank App

Step 2- Open (double click) the file MainPage.xaml in the Solution Explorer and add the WINRT XAML Tool Kit Control reference in the project.

For adding the reference, right click on your project (ColumnUWP) and select Manage NuGet Packages.

Reference

Choose Browse and search WinRTXamlToolkit.Controls.DataVisualization.UWP, select the package and install it.

WinRTXamlToolkit

Add TextBlock control, change the name and text property.

TextBlock

Step 3 - Add the charting namespace and Line series control code in the XAML View.

Line series control

Step 4 - Add the name space, given below and class in MainPage.xaml.cs.

code

Step 5- Add the Method GetChartData() in MainPage.xaml.cs. This code is used for setting the values for your ColumnChart and call the GetChartData() method in the constructor method (MainPage() method) in MainPage.xaml.cs.

Method

Step 6 - Deploy your app in Local Machine and the output of the ColumnUWP app is given below-

Deploy

Summary

Now, you have successfully created and tested the column chart in Visual C# - UWP environment.