81

I want to create some up and down buttons using the standard button background but with black arrows.

What is the best way to accomplish this with WPF??

Malcolm

5 Answers 5

182

I find Marlett (a font built into Windows) handy for that sort of thing.

<Button FontFamily="Marlett" FontSize="20" Content="5"/>
<Button FontFamily="Marlett" FontSize="20" Content="6"/>

Output:

enter image description here

12
  • 7
    Wow. I know this isn't as "WPF-y" as drawing a triangular polygon by hand, but still ... didn't expect down-votes. Commented Jan 11, 2009 at 5:42
  • 3
    Click Start|Run and type "charmap" - then you can switch to Marlett and have a look. I believe it's the font that Windows 95 originally used to render all its UI button glyphs. Commented Jan 11, 2009 at 7:05
  • 5
    +1 Fixed my problem. Much nicer than drawing a triangle each time. Very handy to know. Thanks!
    – Joey
    Commented Oct 11, 2011 at 14:47
  • 2
    In Silverlight "Webdings" would be the font to use for this. Commented Oct 24, 2011 at 17:25
  • 1
    This may as per Taran's answer now be an outdated font, at least it is available on all Windows versions from 7 and up.
    – Dabblernl
    Commented Aug 14, 2016 at 9:06
116

No discussion on this subject would be complete without mentioning the geometry mini-language (or Path Markup Syntax) for a more compact shape definition:-

  <Button>
    <Path Fill="Black" Data="M 0 6 L 12 6 L 6 0 Z"/>
  </Button>
  <Button>
    <Path Fill="Black" Data="M 0 0 L 6 6 L 12 0 Z"/>
  </Button>

The first describes a Move to 0,6 Line to 12,6 Line to 6,0 and then close the shape (Z).

There is also a curve syntax.

3
  • 5
    Left and right arrows, respectively: Data="M -2 6 L 4 12 L 4 0 Z" Data="M 2 12 L 9 6 L 2 0 Z"
    – Tim
    Commented Sep 2, 2016 at 22:41
  • @Tim These are not symmetrical :/
    – BartoszKP
    Commented Aug 9, 2018 at 14:10
  • Thanks for the explanation :) finally know what these characters L,M,Z stand for!!
    – mrid
    Commented Apr 22, 2019 at 3:21
49

The preferred way to do this now is using Segoe UI Symbol. It replaces Marlett and provides many useful glyphs. Up and down would be

<Button FontFamily="Segoe UI Symbol" Content="&#xE1FD;"/>    
<Button FontFamily="Segoe UI Symbol" Content="&#xE110;"/>

Which renders as:

updown

This font is pre-installed on all versions of Windows 7 and 8.

As of the release of Windows 10, the Segoe UI Symbol font is considered a legacy resource and should be replaced by Segoe MDL2 Assets in all new projects as outlined here.

2
  • 7
    This font has been replaced by Segoe MDL2 Assets for Windows 10. The link provided for Segoe UI Symbol leads there now. Note that Segoe UI Symbol is not present on Windows 10 and that Segoe MDL2 Assets is not present on Windows 8.1.
    – Dabblernl
    Commented Aug 14, 2016 at 9:02
  • 1
    This answer should be upvoted more for visibility since it's the go-to method nowadays. Commented Sep 24, 2017 at 11:53
7

You can create a Polygon which represents your up and down triangles and then set them to be the content of the buttons:

<Button>
  <Polygon 
    Points="300,200 450,200 375,300 300,200"
    Stroke="Black">
    <Polygon.Fill>
      <SolidColorBrush Color="Black" />
    </Polygon.Fill>
  </Polygon>
</Button>

You can tweak these to draw different figured, but that's generally the XAML you would use for basic geometry.

3

If you would like to have an arrow with base rectangle you can use this sample...

<Button >
   <Polygon   Stretch="Fill"  Fill="Black" Points="0,0 0,30 0,10 30,10 30,-10 45,10 30,30 30,20 0,20 0,0 30,0 30,10 0,10" />
</Button>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.