如何在WPF中绘制功能图？

Question

我是一个简单的家庭主妇,我喜欢为我没有动力的女儿绘制多项式函数.我在WPF中创建了一个网格,在一个单元格中我想绘制一个简单多项式的图形.在这个单元格中,我使用一个视图框,在视图框中使用一个画布.

例如f(x)=3x²

我想在x方向上使用-10到10的坐标,在y方向上使用0到300的坐标.有人可以告诉我缩放图形的方法(画布,视图？).

Answer 1

这可能略微超出要求,因为它显示了一些技术,但所示的技术之一是采用在运行时计算的波形,并以某种图形形式显示:WPF数据绑定:谐波系列可视化

这里显示的技术涉及自定义值转换器,其包括指定比例和偏移的能力.

如果我今天再次编写该代码,我可能会将该功能放入ViewModel而不是值转换器,但这不会有太大变化.

Answer 2

这是一个非常古老的问题，但我发现它仍然很有趣。

这可以在 WPF 中完成，最好借助库（例如 OxyPlot）的帮助。它拥有 MIT 许可证，由于这种灵活的许可证，可以在许多项目中使用。

首先，将这两个 Nuget 包添加到 WPF 应用程序的项目文件中：

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

例如，在 MainWindow.xaml 的 XAML 中添加以下标记，这是一个简约的示例：

<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>

我们在代码隐藏中还有一些代码。当然，我们可以在这里更多地坚持 MVVM 模式，但我保持简单。

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;               
        }
    }
}

运行此代码，我们得到函数 f(x) = 3*x^2 的图，如您所述。我已经检查过谷歌内置的绘图功能，看起来还不错。

可能还有更多的库，包括非商业和商业库，它们都具有用于绘制图表的更高级功能，但您的简陋场景 - 我想 Oxyplot 应该足以用于演示用途。它还具有一个很好的功能，可以在您沿着图表跟踪 X 和 Y 轴值时显示该值。