How to draw an arrow in Silverlight

I need to draw an arrow between controls in a canvas. Currently I'm using the Line object but it doesn't have a way to draw a triangle at the end of the line.

This is roughly what I need:

[TextBox] <----- [Button]

I was trying to subclass Line and add a couple of lines at the end but the class is sealed.

How would you build a custom control that draws an arrow between X1,Y1 and X2,Y2?

13.10.2009 22:23:23
4 ОТВЕТА
РЕШЕНИЕ

Charles Petzold wrote a library for doing this in WPF. The logic, at least, should be transferable to Silverlight. It uses Polylines and Paths and should be easy to port.

Lines with Arrows @ Petzold Book Blog

--EDIT--

Ok -- here's another way to go about it:

Create a user control:

<UserControl x:Class="ArrowsAndDaggersLibrary.ArrowsAndDaggersUC"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas x:Name="LayoutRoot">
        <Line x:Name="Cap" />
        <Line x:Name="Connector" />
        <Line x:Name="Foot" />
    </Canvas>
</UserControl>

with the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ArrowsAndDaggersLibrary
{
    public partial class ArrowsAndDaggersUC : UserControl
    {
        private Point startPoint;
        public Point StartPoint
        {
            get { return startPoint; }
            set
            {
                startPoint = value;
                Update();
            }
        }

        private Point endPoint;
        public Point EndPoint
        {
            get { return endPoint; }
            set { 
                endPoint = value;
                Update();
            }
        }

        public ArrowsAndDaggersUC()
        {
            InitializeComponent();
        }

        public ArrowsAndDaggersUC(Point StartPoint, Point EndPoint)
        {
            InitializeComponent();
            startPoint = StartPoint;
            endPoint = EndPoint;
            Update();
        }

        private void Update()
        {
            //reconfig
            Connector.X1 = startPoint.X;
            Connector.Y1 = startPoint.Y;
            Connector.X2 = endPoint.X;
            Connector.Y2 = endPoint.Y;
            Connector.StrokeThickness = 1;
            Connector.Stroke = new SolidColorBrush(Colors.Black);

            Cap.X1 = startPoint.X;
            Cap.Y1 = startPoint.Y;
            Cap.X2 = startPoint.X;
            Cap.Y2 = startPoint.Y;
            Cap.StrokeStartLineCap = PenLineCap.Triangle;
            Cap.StrokeThickness = 20;
            Cap.Stroke = new SolidColorBrush(Colors.Black);

            Foot.X1 = endPoint.X;
            Foot.Y1 = endPoint.Y;
            Foot.X2 = endPoint.X;
            Foot.Y2 = endPoint.Y;
            Foot.StrokeEndLineCap = PenLineCap.Triangle;
            Foot.StrokeThickness = 20;
            Foot.Stroke = new SolidColorBrush(Colors.Black);
        }
    }
}

Call it like this:

LayoutRoot.Children.Add(new ArrowsAndDaggersUC(new Point(200, 200), new Point(300, 400)));

and you will have 1px stroke lines with 20px stroke triangles on the end of each line.

--EDIT--

@Number8 had a question about how to modify the user control so that the caps would point in the same direction as the line.

Modify the Xaml of the user control like so:

<UserControl x:Class="ArrowsAndDaggersLibrary.ArrowsAndDaggersUC"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas x:Name="LayoutRoot">
        <Line x:Name="Cap">
            <Line.RenderTransform>
                <RotateTransform x:Name="CapRotateTransform" />
            </Line.RenderTransform>
        </Line>
        <Line x:Name="Connector" />
        <Line x:Name="Foot">
            <Line.RenderTransform>
                <RotateTransform x:Name="FootRotateTransform" />
            </Line.RenderTransform>
        </Line>
    </Canvas>
</UserControl>

Then, change the "Update" method to get the angle of the line and rotate the caps to that angle:

