使用 ObservableCollection 的动态数据显示

Question

我不知道如何使用 ObservableCollection 显示一些点。这是我的代码：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    Title="MainWindow" Height="350" Width="525">

<Grid>

    <d3:ChartPlotter x:Name="Plotter" Margin="100,5,0,0">
        <d3:LineGraph />
    </d3:ChartPlotter>

    <Button x:Name="button"
            Content="Load Graph"
            HorizontalAlignment="Left"
            Margin="10,35,0,0"
            VerticalAlignment="Top"
            Width="70"
            Height="45" Click="button_Click"/>

</Grid>

public partial class MainWindow : Window
{
    public ObservableCollection<Point> Data { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        Data = new ObservableCollection<Point>();
        Plotter.DataContext = this;
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        double[] my_array = new double[10];

        for (int i = 0; i < my_array.Length; i++)
        {
            my_array[i] = Math.Sin(i);
            Data.Add(new Point(i, my_array[i]));
        }
    }
}

谁能告诉我怎么做？可能我必须在 XAML 中添加一些东西，比如 ItemsSource="Data" 但我找不到那个。谢谢。

Answer 1

我不知道 XAML 中声明的命名空间:

xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"

但我可以添加一些建议。确保 class 点将坐标值 X 和 Y 公开为 public 属性。之后，必须确保ChartPlotter控件支持XAML绑定。

Answer 2

使用Plotter.AddLineGraph(Data);:

using Microsoft.Research.DynamicDataDisplay;
using Microsoft.Research.DynamicDataDisplay.DataSources;     

private void button_Click(object sender, RoutedEventArgs e)
            {
                double[] my_array = new double[10];

                for (int i = 0; i < my_array.Length; i++)
                {
                    my_array[i] = Math.Sin(i);
                    Data.Collection.Add(new Point(i, my_array[i]));
                }
                Plotter.AddLineGraph(Data);
            }

编辑： 这是我使用 MVVM 的完整工作代码，因此您不需要使用 AddLineGraph：

XAML:

<Window x:Class="WpfApplication1.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
    <d3:ChartPlotter>
        <d3:LineGraph DataSource="{Binding Data}"></d3:LineGraph>
    </d3:ChartPlotter>
</Grid>

CS:

public partial class MainWindow : Window
    {
        MyViewModel viewModel;

        public MainWindow()
        {
            InitializeComponent();

            viewModel = new MyViewModel();
            DataContext = viewModel;
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            double[] my_array = new double[10];

            for (int i = 0; i < my_array.Length; i++)
            {
                my_array[i] = Math.Sin(i);
                viewModel.Data.Collection.Add(new Point(i, my_array[i]));
            }
        }
    }

视图模型：

using Microsoft.Research.DynamicDataDisplay.DataSources;

public class MyViewModel
    {
        public ObservableDataSource<Point> Data { get; set; }

        public MyViewModel()
        {
            Data = new ObservableDataSource<Point>();
        }
    }

使用 ObservableCollection 的动态数据显示

Dynamic Data Display with ObservableCollection

c#

wpf

charts

xaml

dynamic-data-display