C# WPF上位机开发（图形显示软件）

本文介绍: 【声明：版权所有，欢迎转载，请勿用于商业用途。联系信箱：feixiaoxing @163.com】在实际应用中，有一种情况就是，我们需要经常对数据进行图形化显示，这样会比较直观一点。比如经济统计里面的同比、环比显示，pid里面的调参结果显示，传感器数据的实时显示等等，这些内容都是软件开发中很重要的环节。而对c# wpf而言，因为自身有很多开源库的加持，本身用data chart显示特别简单和容易，大家可以好好掌握一下。本次使用地开源库是OxyPlot库，其他的

在实际应用中，有一种情况就是，我们需要经常对数据进行图形化显示，这样会比较直观一点。比如经济统计里面的同比、环比显示，pid里面的调参结果显示，传感器数据的实时显示等等，这些内容都是软件开发中很重要的环节。而对c# wpf而言，因为自身有很多开源库的加持，本身用data chart显示特别简单和容易，大家可以好好掌握一下。

本次使用地开源库是OxyPlot库，其他的库也比较类似，大家可以选择自己熟悉的开发库进行学习和使用。

1、安装OxyPlot库

安装OxyPlot库的方法比较简单，直接打开NuGet程序包，选择下载OxPlot.Core即可。下载完毕之后，我们就会在引用节点下面查看到OxyPlot、OxyPlot.Wpf、OxyPlot.Wpf.Shared这三个库。

2、MainWindow类不做修改

关于数据的内容部分，这里借用了MVVM的思想，本身不需要对MainWindow类做任何的修改。这部分就可以直接忽略过去了。

3、设计界面

界面部分的设计，最最重要的就是创建一个PlotView区域，并且将这个区域和MyModel做一个绑定。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:oxy="http://oxyplot.org/wpf"
        xmlns:local="clr-namespace:WpfApp"
        Title="ChartDemo" Height="400" Width="500">
    <Window.DataContext>
        <local:PlotViewModel/>
    </Window.DataContext>
    <Grid>
        <oxy:PlotView Model="{Binding MyModel}"/>
    </Grid>
</Window>

4、创建PlotViewModel.cs文件

细心的同学可能发现，在xaml文件中也出现了PlotViewModel的身影，这就是它将来需要bind的class。在PlotViewModel当中会有一个PlotModel的变量，就是MyModel。我们在PlotView上面生成的任何图像都是用MyModel来生成的。

当然，这里的内容不太多，目前为止我们显示的内容还只是一个正弦曲线和一个余弦曲线。因为它本身也是作为一个抛砖引玉的目的存在的。大家如果后续需要掌握更多的显示方法，可以参考OxyPlot的官网，寻找更多的demo code。

using System;
using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;

namespace WpfApp
{
    public class PlotViewModel
    {
        public PlotModel MyModel { get; private set; }

        public PlotViewModel()
        {
            this.MyModel = new PlotModel { Title = "Sin/Cos Graph" };

            MyModel.Series.Add(new FunctionSeries(Math.Cos, -10, 10, 0.1, "cos(x)"));
            MyModel.Series.Add(new FunctionSeries(Math.Sin, -10, 10, 0.1, "sin(x)"));
        }
    }
}

5、显示和测试

所有一切都准备好了之后，就可以开始显示了。编译无误之后，直接单击启动。不出意外的话，我们应该可以看到如下所示的画面，这基本代表我们已经可以把OxyPlot正常用起来了。当然大家如果本身不喜欢使用库，用canvas直接画图的话，这也是可以的。只要是效果做出来，达到自己的设计目的和使用要求就可以了，不必拘泥于形式。