private void Update()
{

    double angleOfLine = Math.Atan2((endPoint.Y - startPoint.Y), (endPoint.X - startPoint.X)) * 180 / Math.PI;

    Connector.X1 = startPoint.X;
    Connector.Y1 = startPoint.Y;
    Connector.X2 = endPoint.X;
    Connector.Y2 = endPoint.Y;
    Connector.StrokeThickness = 1;
    Connector.Stroke = new SolidColorBrush(Colors.Black);

    Cap.X1 = startPoint.X;
    Cap.Y1 = startPoint.Y;
    Cap.X2 = startPoint.X;
    Cap.Y2 = startPoint.Y;
    Cap.StrokeStartLineCap = PenLineCap.Triangle;
    Cap.StrokeThickness = 20;
    Cap.Stroke = new SolidColorBrush(Colors.Black);

    CapRotateTransform.Angle = angleOfLine;
    CapRotateTransform.CenterX = startPoint.X;
    CapRotateTransform.CenterY = startPoint.Y;

    Foot.X1 = endPoint.X;
    Foot.Y1 = endPoint.Y;
    Foot.X2 = endPoint.X;
    Foot.Y2 = endPoint.Y;
    Foot.StrokeEndLineCap = PenLineCap.Triangle;
    Foot.StrokeThickness = 20;
    Foot.Stroke = new SolidColorBrush(Colors.Black);

    FootRotateTransform.Angle = angleOfLine;
    FootRotateTransform.CenterX = endPoint.X;
    FootRotateTransform.CenterY = endPoint.Y;
}
7
30.07.2010 16:34:33
That's some interesting code but in Silverlight I can't inherit from Line (or shape for that matter) like Petzold did in WPF. Line is sealed and Shape doesn't do any drawing. I think the runtime is in charge of drawing because each of the Shape classes have a different "known identifier".
Joseph Liberty 14.10.2009 14:00:20
Nice work. It looks like the arrows are pointing east-west, even when the line runs nw - se. What would it take to make the arrowheads point the same direction the line is running?
Number8 29.07.2010 19:35:33
@Number8 - Thanks, not sure what you mean. Can you post the code you're using to instantiate the user control?
Timothy Lee Russell 30.07.2010 05:28:10
Cut 'n pasted your code, created an arrow like this: new Dagger1(new Point(20, 200), new Point(100, 450). Line runs northwest-southeast, but arrowheads point east-west.
Number8 30.07.2010 14:24:17
@Number8 - Updated the user control with a RotateTransform based off of the line's direction.
Timothy Lee Russell 30.07.2010 16:38:06

You can try a triangle cap for a pen; i've used it for something similar

http://msdn.microsoft.com/en-us/library/system.windows.media.penlinecap(VS.95).aspx

0
13.10.2009 22:35:55
But the Triangle is of the width of the line and the line is 1px so it doesn't show.
Joseph Liberty 14.10.2009 13:39:35

This simple method also creates an arrow and it worked for me.

    private static Shape DrawArrow(Point p1, Point p2)
    {
        GeometryGroup lineGroup = new GeometryGroup();

        double theta = Math.Atan2((p2.Y - p1.Y),(p2.X - p1.X)) * 180 / Math.PI;

        PathGeometry pathGeometry = new PathGeometry();
        PathFigure pathFigure = new PathFigure();
        pathFigure.StartPoint = p1;

        Point lpoint = new Point(p1.X + 2, p1.Y + 10);
        Point rpoint = new Point(p1.X - 2, p1.Y + 10);
        LineSegment seg1 = new LineSegment();
        seg1.Point = lpoint;
        pathFigure.Segments.Add(seg1);

        LineSegment seg2 = new LineSegment();
        seg2.Point = rpoint;
        pathFigure.Segments.Add(seg2);

        LineSegment seg3 = new LineSegment();
        seg3.Point = p1;
        pathFigure.Segments.Add(seg3);

        pathGeometry.Figures.Add(pathFigure);
        RotateTransform transform = new RotateTransform();
        transform.Angle = theta - 90;
        transform.CenterX = p1.X;
        transform.CenterY = p1.Y;
        pathGeometry.Transform = transform;
        lineGroup.Children.Add(pathGeometry);

        LineGeometry connectorGeometry = new LineGeometry();
        connectorGeometry.StartPoint = p1;
        connectorGeometry.EndPoint = p2;
        lineGroup.Children.Add(connectorGeometry);
        Path path = new Path();
        path.Data = lineGroup;
        return path;
    }
5
22.02.2010 17:48:05

All this Runtime and animation Line

