Question

让我说我有这种csv文件

ID,X,Y
A,1,2
B,3,4
C,5,6

例如，我正在使用上述坐标在画布上绘制折线。

  <Polyline
    Points="1,2 3,4 5,6"
    Stroke="Black"
    StrokeThickness="4"
    Canvas.Left="150" />

但是我也想在文本中显示每个折线点的相应ID。

如何在XAML中实现这一目标。

Answer 1

<Canvas>

    <Polyline Points="1,2 3,4 5,6"
              Stroke="Black"
              StrokeThickness="4"
              Canvas.Left="150" />

    <TextBlock Canvas.Left="151" Canvas.Top="2" Text="A" />
    <TextBlock Canvas.Left="153" Canvas.Top="4" Text="B" />
    <TextBlock Canvas.Left="155" Canvas.Top="6" Text="C" />

</Canvas>

Answer 2

在我看来，达到此目的的最佳方法是创建一个自定义控件，该控件绘制一条折线和带有它的文本块。我帮你写了几句话它不好，您不应该按原样使用它，而应该为您提供操作的一般指导：

<UserControl x:Class="Opfi.myPolyLine"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Opfi"
         mc:Ignorable="d"              
         d:DesignHeight="500" d:DesignWidth="500">
<Canvas Name="HiddenCanvas" Height="{Binding ElementName=line, Path=ActualHeight}" Width="{Binding ElementName=line, Path=ActualWidth}">        
    <Polyline Name="line" Points="{Binding Points}" Stroke="{Binding Stroke}" StrokeThickness="{Binding StrokeThickness}"/>
</Canvas>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace YOurNamsepace
{
    /// <summary>
    /// Interaction logic for myPolyLine.xaml
    /// </summary>
    public partial class myPolyLine : UserControl
    {
        public myPolyLine()
        {
            InitializeComponent();
            this.DataContext = this;

            this.Loaded += makeBoxes;
        }

        private void makeBoxes(object sender, RoutedEventArgs e)
        {
            HiddenCanvas.Children.RemoveRange(0, HiddenCanvas.Children.Count - 1);
            foreach (var point in Points)
            {
                TextBlock tb = new TextBlock();
                tb.Text = $" {point.X.ToString()} , {point.Y.ToString()}";
                Border brd = new Border();
                brd.SetValue(Canvas.LeftProperty, point.X);
                brd.SetValue(Canvas.TopProperty, point.Y);
                brd.BorderThickness = new Thickness(1);
                brd.BorderBrush = new SolidColorBrush(Colors.Black);
                brd.Child = tb;
                HiddenCanvas.Children.Add(brd);
            }
        }

        public PointCollection Points
        {
            get
            {
                return (PointCollection)this.GetValue(PointsProperty);
            }
            set
            {
                this.SetValue(PointsProperty, value);
            }
        }

        // Using a DependencyProperty as the backing store for Points.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PointsProperty =
            DependencyProperty.Register(nameof(Points), typeof(PointCollection), typeof(myPolyLine), new PropertyMetadata(default(PointCollection)));


        public Brush Stroke
        {
            get { return (Brush)this.GetValue(StrokeProperty); }
            set { this.SetValue(StrokeProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Stroke.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty StrokeProperty =
            DependencyProperty.Register(nameof(Stroke), typeof(Brush), typeof(myPolyLine), new PropertyMetadata(default(Brush)));



        public Thickness StrokeThickness
        {
            get { return (Thickness)this.GetValue(StrokeThicknessProperty); }
            set { this.SetValue(StrokeThicknessProperty, value); }
        }

        // Using a DependencyProperty as the backing store for StrokeThickness.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty StrokeThicknessProperty =
            DependencyProperty.Register(nameof(StrokeThickness), typeof(Thickness), typeof(myPolyLine), new PropertyMetadata(default(Thickness)));




    }
}

您可以在xaml中像这样使用它：

<local:myPolyLine Points="0,0 100,100 200,100 300,60 100,00" Stroke="HotPink" StrokeThickness="10"/>

看起来像这样：

编辑：您完全改变了您的问题！因此，即使稍作修改，该答案也将不再有意义，即使它仍然可以正常工作。不要让Points成为PointCollection的蜜蜂，而是让它成为包含{ID,X,Y}的自定义类的可观察集合，而不是显示X，Y显示ID

绘制折线并显示其相关ID

2 个答案: