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?).
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.
