C# PathElement Grafik zeichnen

Hallo, ich bin gerade dabei mit WPF und C# einen Texteditor zu basteln. Das klappt auch soweit. Nun möchte ich in meinem Menu kleine Grafiken einfügen (Diskette vor "speichern"). In einem Buch habe ich jetzt folgendes gefunden.

damit wird ein kleiner roter Pfeil erzeugt...und mit

wird das Bildchen für "neues Dokument" erzeugt...ich habe die jeweils zweite zeile aus einem Buch entnommen und verstehe nicht was die Buchstaben M,L und Z bedeuten Kann mir jemand erklären, wie sich die Data="..." Zeile definiert?...also was was bedeutet und wie man daraus andere grafiken basteln kann...zb. ne kleine diskette oder ähnliches...

Ich muss nur wissen, wie man diese Data="..." Zeile aufbaut...wie man das ganze einbindet weiß ich...nur das mit den Buchstaben ist mir ein Rätsel...

vielen Dank für eure Hilfe

Answer 1

[FaronWeissAlles]

Hier ist die detaillierte Übersicht:

http://msdn.microsoft.com/de-de/library/ms752293(v=vs.110).aspx

Im Grunde ist es ganz einfach, erfordert aber ein bisschen Vorstellungskraft (wenn du es nicht in Expression Blend/Design live zeichnest).

Du hast immer ein Buchstabe gefolgt von 2 (oder mehr) Koordinaten. Der Buchstabe gibt die Aktion an, die Koordinaten die Position. Begonnen wird im Punkt 0,0

M = Move (Verschieben der Position)
L = Linie
Q/C/S/T Bezier-Kurven 
A = Arc (Bogen)
Z = Schließt die Figur

Beispiel:

M5,5 L15,5 L10,10 Z

Verschiebt die Position von 0,0 nach 5,5 (nichts wird gezeichnet). zeichnet eine Linie von 5,5 nach 15,5, dann eine Linie von 15,5 nach 10,10 und schließt die Figur (durch zeichnen einer Linie von 10,10 nach 5,5). Und zu sehen ist dann ein Dreieck, das nach unten zeigt.

Es ist empfehlenswert das Entwickeln einer solchen Pfadangabe in einem XAML-Editor zu machen, wo du live sehen kannst was passiert (sollte auch in Visual Studio problemlos möglich sein).

---

Alternativ hast du noch die Möglichkeit bereits fertige Pfadbasierte Icons zu verwenden. Das MahApps.Metro.Resources-Paket bringt einen ganzen Haufen solcher Icons mit, unter anderem auch eine Diskette.

Du öffnest dazu in Visual Studio die Paket-Manager-Console (müsste irgendwo unter Ansicht sein) und gibst ein:

Install-Package MahApps.Metro.Resources

Dann lädt er die Icons runter und fügt sie ins Projekt ein. Was du dann noch machen musst ist in der App.xaml die Datei hinzufügen:

<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

Und du kannst sie überall in Fenstern und Controls verwenden:

<Rectangle Fill="Black">
        <Rectangle.OpacityMask>
            <VisualBrush Visual="{StaticResource appbar_save}" Stretch="Fill" />
        </Rectangle.OpacityMask>
    </Rectangle>

Answer 2

[Toraka]

Anstatt den Pfad derart “verschlüsselt“ zu definieren, könntest du auch explizit Grafikobjekte zeichnen, deren Aufbau verständlich ist. Beispiel einer Grafik aus verschiedenen Objekten:

<Path Stroke="Black" StrokeThickness="3" Fill="Blue" >

  <Path.Data>

    <GeometryGroup >

      <LineGeometry StartPoint="20,200" EndPoint="300,200" />

      <EllipseGeometry Center="80,150" RadiusX="50" RadiusY="50" />

      <RectangleGeometry Rect="80,167 150 30"/>

    </GeometryGroup>

  </Path.Data>

</Path>

Answer 3

[Runshak]

roter pfeil

<Path x:Key="imgBeenden" Fill="Red" Stroke="Black" StrokeThickness="1"

                  Data="M 7,13 L 2,7 5,7 5,0 9,0 9,7 12,7 z " /> ####

Answer 4

[Runshak]

"Neu"

<Path x:Key="imgNeu" Fill="Beige" Stroke="Black" StrokeThickness="1"

              Data="M 3,3 L 3,15 14,15 14,3 Z M 10,3 L 14,7 " /> ####