web-dev-qa-db-fra.com

WPF - Créer des boutons avec des flèches haut et bas à l'aide des boutons standard

Je veux créer des boutons haut et bas en utilisant l'arrière-plan du bouton standard mais avec des flèches noires.

Quelle est la meilleure façon d'y parvenir avec WPF ??

Malcolm

wpfbutton
66
Malcolm

Je trouve Marlett (une police intégrée à Windows) pratique pour ce genre de chose.

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

Aucune discussion sur ce sujet ne serait complète sans mentionner le mini-langage de géométrie (ou Path Markup Syntax ) pour une définition de forme plus compacte: -

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

Le premier décrit un Déplacement vers 0,6 Ligne vers 12,6 Ligne vers 6,0 puis fermez la forme (Z).

Il existe également une syntaxe de courbe.

105
Rhys

La façon préférée de le faire maintenant est d'utiliser Segoe UI Symbol . Il remplace Marlett et fournit de nombreux glyphes utiles. De haut en bas serait

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

Cette police est préinstallée sur toutes les versions de Windows 7+.

33
Taran

Vous pouvez créer un Polygon qui représente vos triangles haut et bas, puis les définir comme le contenu des boutons:

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

Vous pouvez les modifier pour dessiner différentes figures, mais c'est généralement le XAML que vous utiliseriez pour la géométrie de base.

5
casperOne

Si vous souhaitez avoir une flèche avec un rectangle de base, vous pouvez utiliser cet exemple ...

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