在网格上显示大量线条的最佳实践答案

【问题标题】：Best practice for showing a lot of lines on grid在网格上显示大量线条的最佳实践
【发布时间】：2018-02-27 16:48:48
【问题描述】：

我有一个程序可以读取文件并从文件内容中创建大约 1000 个点（X、Y 坐标）。我想将这些点显示为网格上的小十字（基本上是一种图表）。

这就是它的样子（绿色和蓝色的十字）

目前我在后面的代码中这样做：

foreach (var measurement in collection)
{
  createValueCross(measurement);
}

private void createValueCross(CGM_Measurement measurement)
{
    // set color of line (green when within opt range)
    var crossColor = measurement.Value < mvm.OptMaximum && measurement.Value > mvm.OptMinimum ? Colors.Green : Colors.Blue;

    //create lines
    Line horizontal = new Line();
    Line vertical = new Line();
    vertical.Stroke = horizontal.Stroke = new SolidColorBrush(crossColor);
    vertical.StrokeThickness = horizontal.StrokeThickness = 1;

    //get center coordinates
    var x = measurement.Time.getXPosition();
    x = x < 10 ? 10 : x;
    var y = measurement.Value.getYPosition();
    y = y < 10 ? 10 : y;

    // set line start/endpoint +-2 pix from center 
    horizontal.X1 = x - 2;
    horizontal.X2 = x + 2;
    horizontal.Y1 = horizontal.Y2 = y;
    vertical.Y1 = y - 2;
    vertical.Y2 = y + 2;
    vertical.X1 = vertical.X2 = x;

    // draw lines on grid
    chartDataGrid.Children.Add(horizontal);
    chartDataGrid.Children.Add(vertical);

}

在 XAML 中是否也有解决此问题的好方法？就像在“折线”中可以指定点集合一样？

【问题讨论】：

这可能会有所帮助：stackoverflow.com/a/41616789/1136211。或者这个：stackoverflow.com/a/35776191/1136211
所以我必须创建一个包含水平和垂直线的项目控件并将其绑定到一个点集合？
我不知道。你的问题太笼统了。
是的，我想这就是要走的路。创建了一个小测试程序，它可以工作。完成后我会发布答案。谢谢
你的方法对我来说似乎很好。代码比下面的 XAML 示例小（尽管这看起来也不错），而且当绘制数据时，您的“从 XML 类似的文本中查看布局”技能对您没有多大帮助。如果您不想减少 Java 语言和更多 C# 语言，您可能需要阅读 C# 中的驼峰式和 Pascal 大小写约定（或者只是按照 ReSharper 告诉您的操作）。

标签： c# wpf line lines

【解决方案1】：

所以，这里是解决方案：

C#代码：

    LinesVM vm;
    public MainWindow()
    {
        InitializeComponent();

        vm = new LinesVM();
        vm.Lines = new ObservableCollection<test1.MainWindow.LinePoints>();
        SolidColorBrush col = new SolidColorBrush(Colors.Red);
        vm.Lines.Add(new LinePoints(1, 5, col));
        vm.Lines.Add(new LinePoints(10, 15, col));
        vm.Lines.Add(new LinePoints(41, 45, col));
        vm.Lines.Add(new LinePoints(71, 85, col));

        DataContext = vm;


    }

    public class LinesVM
    {
        private ObservableCollection<LinePoints> _lines;
        public ObservableCollection<LinePoints> Lines
        {
            get { return _lines; }
            set
            {
                if (_lines == value)
                    return;
                _lines = value;
            }
        }

    }

    public class LinePoints:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged = (sender, e) => { };

        public LinePoints(double x, double y, SolidColorBrush color)
        {
            X = x;
            Y = y;
            Color = color;
        }

        private SolidColorBrush _color;
        public SolidColorBrush Color
        {
            get { return _color; }
            set
            {
                if (_color == value)
                    return;
                _color = value;
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(Color)));
            }
        }

        private double _x1;
        public double X1
        {
            get { return _x1; }
            set
            {
                if (_x1 == value)
                    return;
                _x1 = value;
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(X1)));
            }
        }

        private double _x2;
        public double X2
        {
            get { return _x2; }
            set
            {
                if (_x2 == value)
                    return;
                _x2 = value;
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(X2)));
            }
        }

        private double _y1;
        public double Y1
        {
            get { return _y1; }
            set
            {
                if (_y1 == value)
                    return;
                _y1 = value;
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(Y1)));
            }
        }

        private double _y2;
        public double Y2
        {
            get { return _y2; }
            set
            {
                if (_y2 == value)
                    return;
                _y2 = value;
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(Y2)));
            }
        }

        private double _y;
        public double Y
        {
            get { return _y; }
            set
            {
                if (_y == value)
                    return;
                _y = value;                    
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(Y)));
                Y1 = Y - 2;
                Y2 = Y + 2;
            }
        }

        private double _x;
        public double X
        {
            get { return _x; }
            set
            {
                if (_x == value)
                    return;
                _x = value;                    
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(X)));
                X1 = X - 2;
                X2 = X + 2;
            }
        }

    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        SolidColorBrush col = new SolidColorBrush(Colors.Black);
        vm.Lines.Add(new LinePoints(21, 25, col));
        vm.Lines.Add(new LinePoints(210, 215, col));
        vm.Lines.Add(new LinePoints(241, 145, col));
        vm.Lines.Add(new LinePoints(171, 185, col));
        vm.Lines[1].Color = col;
    }

和 XAML：

 <Grid x:Name="maingrid">
        <Button Height="20" Width="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click_1">click</Button>

        <ItemsControl Name="IC" ItemsSource="{Binding Lines}" Margin="10">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Canvas>
                        <Line Name="horizontal" X1="{Binding X1}" X2="{Binding X2}" Y1="{Binding Y}" Y2="{Binding Y}"
                          StrokeThickness="1" Stroke="{Binding Color}"/>
                        <Line Name="vertical" X1="{Binding X}" X2="{Binding X}" Y1="{Binding Y1}" Y2="{Binding Y2}"
                          StrokeThickness="1" Stroke="{Binding Color}"/>
                    </Canvas>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

【讨论】：