WPF作图神器Interactive DataDisplay的初步使用

news2024/11/16 3:18:42

文章目录

- 安装
- 初步使用

安装

Interactive DataDisplay是一款比较优秀的C#绘图控件，尽管与一些商业控件还有不小的差距，关键是开源免费轻量。

在VS中安装控件十分简单，本测试基于Net Core5.0，在VS的菜单栏->工具->NuGet包管理器->管理解决方案的NuGet程序包->在浏览选项卡的搜索框里输入Interactive DataDisplay，找到InteractiveDataDisplay.NetCore.WPF，然后安装。

这个名太长了，后文简称IDD包。

初步使用

首先在xaml文件的最顶层标签中加入IDD的引用，一般写为
xmlns:d3="clr-namespace:InteractiveDataDisplay.WPF;assembly=InteractiveDataDisplay.WPF", 例如在主窗口的xaml文件中引用，其添加位置为

<Window x:Class="winTools.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
...
xmlns:d3="clr-namespace:InteractiveDataDisplay.WPF;assembly=InteractiveDataDisplay.WPF"
Title="myTest" Height="450" Width="800">

调用时可以写为

<d3:Chart Height="300" Width="600" Margin="10" x:Name="chartData">
    <d3:LineGraph x:Name="lineNowData" Stroke="Blue" StrokeThickness="1"/>
</d3:Chart>

其中，d3:Chart表示创建一个图表控件；d3:LineGraph表示在图表控件中添加一个曲线图。Stroke表示曲线的颜色，StrokeThickness表示曲线的粗细。

接下来在后端的.cs文件中写入数据，下面的x是一个从0到10，间隔为0.1的数组，y是sin(x)。

void initGraph()
{
   var x = Enumerable.Range(0, 100).Select(i => i / 10.0).ToArray();
   var y = x.Select(i =>Math.Sin(i)).ToArray();
   lineNowData.Plot(x, y);
}

使之在窗口初始化的时候加载，就可以得到如图所示的图像

在这里插入图片描述

通过RenderTargetBitmap可以对图像进行保存：新建一个按钮，挂载Click函数，定义如下

private void btnSave_Click(object sender, RoutedEventArgs e)
{
   var width = chartData.Width + 10;
   var height = chartData.Height + 10;
   RenderTargetBitmap bmp = new RenderTargetBitmap((int)width, (int)height, 96, 96, PixelFormats.Pbgra32);
   bmp.Render(chartData);
   var encoder = new PngBitmapEncoder();
   encoder.Frames.Add(BitmapFrame.Create(bmp));
   using Stream stm = File.Create(@"E:\Pictures\testIDD.png");
   encoder.Save(stm);
}