locked
Creating the double sided Arrow shape in windows store apps

    Question

  • I need to create an Arrow shape in windows store apps.

    How can I achieve this?

    Can we customize the StrokeEndLineCap of Line Control?

    Thanks

    Friday, June 06, 2014 10:21 AM

Answers

  • For the positioning you need to calculate Canvas.Left and Canvas.Top, Rotation Transformation, and Height for the Path.

    I'm afraid I do not see any solution without applying some trigonometry to calculate the Path's rotation transformation (and height).

    I realize that it sounds a heavy process, but I would suggest you build a user control with X1, X2, Y1 and Y2 as dependency properties to encapsulate these calculations. This article may give you a quick(er) start.

    Friday, June 06, 2014 12:33 PM

All replies

  • You may use a Path control for this:

    <Path Width="100"
            Height="30" 
            Stretch="Fill"
            Fill="Red"
            Data="F1 M 409.101,706.919L 398.981,696.799C 398.592,696.411 398.083,696.216 397.573,696.216C 397.064,696.216 396.553,696.411 396.165,696.799C 395.388,697.578 395.388,698.838 396.165,699.615L 403.469,706.919L 379.916,706.92L 362.675,706.92L 369.98,699.616C 370.757,698.838 370.757,697.578 369.98,696.8C 369.202,696.023 367.94,696.023 367.163,696.8L 357.044,706.92L 355.052,708.911L 357.044,710.903L 367.163,721.023C 367.552,721.411 368.061,721.607 368.572,721.607C 369.082,721.607 369.592,721.411 369.98,721.023C 370.757,720.244 370.757,718.984 369.98,718.207L 362.675,710.903L 386.229,710.902L 403.469,710.902L 396.165,718.206C 395.388,718.984 395.388,720.244 396.165,721.022C 396.944,721.799 398.204,721.799 398.981,721.022L 409.101,710.902L 411.092,708.911L 409.101,706.919 Z " />

    Apply a Transformation on it to position it properly

    Friday, June 06, 2014 11:07 AM
  • Hi Diederik,

    Thanks for reply.

    I need the arrow shape of which we can set the x1,x2,y1,y2 points.

    Is it possible?

    Thanks,

    Vinay

    Friday, June 06, 2014 11:47 AM
  • For the positioning you need to calculate Canvas.Left and Canvas.Top, Rotation Transformation, and Height for the Path.

    I'm afraid I do not see any solution without applying some trigonometry to calculate the Path's rotation transformation (and height).

    I realize that it sounds a heavy process, but I would suggest you build a user control with X1, X2, Y1 and Y2 as dependency properties to encapsulate these calculations. This article may give you a quick(er) start.

    Friday, June 06, 2014 12:33 PM