Click here to Skip to main content
13,446,005 members (38,223 online)
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 25 Aug 2010

Drawing Trig Functions via WPF

, 26 Aug 2010
Rate this:
Please Sign up or sign in to vote.
An article that demonstrates how to write C# to draw via the WPF engine


Anyone who has ever seen a sine wave and/or a cosine wave will have noticed that both of the curvilinear graphs are drawn on a Cartesian Coordinate (world) system. The origin (0,0) lies in the middle of the graph, as the graphs have a period of 2PI or a width of –PI to +PI. Unlike that system, however, is the X and Y coordinate system of the console terminal: the origin (0,0) resides at the upper left hand corner, which on many older terminals is the location of the VGA buffer. For 2D graphics, the WPF coordinate system locates the origin in the upper-left corner of the rendering area. In the 2D space, the positive X-axis points to the right, and the positive Y-axis points to downward. All coordinates and sizes in the default WPF system are measured in units of 96 dots per inch (DPI), called device-independent pixels. In this system, you can create adaptive layouts to deal with different resolutions, making sure your controls and graphics objects stretch accordingly when the window is stretched. So how would code ensure that we can draw a sine wave and/or a cosine wave?

A key step to creating this line chart is that the original data points in the world coordinate system need to be transformed into points in the units of device independent pixels. Therefore we must write a method that converts points with any unit in the world coordinate system into points with a unit of device-independent pixel in the device coordinate system. So how would the code look? It would have a method accessed in a code-behind file that compiles as a DLL. We'll call the method CurvePoint, and note its access modifiers as private and static:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace MyProject
    public partial class SimpleLineChart : 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()

          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);
                     new Point(x, y)));
              // 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);
                   new Point(x, y)));
        private Point CurvePoint(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;

Here is how the application looks when built using Expression Blend 4:


Admittedly, this drawing does not have enough any meaning to one who doesn't have a need for Trigonometry, but it does show how code can work in WPF to create objects without a lot of XAML.

Where is the XAML

The XAML is simple enough:





Title="Simple Line Chart" 

Width="640" Height="480"> 
<Viewbox Stretch="Fill"> 
<Border BorderBrush="Black" BorderThickness="1" Margin="5"> 
<Canvas Name="chartCanvas" 

Width="250" Height="200" ClipToBounds="True"/> 

This article has been referenced from the work of Jack Xu.


  • 26th August, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer Monroe Community
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

Questionhello a question please Pin
lagartus27-Jul-12 15:49
memberlagartus27-Jul-12 15:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180314.2 | Last Updated 26 Aug 2010
Article Copyright 2010 by logicchild
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid