如何在WPF APP (.NET Framework)中实现xy坐标图绘制？

方案1：使用官方DataVisualization图表组件（推荐常规场景使用） #

该组件为微软官方提供，无需引入第三方依赖，完全满足XAML定义布局样式、后台提供数据的需求。

步骤1：添加程序集引用 #

右键你的WPF项目 → 选择「添加」→「引用」→ 左侧切换到「程序集」→「扩展」，找到 System.Windows.Controls.DataVisualization.Toolkit 勾选后确认即可。

步骤2：XAML端定义图表布局 #

在需要放置坐标图的页面添加如下代码，图表的位置、大小、坐标轴规则都可以直接在XAML中配置：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        <!-- 引入图表控件命名空间 -->
        xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        Title="MainWindow" Height="600" Width="900">
    <Grid Margin="20">
        <!-- 定义XY图表的位置、尺寸、坐标轴规则 -->
        <chart:Chart x:Name="XyChart" Title="XY坐标示例" Width="800" Height="450">
            <chart:Chart.Axes>
                <chart:LinearAxis Orientation="X" Title="X轴" Minimum="0" Maximum="100" />
                <chart:LinearAxis Orientation="Y" Title="Y轴" Minimum="0" Maximum="100" />
            </chart:Chart.Axes>
            <!-- 定义折线数据序列，绑定X/Y对应的字段名 -->
            <chart:LineSeries x:Name="DataSeries" 
                              DependentValuePath="Y" 
                              IndependentValuePath="X" 
                              Title="测试数据" />
        </chart:Chart>
    </Grid>
</Window>

步骤3：后台C#代码提供数据 #

using System.Collections.Generic;
using System.Windows;

namespace WpfApp
{
    // 自定义XY数据点模型
    public class DataPoint
    {
        public double X { get; set; }
        public double Y { get; set; }
    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            // 生成/获取业务数据，可替换为你的实际数据源
            var pointList = new List<DataPoint>();
            for (double x = 0; x < 100; x++)
            {
                pointList.Add(new DataPoint 
                { 
                    X = x, 
                    Y = System.Math.Sin(x * 0.1) * 40 + 50 
                });
            }
            // 直接绑定数据源即可，无需手动处理绘制逻辑
            DataSeries.ItemsSource = pointList;
        }
    }
}

方案2：轻量自定义绘制（适合非预定义特殊形状场景） #

如果需要实现完全自定义的非标准坐标图，不需要额外引用程序集，可以用Canvas作为绘制容器，XAML定义画布位置，后台生成绘制元素。

XAML代码： #

<Grid Margin="20">
    <!-- 定义绘制画布的位置、尺寸、背景 -->
    <Canvas x:Name="DrawCanvas" Width="800" Height="450" Background="White"/>
</Grid>

C#后台代码： #

using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            // 坐标映射规则，可根据需求调整
            double xScale = 8; // X轴每单位对应8像素
            double yOrigin = 225; // Y轴原点在画布垂直居中位置
            double yScale = 4; // Y轴每单位对应4像素

            // 你的实际数据源
            var dataPoints = new List<(double X, double Y)>();
            for (double x = 0; x < 100; x += 0.5)
            {
                dataPoints.Add((x, System.Math.Sin(x * 0.1) * 50));
            }

            // 绘制自定义折线，可替换为任意形状（椭圆、路径等）
            var line = new Polyline
            {
                Stroke = Brushes.DodgerBlue,
                StrokeThickness = 2,
                Points = new PointCollection()
            };
            foreach (var p in dataPoints)
            {
                // 转换为画布坐标（WPF Canvas默认Y轴向下为正，需翻转）
                double canvasX = p.X * xScale;
                double canvasY = yOrigin - p.Y * yScale;
                line.Points.Add(new Point(canvasX, canvasY));
            }
            DrawCanvas.Children.Add(line);

            // 可扩展绘制坐标轴、刻度、标注等元素，逻辑同上
        }
    }
}

适用场景说明 #

• 方案1自带折线、散点、柱状等多种图表类型，支持缩放、悬停提示等交互，适合绝大多数常规数据可视化需求
• 方案2灵活度无上限，可实现任意自定义的非预定义坐标图样式，适合特殊定制场景

内容的提问来源于stack exchange，提问作者ttom