//animation
public class Cls_Barriere
    {                       
        // animazione periferica
        public static void LineAnimation(Line _line,String _colore)
        {

            Storyboard result = new Storyboard();
            Duration duration = new Duration(TimeSpan.FromSeconds(2));

            ColorAnimation animation = new ColorAnimation();
            animation.RepeatBehavior = RepeatBehavior.Forever;
            animation.Duration = duration;
            switch (_colore.ToUpper())
            {
                case "RED": 
                    animation.From = Colors.Red;
                    break;
                case "ORANGE": 
                    animation.From = Colors.Orange;
                    break;
                case "YELLOW": 
                    animation.From = Colors.Yellow;
                    break;
                case "GRAY": 
                    animation.From = Colors.DarkGray;
                    break;
                default: 
                    animation.From = Colors.Green;
                    break;
            }

            animation.To = Colors.Gray;
            Storyboard.SetTarget(animation, _line);
            Storyboard.SetTargetProperty(animation, new PropertyPath("(Line.Stroke).(SolidColorBrush.Color)"));
            result.Children.Add(animation);
            result.Begin();

        }
    }



public partial class MainPage : UserControl
    {
        private Point startPoint;
        private Point endPoint;

        // canvas event onmouse click to start drawing runtime a line
        public MainPage()
        {
            InitializeComponent();
            Canvas.MouseLeftButtonDown += Canvas_MouseLeftButtonDown;
            Canvas.MouseLeftButtonUp += Canvas_MouseLeftButtonUp;

        }

        // on muose up drawing line and add canvas all references
        void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            endPoint = new Point();
            endPoint.X = e.GetPosition(this.Canvas).X;
            endPoint.Y = e.GetPosition(this.Canvas).Y;
            Line LineCap = new Line();
            Line LineFoot = new Line();
            Line LineConnect = new Line();
            RotateTransform FootRotateTransform = new RotateTransform();
            RotateTransform CapRotateTransform = new RotateTransform();


            LineConnect.Stroke = new SolidColorBrush(Colors.White);
            LineConnect.StrokeThickness = 5;
            LineConnect.StrokeStartLineCap = PenLineCap.Round;
            LineConnect.StrokeEndLineCap = PenLineCap.Round;
            LineConnect.X1 = startPoint.X;
            LineConnect.Y1 = startPoint.Y;
            LineConnect.X2 = endPoint.X;
            LineConnect.Y2 = endPoint.Y;

            LineCap.X1 = startPoint.X;
            LineCap.X2 = startPoint.X;
            LineCap.Y1 = startPoint.Y;
            LineCap.Y2 = startPoint.Y;
            LineCap.StrokeThickness = 20;
            LineCap.StrokeStartLineCap = PenLineCap.Round;
            LineCap.Stroke = new SolidColorBrush(Colors.White);
            LineFoot.StrokeThickness = 20;

            LineFoot.X1 = endPoint.X;
            LineFoot.X2 = endPoint.X;
            LineFoot.Y1 = endPoint.Y;
            LineFoot.Y2 = endPoint.Y;
            LineFoot.StrokeEndLineCap = PenLineCap.Triangle;
            LineFoot.Stroke = new SolidColorBrush(Colors.White);
            Double angleOfLine = new Double();
            angleOfLine = Math.Atan2((LineConnect.Y2 - LineConnect.Y1), (LineConnect.X2 - LineConnect.X1)) * 180 / Math.PI;
            FootRotateTransform.Angle = angleOfLine;
            FootRotateTransform.CenterX = endPoint.X;
            FootRotateTransform.CenterY = endPoint.Y;

            CapRotateTransform.Angle = angleOfLine;
            CapRotateTransform.CenterX = startPoint.X;
            CapRotateTransform.CenterY = startPoint.Y;
            LineFoot.RenderTransform = FootRotateTransform;
            LineCap.RenderTransform = CapRotateTransform;

            LineConnect.Loaded += _line_Loaded;
            LineCap.Loaded += _line_Loaded;
            LineFoot.Loaded += _line_Loaded;
            Canvas.Children.Add(LineConnect);
            Canvas.Children.Add(LineCap);
            Canvas.Children.Add(LineFoot);
        }
        //load animation color
        void _line_Loaded(object sender, RoutedEventArgs e)
        {
            Cls_Barriere.LineAnimation(sender as Line, "RED");
        }
        // add canvas lines
        void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            startPoint = new Point();
            startPoint.X = e.GetPosition(this.Canvas).X;
            startPoint.Y = e.GetPosition(this.Canvas).Y;
        }



    }
0
10.06.2015 13:00:00