WPF - Erstellen Sie Schaltflächen mit Aufwärts- und Abwärtspfeilen mit Standardschaltflächen

72

Ich möchte einige Auf- und Ab-Schaltflächen mit dem Standard-Schaltflächenhintergrund erstellen, jedoch mit schwarzen Pfeilen.

Was ist der beste Weg, um dies mit WPF zu erreichen?

Malcolm

wpf button Malcolm
quelle

Antworten:

167

Ich finde Marlett (eine in Windows integrierte Schriftart) praktisch für solche Dinge.

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

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

Matt Hamilton
quelle
7
Beeindruckend. Ich weiß, dass dies nicht so "WPF-y" ist wie das Zeichnen eines dreieckigen Polygons von Hand, aber trotzdem ... habe ich keine Abstimmungen erwartet.
Matt Hamilton
3
Klicken Sie auf Start | Ausführen und geben Sie "charmap" ein. Dann können Sie zu Marlett wechseln und einen Blick darauf werfen. Ich glaube, es ist die Schriftart, die Windows 95 ursprünglich verwendet hat, um alle Glyphen der UI-Schaltflächen zu rendern.
Matt Hamilton
5
+1 Mein Problem wurde behoben. Viel schöner als jedes Mal ein Dreieck zu zeichnen. Sehr praktisch zu wissen. Vielen Dank!
Joey
2
In Silverlight wäre "Webdings" die dafür zu verwendende Schriftart.
Doguhan Uluca
1
Dies kann laut Tarans Antwort jetzt eine veraltete Schriftart sein, zumindest ist sie in allen Windows-Versionen ab 7 verfügbar.
Dabblernl
111

Keine Diskussion zu diesem Thema wäre vollständig, ohne die Geometrie-Minisprache (oder die Pfadmarkierungssyntax ) für eine kompaktere Formdefinition zu erwähnen : -

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

Der erste beschreibt eine Verschiebung zu 0,6 Linie zu 12,6 Linie zu 6,0 und schließt dann die Form (Z).

Es gibt auch eine Kurvensyntax.

Rhys
quelle
4
Pfeile nach links bzw. rechts: Daten = "M -2 6 L 4 12 L 4 0 Z" Daten = "M 2 12 L 9 6 L 2 0 Z"
Tim
@ Tim Diese sind nicht symmetrisch: /
BartoszKP
Danke für die Erklärung :) endlich wissen, wofür diese Zeichen L, M, Z stehen !!
Mrid
37

Der bevorzugte Weg, dies jetzt zu tun, ist die Verwendung des Segoe-UI-Symbols . Es ersetzt Marlett und bietet viele nützliche Glyphen. Auf und ab wäre

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

Was rendert als:

Geben Sie hier die Bildbeschreibung ein

Diese Schriftart ist auf allen Versionen von Windows 7+ vorinstalliert.

Taran
quelle
4
Diese Schriftart wurde durch Segoe MDL2 Assets für Windows 10 ersetzt. Der für das Segoe UI-Symbol bereitgestellte Link führt jetzt dorthin. Beachten Sie, dass das Segoe UI-Symbol unter Windows 10 nicht vorhanden ist und dass Segoe MDL2-Assets unter Windows 8.1 nicht vorhanden sind.
Dabblernl
Diese Antwort sollte aus Gründen der Sichtbarkeit besser bewertet werden, da dies heutzutage die Methode ist, mit der man sich austauschen kann.
Christian Ivicevic
6

Sie können ein PolygonDreieck erstellen, das Ihre Auf- und Ab-Dreiecke darstellt, und diese dann als Inhalt der Schaltflächen festlegen:

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

Sie können diese optimieren, um verschiedene Figuren zu zeichnen, aber das ist im Allgemeinen die XAML, die Sie für die Grundgeometrie verwenden würden.

casperOne
quelle
3

Wenn Sie einen Pfeil mit einem Basisrechteck haben möchten, können Sie dieses Beispiel verwenden ... 

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