Рисование полилинии и отображение ее идентификатора

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" />

Но я также хочуотображать в тексте соответствующие идентификаторы каждой полилинии.

Как этого добиться в XAML.

Answer 1

На мой взгляд, лучший способ добиться этого - создать собственный элемент управления, который рисует полилинию и текстовые блоки вместе с ней.Я написал что-то быстрое для вас, это плохо, и вы не должны использовать это как есть, но должны дать вам общее руководство о том, что делать:

<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

Answer 2

<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>