For my 3rd year SEP project my supervisor want me to add mathematical graphs for the Question Generating System. So I was looking for WPF libraries. I found several libraries for graphing but there was no proper documentation. Finally I found a book about WPF graphing called “practical WPF graphs and graphics” by Jack Xu. So I could easily draw graphs inside application. So I am going to put an article about how to draw a graph inside a WPF application.

It is easy to create a 2D X-Y line chart in WPF. Let’s use an example to illustrate the procedure. Start with
a new WPF Windows project and name it LineCharts. Add a new WPF Window to the project and name it
SimpleLineChart. I’ll create the user interface and layout using XAML and perform the computations
and generate the data in code. The XAML file for this example is very simple:


<Window x:Class="LineCharts.SimpleLineChart"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Simple Line Chart" Height="300" Width="300">

<Grid Margin="0" x:Name ="chartGrid" ClipToBounds="True"

Background="Transparent" SizeChanged="chartGrid_SizeChanged">

<Border HorizontalAlignment="Center" VerticalAlignment="Center"

BorderBrush="Gray" BorderThickness="1"

Background="White" Margin="0">

<Canvas Margin="0" x:Name ="chartCanvas" ClipToBounds="True"

Background="Transparent"/>

</Border>

</Grid>

</Window> Here I implement a resizable Canvas element, chartCanvas, on which we want to create the
simple line chart. Here is the corresponding code-behind file, which creates the line chart, for this
example:
using System;

using System.Collections.Generic;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Shapes;

namespace LineCharts

{

public partial class SimpleLineChart : System.Windows.Window

{

private double xmin = 0;

private double xmax = 6.5;

private double ymin = -1.1;

private double ymax = 1.1;

private Polyline pl;

public SimpleLineChart()

{

InitializeComponent();

}

private void AddChart()

{

// Draw sine curve:

pl = new Polyline();

pl.Stroke = Brushes.Black;

for (int i = 0; i < 70; i++)

{

double x = i/5.0;

double y = Math.Sin(x);

pl.Points.Add(NormalizePoint(new Point(x, y)));

}

chartCanvas.Children.Add(pl);

// Draw cosine curve:

pl = new Polyline();

pl.Stroke = Brushes.Black;

pl.StrokeDashArray = new DoubleCollection(new double[] { 4, 3 });

for (int i = 0; i < 70; i++)

{

double x = i / 5.0;

double y = Math.Cos(x);

pl.Points.Add(NormalizePoint(new Point(x, y)));

}

chartCanvas.Children.Add(pl);

}

private Point NormalizePoint(Point pt)

{

Point result = new Point();

result.X = (pt.X - xmin) * chartCanvas.Width / (xmax - xmin);

result.Y = chartCanvas.Height –

(pt.Y - ymin) * chartCanvas.Height / (ymax - ymin);

return result;

}

private void chartGrid_SizeChanged(object sender, SizeChangedEventArgs e)

{

chartCanvas.Width = chartGrid.ActualWidth;

chartCanvas.Height = chartGrid.ActualHeight;

chartCanvas.Children.Clear();

AddChart();

}

}

}