如何从一个点提取单个x轴y轴值以在WPF中绘制一条线 [英] How to extract individual x axis y axis values from a point to draw a line in WPF

问题描述

在ViewModel类中，我有ObservableCollection< List< point>> MyList作为属性。在xaml中，我需要提取x轴y轴值以从Mylist中绘制线条。我已经在xaml中将DataContext设置为VM实例。



我尝试过：

In ViewModel class, I have ObservableCollection<List<point>> MyList as property. in xaml, I need to extract x axis y axis values to draw lines from Mylist. I have already set DataContext to VM instance in xaml.

What I have tried:

<ScrollViewer Name="scrollViewer" HorizontalScrollBarVisibility="Auto"   Grid.Row="2" Grid.Column="3" 
                    Height= "600" Width="Auto">
            <ItemsControl ItemsSource="{Binding Path=MyList}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas x:Name="front_canvas" Background="White"  Height="1200" Width="{Binding CanvasWidth}" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Line X1="{Binding Path=LinePoints}" Y1="{Binding LinePoints}" 
                            X2="{Binding LinePoints}" Y2="{Binding LinePoints}"
                              Stroke="Black" StrokeThickness="1">
                        </Line>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>

推荐答案

我在stackoverflow上找到了你的潜在帮助：

数据绑定 - 在WPF中将行集合绑定到画布 - Stack Overflow [ ^ ]



看起来你在绘制线时没有完成填充点的绑定，至少，你可能想要使用它创建自定义Line以将所有数据保存在逻辑结构中的解决方案。

I found potential help for you on stackoverflow:
data binding - Bind collection of lines to canvas in WPF - Stack Overflow[^]

Looks like you didn't finish filling in the bindings for the points when drawing the line, at the least, and you may want to use its solution to create a custom Line to keep all of the data in a logical structure.

最佳解决方案取决于您的问题，但我做的事情有点不同，因为一个人几乎总是想要Y绘图时反转轴。

简单的WPF LineChart控制 [ ^ ]

The optimal solution depends on your problem, but I did things a little different since one nearly always want the Y axis inverted when plotting.
A simple WPF LineChart control[^]

<ItemsControl x:FieldModifier="private" x:Name="PlotArea" Canvas.Bottom="40" Canvas.Left="40"  ClipToBounds="True"  ItemsSource="{Binding}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas >
                <Canvas.LayoutTransform>
                    <ScaleTransform ScaleX="1" ScaleY="-1"></ScaleTransform>
                </Canvas.LayoutTransform>
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

我的问题是可观察的集合不可能是直接粘合到PolyLine中的点。所以我最终编写了一些手动执行此操作的代码。或者你可以采用已经建议的方法。

My problem was that the observable collection could not be bonded directly to the Points in the PolyLine. So I ended up writing some code that did this manually. Or you could do the approach that is already suggested.

这篇关于如何从一个点提取单个x轴y轴值以在WPF中绘制一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！