How to draw a function plot in WPF?

Question

I am a simple housewife and I like to plot a polynomial function for my unmotivated daughter. I have made a grid in WPF, in one cell I want to draw the graph of a simple polynom. In this cell I use a viewbox and inside the viewbox a canvas.

For example f(x)= 3x²

I would like to use coordinates from -10 to 10 in x direction and 0 to 300 in y direction. Can somebody tell me the way to scale the graphic (canvas, viewbox?).

Answer 1

This is a very old question, but I found it interesting still.

This can be done in WPF preferably with the help of a library, like for example OxyPlot. It has a MIT license and could be used in many projects due to this flexible license.

First off, add these two Nuget packages in the project file of your WPF application:

   <ItemGroup>
    <PackageReference Include="OxyPlot.Core" Version="2.1.0" />
    <PackageReference Include="OxyPlot.Wpf" Version="2.1.0" />
  </ItemGroup>

Add the following markup next in XAML of MainWindow.xaml for example and this is a minimalistic example:

<Window x:Class="OxyplotGraph.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:oxy="http://oxyplot.org/wpf"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:OxyplotGraph"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <oxy:PlotView x:Name="PlotView" Grid.Row="0" Grid.Column="0"  Model="{Binding GraphModel}">
        </oxy:PlotView>
    </Grid>
</Window>

We have also some code in the code-behind. We could of course stick more to MVVM pattern here but I kept it simple.

using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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.Navigation;
using System.Windows.Shapes;

namespace OxyplotGraph
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            GraphModel = CreatePlotModel();

            this.DataContext = this;
            
        }

        public PlotModel GraphModel { get; set; }

        private PlotModel CreatePlotModel()
        {
            var plotModel = new PlotModel();
            var verticalAxis = new LinearAxis { Position = AxisPosition.Left, Minimum = -10, Maximum = 10 };
            plotModel.Series.Add(new FunctionSeries(x => 3*x*x, -10, 10, 0.1));
            return plotModel;               
        }
    }
}

Running this code, we get the plot of the function f(x) = 3*x^2 as you stated. I have checked it againt the Google built in plot function and it looks okay.

There are probably many more libs out there, both non-commercial and commercial ones which got even more advanced features for plotting graphs, but your humble scenario - I guess Oxyplot should suffice for demonstration uses. It also got a nice function of showing the value as you track along the graph for the X and Y axis values.