89

Is it possible to draw a filled in triangle using XAML only (not a code behind solution)?

Triangle should be like on the image below to represent sort direction Ascending/Descending along with a sort button on a chart control:

enter image description here

EDIT: The solution, thanks to SpeziFish:

Ascending:

<Polygon Points="0,0 8,5, 0,10" Stroke="Black" Fill="Black" />

Descending:

<Polygon Points="8,0 0,5, 8,10" Stroke="Black" Fill="Black" />
Community
  • 1
  • 1
sll
  • 61,540
  • 22
  • 104
  • 156
  • 1
    Drawing a triangle with an rectangle? You could look into `Path` instead. Look [here](http://stackoverflow.com/questions/432384/wpf-create-buttons-with-up-and-down-arrows-using-standard-buttons/433818#433818) for a basic example. – erikH Oct 24 '11 at 11:28
  • @erikH : sorry, the main requirement is a XAML only – sll Oct 24 '11 at 11:31

3 Answers3

110
<Polygon Points="0,0 80,50, 0,100" Stroke="Black" Fill="Black" />

See API or Example.

SpeziFish
  • 3,262
  • 2
  • 28
  • 27
  • sorry, the main requirement is a XAML only so Polygon is fine. How to make it smaller 10 times? – sll Oct 24 '11 at 11:31
  • 1
    Devide the numbers by ten. The numbers are easily the pixel coordinates (x,y) of the corners. – SpeziFish Oct 24 '11 at 11:34
  • how do you position and rotate though? I mean I want to draw a triangle that will be position around a circle (outside that circle) based on binding. Any ideas? – John Demetriou Nov 11 '16 at 08:28
  • for scaling you may add "Stretch=Fill", so it gets scaled to fit the parent container, e.g. Button.Content..) Ok, just spotted it in the answer of @LongZheng :) – dba Apr 17 '19 at 07:08
38

I want to add these to their collection:

enter image description here 

    <Polygon Points="5,0 10,10, 0,10" Stroke="Black" Fill="Black" />

enter image description here 

    <Polygon Points="0,0 5,10, 10,0" Stroke="Black" Fill="Black" />
Vladimir Trifonov
  • 1,395
  • 11
  • 9
26

Using paths 

<Path Width="33" Height="37" Stretch="Fill" Stroke="Black" Fill="Black" Data="F1 M 319.344,237.333L 287.328,218.849L 287.328,255.818L 319.344,237.333 Z "/>
<Path Width="33" Height="37" Stretch="Fill" Stroke="Black" Fill="Black" Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z "/>
LongZheng
  • 1,873
  • 17
  • 18
  • how do you position and rotate though? I mean I want to draw a triangle that will be position around a circle (outside that circle) based on binding. Any ideas? – John Demetriou Nov 11 '16 at 08:28
  • 1
    LayoutTransform could help you out. Maybe the best shot is, to create a Usercontrol with a 'Direction' Dependency Property so you could place it as often you need w/o rewriting the xaml – dba Apr 17 '19 at 07:10